Statistic Composition
The tinted metric tile every dashboard on the reference board repeats. A Surface, a label, a value, an optional delta, and room for a Widget.
Usage
Total balance
120,456.50
+2.4%Expenses
1,124.10
-8.1%Open tickets
34
0%Unchanged this week
Task progress
84%
<Statisticlabel="Total balance"value="120,456.50"delta={{ value: '+2.4%', direction: 'up' }}hue="violet"/>Delta direction
Direction decides the colour, not the caller — so a falling cost and a falling revenue are never accidentally coloured to mean opposite things by two different authors.
Do
Pass direction and let the card colour it, then use caption when down is actually good news.
Don't
Colour the delta yourself to 'fix' a case — that is how two dashboards end up disagreeing about what green means.
Loading
{loading ? <Statistic.Skeleton withVisual /> : <Statistic {...stat} />}The Skeleton is built from the card's own surface, radius, and padding tokens — a test asserts they match, so the tile cannot change size when the data arrives.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| label | string | — | What is measured. Kept small and muted. |
| value | ReactNode | — | The number. Rendered with tabular numerals. |
| delta | { value: string; direction: 'up' | 'down' | 'flat' } | — | Change since the comparison period. |
| caption | string | — | One line under the value — the place for context the number lacks. |
| hue | DecorHue | — | Decorative tint. Use it to tell tiles apart, not to signal status. |
| icon | ReactNode | — | Small icon in the top-right corner. |
| visual | ReactNode | — | A Widget beside the value — ring, sparkline, mini bars. |