When to use
Use to annotate an object with a short, stable status or type.
Loading…
Find components, patterns, tokens, and docs
Documentation
Badges encode status at a glance: environment, state, or category.
Use a short noun or adjective. Don't make badges the only way to understand status.
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.
<Badge
variant="secondary"
size="medium"
>
Stable
</Badge>