StatusDot
StatusDot marks one discrete state with a paired shape and color, from a five-state default vocabulary.
- encodes
- paired glyph shape + semantic color
- precision
- n/a — categorical
- nodes
- ≤ 2 (mark + optional pulse halo)
StatusDot prints one mark for one state: a filled circle for ok, a triangle for warn, a diamond for error, a
hollow ring for off, a half-filled circle for busy. Every state pairs a distinct silhouette with a semantic color,
so the five stay distinct in grayscale, in print, and in forced-colors, where color-only dots all render as the same
gray circle. That pairing is also what keeps two states from collapsing into the same mark for the 1-in-12 colorblind
readers a colored disc fails.
Install
import { StatusDot } from "@microcharts/react/status-dot";<StatusDot status="ok" title="API" />Try it
When to use it
Use it for service lists, inline state in a sentence, and monitoring rows. It carries no quantity and no trend, and past ~6 states the marks stop being memorable.
The state contract
| status | glyph | token |
|---|---|---|
ok | filled circle | --mc-positive |
warn | triangle | --mc-cat-1 |
error | diamond | --mc-negative |
off | hollow ring | --mc-neutral |
busy | half-filled circle | --mc-accent |
The pairing is a contract: color recolors a state but never reshapes it, and a theme must never let two states share a
silhouette.
Sizing
Variants
Edge cases
An unknown status key renders the off ring and logs a dev warning, so a typo never renders as a plausible-looking
wrong state.
Four homes
Accessibility
The accessible name is the state's label, "Status: ok.", composed with your title to read "API. Status: ok.". The
interactive entry announces state changes through a polite live region and stays quiet on mount. pulse is a CSS halo
that disappears entirely under prefers-reduced-motion.
This chart is a single unit, so there is nothing to rove between: a click, tap, Enter or Space selects it
and fires onSelect, and no selection stays pinned. That is the scalar half of the shared
interaction contract.
Props
| Prop | Type | Notes |
|---|---|---|
| status* | string | Built-in ok | warn | error | off | busy, or a key of states. |
| pulse | boolean | Live-now halo (reduced-motion-gated). |
| states | Record<string, { glyph; token; label }> | Extend the vocabulary; the shape+color pairing is preserved. |
| color | string | Recolors the active state; never reshapes it. |
| animate | boolean | interactiveOpt-in entrance motion when the chart mounts client-side — add import "@microcharts/react/motion" once. Inert on the server, on hydrated server HTML, and under prefers-reduced-motion. |
Plus the shared grammar — data, domain, color, title, summary, format — and the layout props (width, height, className, style) that every chart accepts. Interactive entries also share animate and live, and — wherever a chart has more than one navigable unit — onActive, onSelect, selectedIndex and defaultSelectedIndex; and — wherever the chart shows a hover value — readout. See the shared grammar.