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.
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).