Badge
A small label used to highlight status, counts, or categories.
Colors
PrimarySecondarySuccessDangerWarningInfo
Sizes
SmallMedium
Variant (fill style)
variant controls the visual weight — pick subtle for low-emphasis status labels, solid for high-contrast emphasis, outline when the badge sits on a busy surface where solid would clash.
SolidSubtleOutline
Dot
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'solid' | 'subtle' | 'outline' | 'solid' | Visual fill weight — solid bg, subtle tint, or transparent with border |
color | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'primary' | Color scheme |
size | 'sm' | 'md' | 'md' | Size of the badge |
dot | boolean | false | Renders as a small colored dot with no text |
children | ReactNode | - | Badge content |
className | string | - | Additional CSS class |
style | CSSProperties | - | Inline styles |