Badge

A badge is a small label attached to a piece of content. Use one when you need to call attention to category, status, count, or a tag value without the weight of a button.

Badges share the button's variant vocabulary so the two compose visually. A primary badge on a primary button reads as a coherent system rather than two separate decisions.

Variants

export default function BadgeVariants() {  return (    <div className="flex flex-wrap items-center gap-2">      <span className="badge">Category</span>      <span className="badge badge-primary">New</span>      <span className="badge badge-muted">Draft</span>      <span className="badge badge-ghost">Inline</span>      <a className="badge badge-link" href="#">        Posts      </a>    </div>  );}

Icon-only

The badge-minimal modifier makes a square icon-only badge. Useful for dots, status indicators, or kebab-menu triggers.

export default function BadgeMinimal() {  return (    <span className="badge badge-minimal" aria-label="More actions">      <span className="badge-icon">        <svg          xmlns="http://www.w3.org/2000/svg"          width="14"          height="14"          viewBox="0 0 24 24"          fill="none"          stroke="currentColor"          strokeWidth="2"          strokeLinecap="round"          strokeLinejoin="round"        >          <circle cx="12" cy="12" r="1" />          <circle cx="12" cy="5" r="1" />          <circle cx="12" cy="19" r="1" />        </svg>      </span>    </span>  );}

Anatomy

<span class="badge">
  <span class="badge-icon"><!-- optional leading icon --></span>
  <span class="badge-label">Label</span>
  <span class="badge-icon"><!-- optional trailing icon --></span>
</span>

Tokens

Override --radius-badge to swap the default capsule shape for square chips (--radius-sm) or matched-to-button corners (--radius-md). See Foundations → Radius.

States

Static badges don't carry interactive states. Clickable badges (root is <a> or <button>, often with badge-link) inherit the same hover, active, and focus-visible behavior as button.

Accessibility

• Static badges (decorative labels) don't need ARIA. Use plain <span>.
• Clickable badges should be <a> (navigation) or <button> (action). Apply badge-link for the visual treatment.
• A badge that conveys live status (e.g., "Live now") should sit inside a region with aria-live="polite" if it changes dynamically.
• Color alone shouldn't carry meaning. Pair color with an icon or label for success/warning/error badges.
• For badge-minimal, set aria-label on the root.

Cross-platform

Where to next