Badge
Inline label for status, category, or count. Five variants, three sizes.
Example
NeutralInfoSuccessWarningDangerCustom
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
variant | 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'neutral' | No | Color variant |
size | 'sm' | 'md' | 'lg' | 'md' | No | Badge size |
live | boolean | false | No | Announces content changes to screen readers via aria-live |
Accessibility
- Uses <span> with appropriate role when needed
- aria-live="polite" when live prop is true
Related Tokens
--badge-neutral--badge-info--badge-success--badge-warning--badge-danger