StatusDot
React status dot chart — discrete state double-encoded by color and shape. Tiny accessible SVG microchart; RSC-safe static or /interactive.
StatusDot answers "what state is this thing in right now?". Every state pairs a distinct silhouette with a semantic color — filled circle, triangle, diamond, hollow ring, half-filled circle — so two states can never collapse 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
- Good for — service lists, inline state in a sentence, monitoring rows.
- Avoid for — quantities, trends, or vocabularies past ~6 states (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
Four homes
Why this default
Shape+color pairing beats a colored disc: the five silhouettes stay distinct in grayscale, print, and forced-colors,
where color-only status dots all become the same gray circle. An unknown status key renders the off ring with a dev
warning — never a plausible-looking wrong state.
Accessibility
The accessible name is the state's label — "Status: ok." — composed with your title ("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.
Related charts
TrendArrow
React trend arrow chart — direction and magnitude of change as a compact arrow. Tiny accessible SVG microchart; RSC-safe static or /interactive.
HeatCell
React heat cell chart — one intensity cell for a table cell or matrix slot. Tiny accessible SVG microchart; RSC-safe static or /interactive.