When to use
Use to annotate an object with a short, stable status or type.
Loading…
Find components, patterns, tokens, and docs
Component
Compact status or category label that can be scanned in a list.
Preview
<Badge
variant="secondary"
size="medium"
>
Stable
</Badge>Appearance is not enough. This is the contract for when the control earns a place in the product.
Use to annotate an object with a short, stable status or type.
Don't use a badge as a button. Don't use it for long sentences.
Lets status travel with the object in lists, headers, and cards.
Don't rely on color alone. Pill shapes are often below recommended touch size — don't make them clickable without padding.