Badge

Examples

Each badge renders live from badges.css via the .badge class plus a variant modifier. Keep the label to a single word or a number.

<span class="badge badge--new">New</span>
<span class="badge badge--success"><span class="badge__dot"></span> Live</span>
<span class="badge badge--info">Beta</span>
<span class="badge badge--warning">Deprecated</span>
<span class="badge badge--neutral">12</span>

Usage

A badge is a quiet, inline marker. Reach for a Chip instead when you need a category pill.

• Use a badge for status, a count, or a flag, use a Chip for categories.
• Keep it to a single short word or a number; it is a marker, not a sentence.
• Use --new sparingly, it is the only filled, loud variant.
• Add a .badge__dot for live or status states to signal activity.

States

The badge is static: it has no hover, active, or disabled states. It only marks the element it labels, so there is no interaction to give feedback for.

Code

The .badge classes ship in badges.css. Add the stylesheet, then combine .badge with a variant modifier.

<link rel="stylesheet" href="/_shared/components/badges.css">

<span class="badge badge--new">New</span>
<span class="badge badge--success"><span class="badge__dot"></span> Live</span>
<span class="badge badge--info">Beta</span>
<span class="badge badge--warning">Deprecated</span>
<span class="badge badge--neutral">12</span>