Badge

Inline semantic labels and chips. Apply badge= to any inline element. Tone-aware, size variants, dot indicators, and shape modifiers.

Tone badges

Named tone variants

primary danger success warning info neutral outline solid gradient

<span badge="primary">primary</span>
<span badge="danger">danger</span>
<span badge="success">success</span>
<span badge="warning">warning</span>
<span badge="neutral">neutral</span>
<span badge="outline">outline</span>
<span badge="solid">solid</span>
<span badge="gradient">gradient</span>

Sizes

small default large

<span badge="primary" badge-size="sm">small</span>
<span badge="primary">default</span>
<span badge="primary" badge-size="lg">large</span>

Shapes

pill (default) rounded square

<span badge="primary">pill</span>
<span badge="primary" badge-shape="rounded">rounded</span>
<span badge="primary" badge-shape="square">square</span>

Dot indicators

Online

Offline

Active

<span badge="dot"></span> Online
<span badge="dot-danger"></span> Offline
<span badge="dot-success"></span> Active

In context

Nav items with badges

<a href="/inbox" style="display:flex;justify-content:space-between">
  Inbox <span badge="primary">12</span>
</a>