Stat
One number, its name, and how it moved.
Loading documentation…
Powered by heyo
The value is the only large type in the component and the only thing at full contrast. A stat where the label competes with the number is a stat nobody reads at a glance.
delta is a number, not a string: -4.2 renders as "−4.2%" and the sign
picks the colour. deltaGood={false} flips that mapping — for latency, error
rate or spend, where up is exactly what you did not want.
bordered adds the hairline and the surface. It is off by default so a stat
can sit inside a Card without drawing a second box.
chart is the slot under the numbers — a sparkline, a
Meter, a StatusBar.
Stat.Group separates stats with hairlines rather than gaps — the dashboard
header pattern. Dividers instead of cards, so the row reads as one band.
It answers "what is it now, and which way is it going". For the shape over
time, put a sparkline in chart.
What the number is.
The number itself — the only large type in the component.
A unit or qualifier printed after the value, smaller and muted.
Change against the previous period, as a number. The sign decides the colour.
Whether a rise is good. It defaults to true; pass false for latency,
errors or spend.
The suffix on the delta. It defaults to "%".
What the delta is measured against, for example "vs last week".
A small glyph beside the label.
The slot under the numbers.
Adds the hairline and surface. Off by default.
Columns on a wide screen. It defaults to 3.