Badge
Status pills — tinted backgrounds with matching borders, never solid fills. Status colors carry meaning, not decoration.
Variants
DraftBetaActivePendingFailed
In context
marketing-site
ProductionAlso: Kbd and Separator
Press ⌘ K to search
esc to close
Usage
<Badge variant="success">Active</Badge>
<Kbd>⌘</Kbd><Kbd>K</Kbd>
<Separator orientation="vertical" />