Badge from @prepared911/ui-core is a non-interactive status or category chip. The component renders readable text at accessible contrast; your job is to make the semantic meaning clear beyond color and provide an accessible name when the label alone is ambiguous.
What the component handles
- Contrast. Variant colors meet WCAG AA on the default surface.
- Non-interactive markup. Badges render as simple inline elements and are not focusable.
- Text that stands alone. Badges announce by their text. Avoid stripping the label to an icon unless you supply
aria-label.
- Icon-only names. When the badge has an icon and no children, set
aria-label to the localized state name ("Live", "Shared"). The component also surfaces that value in a tooltip for sighted users.
- Non-color severity cue. Pair color with wording or an icon so color-blind users receive the same message. See WCAG 2.1: Use of Color.
- Extra context where needed. When the badge's meaning depends on surrounding layout, add
aria-label to spell out the full context ("Connection status: Active").
- Badges render as inline text spans by default.
aria-label overrides the visible text only when strictly necessary; prefer explicit copy.
- Badges as counts. For numeric tallies on tabs or nav items, use
Counter—the semantics differ.
- Badges inside interactive controls. When a badge sits inside a button, ensure the button's accessible name includes the badge's meaning (via visible text or
aria-label).
