Badge
Compact label used to highlight status, category, or metadata. Non-interactive.
Variants
NeutralPrimarySuccessWarningError
Outline
NeutralPrimarySuccessWarningError
Dashed
DraftIn reviewProvisionalPendingBlocked
With dot
OfflineSyncingActiveDegradedIncident
Sizes
Extra smallSmallMediumLarge
Props
variant= 'neutral'
'neutral' | 'primary' | 'success' | 'warning' | 'error'
Semantic colour of the badge.
appearance= 'solid'
'solid' | 'outline' | 'dashed'
Visual style. Solid has a filled background; outline and dashed are transparent with a border.
size= 'md'
'xs' | 'sm' | 'md' | 'lg'
Controls text size and padding.
dot= false
boolean
Renders a small coloured dot before the label. Colour matches the variant.
children*
ReactNode
Badge label content.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'neutral' | 'primary' | 'success' | 'warning' | 'error' | 'neutral' | Semantic colour of the badge. |
| appearance | 'solid' | 'outline' | 'dashed' | 'solid' | Visual style. Solid has a filled background; outline and dashed are transparent with a border. |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'md' | Controls text size and padding. |
| dot | boolean | false | Renders a small coloured dot before the label. Colour matches the variant. |
| children* | ReactNode | — | Badge label content. |