Badge
Small status labels for updates, counts, state pills, and quick metadata throughout the interface.
API
All inputs and configuration options for zyra-badge.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'info' | 'success' | 'warning' | 'danger' | 'purple' | 'default' | Color and semantic meaning |
size | 'sm' | 'md' | 'lg' | 'md' | Physical size of the badge |
dot | boolean | false | Shows a live-indicator dot before the label |
ariaLabel | string | '' | Accessible label for screen readers when badge has no visible context |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Presentational by default — no role is needed unless used as a live indicator
- When used for live counts (e.g. notifications), add aria-live="polite" to the parent
- Dot mode does not convey meaning through color alone; pair with visible text