Badge

Compact label for counts, status, or category tags, with shared intents and variants.

  • Supports intent colors.
  • Solid by default. Use .soft or .outline for quieter emphasis.
  • Use .sm or .lg for compact density changes.
  • Can be used inline in headings.
  • Can be used as a count badge.
  • Can be used as a stable dot badge when empty and given an accessible name.
  • Empty badges render as dots. The element must be truly empty: no text and no whitespace.
Default Secondary Success Warning Danger Outline success Soft warning 
<span class="badge">Default</span>
<span class="badge secondary">Secondary</span>
<span class="badge success">Success</span>
<span class="badge warning">Warning</span>
<span class="badge danger">Danger</span>
<span class="badge success outline">Outline success</span>
<span class="badge warning soft">Soft warning</span>

In a title

New features New

<h2>New features <span class="badge success soft">New</span></h2>

Composed

<button type="button" class="btn ghost" aria-label="Notifications">
  <i class="ti ti-bell" aria-hidden="true"></i>
  <span class="badge danger" aria-label="12 unread notifications">12</span>
</button>

<button type="button" class="btn secondary soft" aria-label="Notifications">
  <i class="ti ti-bell" aria-hidden="true"></i>
  <span class="badge danger" aria-label="Errors!"></span>
</button>

Empty badge dot

<span class="badge success" aria-label="Online"></span>

Size variants

Small Success Regular Success Large Success 
<span class="badge success sm">Small Success</span>
<span class="badge success">Regular Success</span>
<span class="badge success lg">Large Success</span>

Removable tag pattern Use .badge soft for tag visuals. Add a direct dismiss button only when the tag can actually be removed. There is no separate chip component.

Design Design 
<span class="badge primary soft">
  Design
  <button type="button" aria-label="Remove Design">
    <i class="ti ti-x" aria-hidden="true"></i>
  </button>
</span>
<span class="badge primary soft">
  <button type="button" aria-label="Remove Design">
    <i class="ti ti-x" aria-hidden="true"></i>
  </button>
  Design
</span>