Metric tile
A metric tile shows one number in the metric role with its name, a status lozenge and quiet lines for the target and sample size.
With a status
Capture upload success rate
99.6%
On target
Show code
<KbMetricTile label="Capture upload success rate" value="99.6%" status={<KbLozenge tone="teal">On target</KbLozenge>} meta={["Target 99% or more", "412 captures"]} />When to use
- Use it for a handful of numbers a person reads at a glance: credits, rates, latencies.
- Put the unit in the value (99.6%, 1.2s). Put the target and sample size in meta.
- Show status as a lozenge with words, not a glyph or colour alone.
Credits left
1,240
Everything
1,240 / 2,000 / 760
Import
import { KbMetricTile } from "@/components/ui/KbMetricTile";
<KbMetricTile label="Credits left" value="1,240" meta={["Granted 2,000", "Spent 760"]} />Props
| Prop | Type | Default | What it does |
|---|---|---|---|
label | string | None | What is measured. |
value | ReactNode | None | The formatted number. |
status | ReactNode | None | A KbLozenge. |
meta | string[] | None | Quiet lines under the number. |
Keyboard and screen readers
- A group named by its label, so the number is announced with what it measures.
- Numbers use tabular figures so live values do not jitter.
- Status has words as well as a tone.