Stat Cell
Data · StatCell
A KPI with its comparison: label, value, ▲/▼ delta that names what it compares to, optional sparkline.
Props: label, value, delta (percent, signed), deltaText (override), compare ("vs last Friday"), invert (down is good: refunds, failures, cost), spark (numbers), icon + iconTint, tint.
- Use 3–5 in a row, only when those numbers are the point of the screen.
- Always say what the delta compares to; good is mint, bad is blush, decided by
invert.
Revenue today
€0
12.4% vs last Friday
Orders
0
4.1% vs last Friday
Refund rate
0.0%
0.4% vs last week
Failed orders
0
40% vs yesterday
Props
StatCell
| Prop | Type | Notes |
|---|---|---|
label | ReactNode | Required |
value | ReactNode | Required |
delta? | number | |
deltaText? | string | |
compare? | string | |
invert? | boolean | |
spark? | number[] | |
icon? | IconName | |
iconTint? | Tint | |
tint? | Tint | |
className? | string | Extra class on the root element. |
style? | CSSProperties | Inline style on the root element. |