Badge
Compact inline labels for status, count, or category. Five colors, four variants, optional dot indicator.
Installation
Variants
Soft (default)
Subtle tinted background for tags and categories.
PrimarySuccessWarningDangerNeutral
Solid
Filled background for high-contrast labels.
NewVerifiedError
Outline
Border-only style for minimal footprint.
DraftActive
With dot indicator
Small status dot before the label.
OnlineOffline
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'solid'|'outline'|'soft'|'flat' | 'soft' | Visual style. |
| color | 'primary'|'success'|'warning'|'danger'|'neutral' | 'primary' | Color scheme. |
| size | 'sm'|'md'|'lg' | 'md' | Controls padding and font size. |
| dot | boolean | false | Renders a small colored dot before the label. |