Usage
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.
text and BadgeIntent.Token. A badge becomes pill-shaped when it has onClick, href, or onDismiss, or when it is a static solid chip with shape={BadgeShape.Pill} (call-taking queue and event labels).Banner or body text.Button.Small in dense tables; Regular default; Large sparingly for focal indicators.Error, Warning, Success, and Info for meaningful operational states; Default and accent variants for neutral tagging.BadgeShape.Default uses size corner radii. BadgeShape.Pill with BadgeAppearance.Solid is the full-radius call-taking pill (for example non-emergency codes and yellow event labels). Queue-blue fills still depend on a Chroma token; use BadgeIntent.Informative solid until queue-blue-solid ships.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.status while waiting, then status={{ kind: BadgeStatusKind.Complete }} with statusPlacement={BadgeStatusPlacement.Corner} when found. Brighter glyph on found is intent, not status.formatMessage; parallel phrasing within a column.aria-label that names the state ("Live", "Shared"). That label doubles as the tooltip content.Success for informational labels that aren't positive outcomes.