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

Badge

Usage

Overview
Badge surfaces concise status, counts, and categories beside titles, in table cells, or on map markers. Semantic colors communicate operational states operators must interpret quickly, so decorative accents should not hijack error or success hues. Dispatch uses badges widely in queue columns and incident rows; the rule that makes them work is vocabulary discipline—the same word means the same thing across modules.
Closed
Lime, Cyan, Purple, Violet, Pink, and AI have no BadgeIntent. This demo shows Neutral, Informative, Success, Warning, and Destructive.
Reset zoom to 100%
When to use
  • Enumerations operators scan horizontally ("Open", "Closed", "Training").
  • Soft metadata that is not a status. Use text and BadgeIntent.
  • Icon + text pairings when a glyph reinforces a universally understood concept.
When not to use
  • A chat token the operator removes. That is Token. A badge becomes pill-shaped when it has onClick, href, or onDismiss.
  • Long sentences—badges truncate poorly. Use Banner or body text.
  • Primary page actions—use Button.
Variants
  • Size. Small in dense tables; Regular default; Large sparingly for focal indicators.
  • Color. Reserve Error, Warning, Success, and Info for meaningful operational states; Default and accent variants for neutral tagging.
  • Icon only. When icon is set with no children, the badge is square. Pair with aria-label so meaning is not color- or glyph-only; the component shows that value in a tooltip on hover.
Content guidelines
  • One to three words; localize via formatMessage; parallel phrasing within a column.
  • Don't encode entire policies in a badge. Link to a detail pane when the label is only a handle.
  • Icon-only badges need an aria-label that names the state ("Live", "Shared"). That label doubles as the tooltip content.
Best practices
Do
  • Align badge vocabulary across dispatch modules.
  • Pair color with text. Color is never the only signal.
  • Keep icon-only badges square by omitting children (do not hide text with visually-hidden nodes inside the badge).
Don't
  • Flood a row with many badges. Prioritize the top one or two states.
  • Use Success for informational labels that aren't positive outcomes.
Accessibility
Contrast for text and icons on tinted backgrounds holds in both themes; screen readers hear the full label, not only the color name. See Accessibility for the full contract.
Related Components
  • Banner for a status strip.
  • Status dot for ultra-compact state.
  • Data list for structured label–value layouts using badge kinds.
Previous
Avatar / Accessibility
Next
Badge / API and Development
On this page
Overview
When to use
When not to use
Variants
Content guidelines
Best practices
Accessibility
Related Components