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 |
Tokens
CSS custom properties zyra-badge reads at runtime — override any of these in your own stylesheet after @use 'zyra-ng-ui'; to restyle it without touching the component itself.
| Token | Default points to | Description |
|---|---|---|
Default background--zyra-color-badge-default-bg | var(--zyra-color-surface-inset) | Fill color of the default (neutral) variant. |
Default text--zyra-color-badge-default-text | var(--zyra-color-foreground-muted) | Label color of the default variant. |
Default border--zyra-color-badge-default-border | var(--zyra-color-border-color) | Border color of the default variant. |
Success background--zyra-color-badge-success-bg | var(--zyra-color-success-subtle) | Fill color of the success variant. |
Success text--zyra-color-badge-success-text | var(--zyra-color-success-foreground) | Label and dot color of the success variant. |
Success border--zyra-color-badge-success-border | var(--zyra-color-success-border-color) | Border color of the success variant. |
Warning background--zyra-color-badge-warning-bg | var(--zyra-color-warning-subtle) | Fill color of the warning variant. |
Warning text--zyra-color-badge-warning-text | var(--zyra-color-warning-foreground) | Label and dot color of the warning variant. |
Warning border--zyra-color-badge-warning-border | var(--zyra-color-warning-border-color) | Border color of the warning variant. |
Danger background--zyra-color-badge-danger-bg | var(--zyra-color-danger-subtle) | Fill color of the danger variant. |
Danger text--zyra-color-badge-danger-text | var(--zyra-color-danger-foreground) | Label and dot color of the danger variant. |
Danger border--zyra-color-badge-danger-border | var(--zyra-color-danger-border-color) | Border color of the danger variant. |
Info background--zyra-color-badge-info-bg | var(--zyra-color-info-subtle) | Fill color of the info variant. |
Info text--zyra-color-badge-info-text | var(--zyra-color-info-foreground) | Label and dot color of the info variant. |
Info border--zyra-color-badge-info-border | var(--zyra-color-info-border-color) | Border color of the info variant. |
Purple background--zyra-color-badge-purple-bg | var(--zyra-color-purple-subtle) | Fill color of the purple variant. |
Purple text--zyra-color-badge-purple-text | var(--zyra-color-purple-foreground) | Label and dot color of the purple variant. |
Purple border--zyra-color-badge-purple-border | var(--zyra-color-purple-border-color) | Border color of the purple variant. |
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