Stat
Displays a key metric with optional delta, trend direction and help text
Category: display · WCAG 2.2-AA · stat, kpi, metric, number
Props
| Prop | Type | Default | Description |
|---|---|---|---|
card | boolean | false | Wrap the tile in the same card chrome `@cascivo/charts`' `Kpi` ships (surface, border, radius, padding), so a `Stat` row and a `Kpi` row in one dashboard read as one system. Off by default: `Stat` is layout-only so it can sit inside a `Card` you control. |
label | string | — | What the metric measures |
value | string | number | — | The metric value |
delta | string | — | Change indicator rendered next to the trend arrow |
trend | 'up' | 'down' | 'flat' | flat | Direction of the trend indicator ('up' | 'down' | 'flat'). |
helpText | string | — | Fine print below the value (methodology, time range) |
visual | React.ReactNode | — | Trailing decorative visual, e.g. a Sparkline from the separate @cascivo/charts package (not exported from @cascivo/react), rendered below the value/delta/helpText |
Design tokens
--cascivo-color-text--cascivo-color-text-subtle--cascivo-color-text-muted--cascivo-color-success--cascivo-color-destructive
When to use
- 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
- Multiple comparable rows of data — use DataTable
- A non-numeric status label — use Badge or Status
How to build an accessible Stat in React →
Examples
Default
<Stat label="Components" value={106} />With trend
<Stat label="Bundle size" value="12.4 kB" delta="-1.2 kB" trend="up" />With help text
<Stat label="Axe violations" value={0} helpText="WCAG 2.1 AA, 4 app states" />With a trailing sparkline
Sparkline is from @cascivo/charts
<Stat label="Requests / min" value="1.2k" delta="+4.3%" trend="up" visual={<Sparkline data={requestsPerMinute} label="Requests per minute trend" />} />Related components
- Card — Stats commonly sit inside a Card tile on dashboards