Badge
A small chip that labels the state or the category of the thing it sits next to.
import from ~/components/ui/badge
Variants
variant="default"
Primary categorization: active, featured, selected.
variant="secondary"
Neutral weight: tags, counts, quiet metadata.
variant="destructive"
Failed, blocked, invalid. Action is required.
variant="outline"
The quietest option, safe on an unknown surface.
variant="success"
Resolved state: live, published, paid, complete.
variant="warning"
Pending, in review, expiring. Nothing has failed yet.
variant="info"
Non-blocking information: new, beta, a version tag.
Sizes
size
Two steps only. `xs` uppercases and tracks out for dense tables, sidebars and inline indicators.
Standalone status chip
status row
One badge per row states the state of the thing on that row. It is the whole meaning of the cell.
Inline in a sentence
The export ran at 02:00 and is currently Live. The replacement pipeline is still Draft and ships behind a Beta flag.
inline
A badge is an inline-flex span, so it sits in a line of text and keeps its baseline.
Rules
Do
Don't