How to build an accessible Stat in React
Presentational by role; the label-value pairing is real text so the metric and its meaning are read in order, and trend direction is conveyed by text/glyph, not color alone
When to use a Stat
- Highlighting a single key metric with a clear label
- Showing change over time with a delta and trend direction
- Annotating a metric with methodology or time-range help text
When not to use it
- Multiple comparable rows of data — use DataTable
- A non-numeric status label — use Badge or Status
Accessibility
Role none, verified at WCAG 2.2-AA.
Common mistakes
Avoid: A grid of Stats used to fake a data table
Prefer: DataTable when the values are rows to compare and sort
Stat optimizes for one headline number, not tabular comparison
Example
<Stat label="Components" value={106} />