Axon 911 Frontend DocsAxon 911 Frontend Docs
Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Components
  3. Badge
  5. Accessibility

Badge

Accessibility

Badge from @prepared911/ui/badge 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.
What you must provide
  • 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").
Semantics and roles
  • Badges render as inline text spans by default.
  • aria-label overrides the visible text only when strictly necessary; prefer explicit copy.
Known caveats
  • 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).
Previous
Badge / API and Development
Next
Banner / Usage
On this page
What the component handles
What you must provide
Semantics and roles
Known caveats