Badge
Compact status labels for tags, counts, and inline metadata. Pick a variant and palette, then drop the badge alongside other UI without extra setup.
At a glance
NewBetaDraftMuted
Playground
Controls
Preview
Release 2.3.0Activeready for rollout
Codehtml
<span>Release 2.3.0</span>
<span class="badge-solid/primary">Active</span>
<span>ready for rollout</span>
Badge
component
Applies compact pill styling using the selected variant and tone palette.
Pattern
badge-{variant}[/{palette}]
Variant
solid/soft/outline/ghost
Palette
primary/secondary/accent/surface/success/danger/disabled/default:inherited
Solid
PrimarySecondaryAccentSurface
Codehtml
<span class="badge-solid/primary">Primary</span>
<span class="badge-solid/secondary">Secondary</span>
<span class="badge-solid/accent">Accent</span>
<span class="badge-solid/surface">Surface</span>
Soft
PrimarySecondaryAccentSurface
Codehtml
<span class="badge-soft/primary">Primary</span>
<span class="badge-soft/secondary">Secondary</span>
<span class="badge-soft/accent">Accent</span>
<span class="badge-soft/surface">Surface</span>
Outline
PrimarySecondaryAccentSurface
Codehtml
<span class="badge-outline/primary">Primary</span>
<span class="badge-outline/secondary">Secondary</span>
<span class="badge-outline/accent">Accent</span>
<span class="badge-outline/surface">Surface</span>
Ghost
PrimarySecondaryAccentSurface
Codehtml
<span class="badge-ghost/primary">Primary</span>
<span class="badge-ghost/secondary">Secondary</span>
<span class="badge-ghost/accent">Accent</span>
<span class="badge-ghost/surface">Surface</span>
API Reference
Classes
componentbadge-{variant}[/{palette}]
component
Applies compact pill styling using the selected variant and tone palette.
Variant
solid/soft/outline/ghost
Paletteprimary/secondary/accent/surface/success/danger/disabled/default:inherited