KpiCard
Dashboard stat tile with label, value, optional unit, sub-line, and trailing sparkline.
Props
KpiCard extends CardProps (omitting children).
| Prop | Type | Default | Description |
|---|---|---|---|
label | ReactNode | — | The metric name, shown above the value. |
value | ReactNode | — | The headline number or string. |
unit | ReactNode | — | Small unit label after the value (e.g. GB, %, ms). |
sub | ReactNode | — | Dim line under the value for context. |
subTone | "default" | "warn" | "default" | Turns the sub line amber when warn. |
spark | number[] | — | Trend series shown as a trailing sparkline. |
sparkColor | string | — | Override sparkline color. |
Examples
Basic KPI
Active users
1234
With spark line
With sub
CPU usage
64%
avg across 12 nodes
Sub tone warn
Failed jobs
7
3 above threshold
With unit
Storage
487GB
of 1 TB quota
import { KpiCard } from "@solarius/onset";
import type { KpiCardProps } from "@solarius/onset";