Prepared Docs

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

When to use

Enumerations operators scan horizontally ("Open", "Closed", "Training").
Soft metadata emphasis that doesn't warrant a Pill or Callout.
Icon + text pairings when a glyph reinforces a universally understood concept.

When not to use

Interactive filters operators remove—use Pill with dismiss semantics.
Long sentences—badges truncate poorly. Use Callout 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

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.

Pill for removable tags.
Status dot for ultra-compact state.
Data list for structured label–value layouts using badge kinds.

Avatar / Accessibility

Badge / API and Development

Overview

Closed

When to use

Enumerations operators scan horizontally ("Open", "Closed", "Training").
Soft metadata emphasis that doesn't warrant a Pill or Callout.
Icon + text pairings when a glyph reinforces a universally understood concept.

When not to use

Interactive filters operators remove—use Pill with dismiss semantics.
Long sentences—badges truncate poorly. Use Callout 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

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.

Pill for removable tags.
Status dot for ultra-compact state.
Data list for structured label–value layouts using badge kinds.

Avatar / Accessibility

Badge / API and Development