ars-badge — Demo

About

Small, inline labels for statuses, categories, and counts. Supports 7 color variants, 3 sizes, pill shape, and minimal dot mode for status indicators.

Variants

Primary

Secondary

Success

Warning

Danger

Info

Neutral

<ars-badge variant="success">Success</ars-badge>

Sizes

Small

Medium

Large

<ars-badge size="lg">Large</ars-badge>

Pill

Pill Badge

Verified

3 New

<ars-badge pill variant="primary">Pill Badge</ars-badge>

Status Dot

Online Away Offline Info

<ars-badge dot variant="success"></ars-badge> Online

Theme Toggle

Usage

<ars-badge variant="success" pill>Verified</ars-badge>
<ars-badge dot variant="danger"></ars-badge>