Badge
Atombeta@macaw-ds/ui · since 0.1.0A short, non-interactive status label such as Paid, Overdue or Draft. Not a button, not a counter.
Contract
From the manifest's a11y block: what assistive technology sees, and every key the component handles.
- Role
- none (a span with text)
- Focusable
- No. Interactive children keep their own focus.
- Accessible name
- The text content. A badge has no role; it reads as part of the surrounding text.
- Notes
- Every tone pairing meets 4.5:1 for text in both themes.
- Colour reinforces the word; it never replaces it. "Overdue" in critical, not a red dot alone.
- Badges are not interactive. For a filter chip or a removable tag, a different component is needed (not in the system yet).
| Keys | Behaviour |
|---|---|
Not interactive; no keyboard handling. | |
Motion
This component does not animate or transition, so there is nothing to reduce.
Contrast
Computed at build time from the token values, against the background each colour is paired with.
| Token | On | Light | Dark |
|---|---|---|---|
| status.success-fg | status.success-bg | 9.23:1 AAA | 11.70:1 AAA |
| status.success-solid-fg | status.success-solid | 7.34:1 AAA | 7.56:1 AAA |
| status.warning-fg | status.warning-bg | 8.69:1 AAA | 11.91:1 AAA |
| status.critical-fg | status.critical-bg | 9.38:1 AAA | 11.09:1 AAA |
| status.info-fg | status.info-bg | 9.04:1 AAA | 11.54:1 AAA |
| status.neutral-fg | status.neutral-bg | 12.74:1 AAA | 14.20:1 AAA |
| status.accent-fg | status.accent-bg | 9.47:1 AAA | 11.54:1 AAA |