Stat
stable 1.3 kB<hk-stat>A metric tile with a count-up value, a delta whose tone follows its sign, and a slot for a sparkline.
#kpi#metric
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| label | string | '' | Metric name. |
| value | number | 0 | Current figure. |
| delta | number | null | null | Change versus the previous period; sign picks the tone. |
| prefix / suffix | string | '' | Units around the value — a currency symbol, ms, %. |
| decimals | number | 0 | Fraction digits. |
| countUp | boolean | true | Animates the value into view. |
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-stat-up | #059669 | Positive delta colour. |
| --hk-stat-down | #dc2626 | Negative delta colour. |
| --hk-stat-label | #64748b | Label colour. |
Accessibility
- The delta pairs an arrow glyph with its colour, so direction is not colour-only.
- The count-up is decorative: the final value is in the DOM from the start, so assistive tech never reads a partial number.
- A falling metric is not always bad — tone follows the sign, and can be inverted per stat.