Primitives
Badge
Compact label for status, metadata, or counts. 8 tones, 3 sizes, optional dot.
Tones
NeutralPrimaryAccentSuccessWarningDangerInfoOutline
<Badge tone='primary'>Primary</Badge>
<Badge tone='success'>Success</Badge>
<Badge tone='warning'>Warning</Badge>
<Badge tone='danger'>Danger</Badge>With dot
LiveDraftUrgentBeta
<Badge tone='success' dot>Live</Badge>
<Badge tone='warning' dot>Draft</Badge>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| tone | 'neutral' | 'primary' | 'accent' | 'success' | 'warning' | 'danger' | 'info' | 'outline' | 'neutral' | Semantic color. |
| size | 'sm' | 'md' | 'lg' | 'md' | Height + font size. |
| dot | boolean | false | Shows a small leading dot. |