Badge

CSS onlyNo JavaScript

Badges are small, soft-colored pills for status and counts. Each variant is a single class built on the semantic status tokens.

Badges

Open ↗

<div class="flex flex-wrap items-center gap-3">
  <span class="badge-primary">Primary</span>
  <span class="badge-positive">Active</span>
  <span class="badge-negative">Overdue</span>
  <span class="badge-warning">Pending</span>
</div>

<div class="mt-4 flex flex-wrap items-center gap-3">
  <span class="badge-positive">
    <span data-format="number" data-format-as="intK">1240</span>
    active
  </span>

  <span class="badge-warning">3 pending approvals</span>
</div>

Variants

Class	Use
`badge-primary`	Neutral / brand emphasis
`badge-positive`	Success, active, paid
`badge-negative`	Error, overdue, failed
`badge-warning`	Pending, needs attention

Content

A badge is a flex row with a small gap, so an icon or a formatted number sits neatly beside the label:

<span class="badge-positive">
  <span data-format="number" data-format-as="intK">1240</span>
  active
</span>