Badge

Default Secondary Destructive Outline Ghost Link

<span class="badge">Default</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-destructive">Destructive</span>
<span class="badge badge-outline">Outline</span>
<span class="badge badge-ghost">Ghost</span>
<a class="badge badge-link" href="#badge">Link</a>

Usage

<span class="badge">Default</span>
<span class="badge badge-secondary">Secondary</span>

Variants

Default Secondary Destructive Outline Ghost Link

<span class="badge">Default</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-destructive">Destructive</span>
<span class="badge badge-outline">Outline</span>
<span class="badge badge-ghost">Ghost</span>
<a class="badge badge-link" href="#variants">Link</a>

Class	Use
`.badge`	Default, filled with the primary colour
`.badge-secondary`	Lower emphasis
`.badge-destructive`	Errors and danger states — a wash, not a solid fill
`.badge-outline`	Border only
`.badge-ghost`	No surface until hovered
`.badge-link`	Reads as a link; put it on an `<a>`

Only .badge-ghost and .badge-link react to the pointer on their own. The filled variants take a hover surface when the badge is an <a>, since a plain <span> is not something you can activate.

With Icon

Mark the icon with data-icon="inline-start" or data-icon="inline-end" so the padding tightens on that side. An svg child is sized to 12px automatically.

Deployed Failed Queued

<span class="badge badge-secondary">
  <svg data-icon="inline-start" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M20 6 9 17l-5-5"></path>
  </svg>
  Deployed
</span>

<span class="badge badge-destructive">
  <svg data-icon="inline-start" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M18 6 6 18M6 6l12 12"></path>
  </svg>
  Failed
</span>

<span class="badge badge-outline">
  Queued
  <svg data-icon="inline-end" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <circle cx="12" cy="12" r="10"></circle>
    <path d="M12 6v6l4 2"></path>
  </svg>
</span>

With Spinner

Deploying

<span class="badge badge-secondary">
  <svg class="spinner" data-icon="inline-start" style="width: 0.75rem; height: 0.75rem"
       aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M21 12a9 9 0 1 1-6.219-8.56"></path>
  </svg>
  Deploying
</span>

The badge’s text already says what is happening, so the spinner takes aria-hidden="true" rather than announcing itself a second time.

Link

Default Secondary Outline Link

<a class="badge" href="#link">Default</a>
<a class="badge badge-secondary" href="#link">Secondary</a>
<a class="badge badge-outline" href="#link">Outline</a>
<a class="badge badge-link" href="#link">Link</a>

An anchor keeps its own semantics — it navigates and is in the tab order. That is also what turns on the hover surface for the filled variants.

Custom Colors

The classes set colour last, so an inline style or a class of your own overrides them. Reach for light-dark() rather than one fixed pair — partialkit sets color-scheme on the root, so the function resolves to the theme in use without a media query or a second class.

Passing Warning Preview

<span class="badge"
      style="background-color: light-dark(oklch(0.92 0.06 150), oklch(0.30 0.06 150));
             color: light-dark(oklch(0.33 0.08 150), oklch(0.90 0.11 150))">
  Passing
</span>

<span class="badge"
      style="background-color: light-dark(oklch(0.94 0.07 85), oklch(0.32 0.06 70));
             color: light-dark(oklch(0.38 0.09 60), oklch(0.92 0.12 85))">
  Warning
</span>

<span class="badge badge-outline"
      style="border-color: light-dark(oklch(0.72 0.13 250), oklch(0.55 0.13 250));
             color: light-dark(oklch(0.40 0.16 260), oklch(0.85 0.10 250))">
  Preview
</span>

RTL

Set dir="rtl" on the page or on any subtree — padding, corners and positions follow the reading direction on their own. See the button page for a live example.

Accessibility

A badge is decorative markup: it has no role and is not focusable. When it carries state a user must know about, put that state in text as well, or give the badge an accessible name.

<span class="badge badge-destructive">
  <span class="sr-only">Build status:</span>
  Failed
</span>