Feedback
Stat
A KPI tile: a label, a measured number, and an optional trend delta. Two sizes, a decorative accent, a status tone that overrides it, and tabular figures for a number that moves.
Basic
MRR
$12,840
Customers
284
Signups
42
Errors
3
With trend deltas
MRR
$12,840
Churn
2.4%
Visits
48,201
Size
md is a tile of its own. sm is the dense step, for a strip of figures above
a table or inside a card that already has a heading.
Requests
48,201
Requests
48,201
Tone
accent is the decorative vocabulary and has no warn or danger, so a figure that is
over its quota could only be said in prose beside the number. tone is the status the
figure reports, and it wins over accent wherever both are set. Only the canonical
spellings are accepted here: neutral, brand, success, warn and danger.
Storage
41%
API quota
88%
Failed jobs
17
Tabular figures
A proportional 1 is narrower than a proportional 0, so a counter that ticks changes width on
nearly every update and shoves whatever sits beside it sideways. mono puts every digit
on the same advance. Both tiles below are fed the same number once a second. Only the left one holds
still.
Requests
1,000
Requests
1,000
API
| Prop | Type | Default | Description |
|---|---|---|---|
label required | string | no default | Uppercase label above the value. |
value required | string | number | no default | The measured figure, already formatted. |
sub | string | no default | Faint secondary text below the value. |
trend | 'up' | 'down' | 'flat' | no default | Trend direction. Controls the arrow and its color. |
change | string | no default | Trend text. Renders only when trend is set as well. |
accent | 'brand' | 'violet' | 'success' | 'neutral' | 'brand' | The decorative color of the value. Ignored when tone is set. |
tone | 'neutral' | 'brand' | 'success' | 'warn' | 'danger' | no default | The status the figure reports. Wins over accent. Its type is StatusTone. |
size | 'sm' | 'md' | 'md' | 'sm' for a dense row of figures, 'md' for a tile of its own. |
mono | boolean | false | Tabular figures, so a value that changes does not change width. |
class | string | no default | Extra classes on the wrapper. |