Badge

Compact status label, tag, or metadata chip.

MDN: role="status"
Verified 
<div data-header>
  <div role="status">
    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
      <path fill="none" d="m16 7l1.912 3.667l4.088.506l-3 2.753l.6 4.074l-3.6-2.292L12.4 18l.6-4.074l-3-2.753l4.2-.506z">
      </path>
      <path fill="currentColor" d="M16 2A11.013 11.013 0 0 0 5 13a10.9 10.9 0 0 0 2.216 6.6s.3.395.349.452L16 30l8.439-9.953c.044-.053.345-.447.345-.447l.001-.003A10.9 10.9 0 0 0 27 13A11.013 11.013 0 0 0 16 2m3.6 16L16 15.709L12.4 18l.6-4.074l-3-2.753l4.2-.507L16 7l1.912 3.667l4.088.506l-3 2.753Z">
      </path>
    </svg>
    Verified
  </div>
</div>

Use role="status" for passive status text.

Badges can contain plain text, an icon, or a link.

Usage

A compact container using role="status".

  • svg — Icon. Optional icon element. Optional.
  • a — Link. Optional link element. Optional.
  • ::after — External Mark. External-link mark shown on linked badges. Optional.
  • text — Label. Badge text. Optional.
<div role="status">
  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
    <path fill="none" d="m16 7l1.912 3.667l4.088.506l-3 2.753l.6 4.074l-3.6-2.292L12.4 18l.6-4.074l-3-2.753l4.2-.506z">
    </path>
    <path fill="currentColor" d="M16 2A11.013 11.013 0 0 0 5 13a10.9 10.9 0 0 0 2.216 6.6s.3.395.349.452L16 30l8.439-9.953c.044-.053.345-.447.345-.447l.001-.003A10.9 10.9 0 0 0 27 13A11.013 11.013 0 0 0 16 2m3.6 16L16 15.709L12.4 18l.6-4.074l-3-2.753l4.2-.507L16 7l1.912 3.667l4.088.506l-3 2.753Z">
    </path>
  </svg>
  Verified
</div>

Examples

Variant

Use secondary for softer tags, destructive for negative state, outline for neutral chips, and ghost for minimal labels.

Default
Secondary
Destructive
Outline
Ghost
<div data-component="badge" data-dimension="variant">
  <div data-component="badge" data-example="variant" data-variant="default">
    <div role="status">
      Default
    </div>
  </div>
  <div data-component="badge" data-example="variant" data-variant="secondary">
    <div role="status" class="secondary">
      Secondary
    </div>
  </div>
  <div data-component="badge" data-example="variant" data-variant="destructive">
    <div role="status" class="destructive">
      Destructive
    </div>
  </div>
  <div data-component="badge" data-example="variant" data-variant="outline">
    <div role="status" class="outline">
      Outline
    </div>
  </div>
  <div data-component="badge" data-example="variant" data-variant="ghost">
    <div role="status" class="ghost">
      Ghost
    </div>
  </div>
</div>

Content

Badges can show text, an icon, or a link.

<div data-component="badge" data-dimension="content">
  <div data-component="badge" data-example="content" data-variant="text">
    <div role="status">
      Stable
    </div>
  </div>
  <div data-component="badge" data-example="content" data-variant="iconText">
    <div role="status">
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
        <path fill="none" d="m16 7l1.912 3.667l4.088.506l-3 2.753l.6 4.074l-3.6-2.292L12.4 18l.6-4.074l-3-2.753l4.2-.506z">
        </path>
        <path fill="currentColor" d="M16 2A11.013 11.013 0 0 0 5 13a10.9 10.9 0 0 0 2.216 6.6s.3.395.349.452L16 30l8.439-9.953c.044-.053.345-.447.345-.447l.001-.003A10.9 10.9 0 0 0 27 13A11.013 11.013 0 0 0 16 2m3.6 16L16 15.709L12.4 18l.6-4.074l-3-2.753l4.2-.507L16 7l1.912 3.667l4.088.506l-3 2.753Z">
        </path>
      </svg>
      Marked
    </div>
  </div>
  <div data-component="badge" data-example="content" data-variant="link">
    <div role="status" class="secondary">
      <a target="_blank" rel="noopener noreferrer" href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/status_role">
        MDN: role="status"
      </a>
    </div>
  </div>
</div>

Fit

Use the fit variant for compact counters and tight badges.

99+
<div data-component="badge" data-dimension="fit">
  <div data-component="badge" data-example="fit" data-variant="fit">
    <div role="status" class="fit outline">
      99+
    </div>
  </div>
</div>