Stat
One number, and what it means.
Why it exists
Twenty-five files across the suite render this tile, and the divergence is not cosmetic: Root's has a tone and a link, Echo's a link and no tone, Bloom's a delta and no link, Seed's neither, Hana's puts the label under the number. The label goes above — a column of tiles is read by scanning labels first, and a number with no label above it is one you have to look away from to identify.
A zero that is good, and a zero that is bad
tone is the reason to reach for this rather than a div. “0 awaiting approval” is fine; “0 deploys succeeded” is why you opened the page. Rendered the same, they read the same.
Direction is given, never inferred
A rising error rate and a rising delivery rate are the same arrow and opposite news. sentiment is the caller's call, because no component can tell which it is drawing. The arrow itself is a second signal beside the colour, so the direction still reads without it.
Numbers, formatted once
count() pins the locale, so a server in en-US and a browser in de-DE do not render 1,234 and 1.234 for the same number — a hydration mismatch on any page that prints a total. compact() shortens above a thousand and leaves shorter numbers alone, because “0.8k” is longer than “847” and less precise than it.
In both themes
light
dark
Guidance
Use it when
- The three or four numbers that answer “is anything wrong” at the top of a page.
- tone whenever a value can be good or bad news at the same magnitude.
- href when the number has a list behind it — a count you cannot drill into is a dead end.
Reach for something else when
- More than about six. A grid of tiles stops being a summary at that point and becomes a table.
- A number that only makes sense beside others — that is Table, where the column does the comparing.
- Computing the delta here. The component renders what it is given and formats nothing.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | What the number is. Rendered above it, and read first. |
| value | ReactNode | — | The number. |
| hint | ReactNode | — | A line under it — the denominator, the window, the caveat. |
| tone | "neutral" | "good" | "warn" | "bad" | "neutral" | Whether this value is good news. |
| delta | { label, direction, sentiment } | — | Change since the last period. Formatted by the caller. |
| href | string | — | Makes the whole tile a link. |
| as | ElementType | "a" | A framework link component — Next's <Link>. |