Meter
A meter shows a reading inside a known range, such as a friction score or a confidence, with its value in words beside it.
Tones and compact
Confidence86%
Show code
<KbMeter label="Confidence" value={86} tone="teal" valueText="86%" />Friction score72 of 100, high
Show code
<KbMeter label="Friction score" value={72} tone="ruby" valueText="72 of 100, high" />Funnel share30%
Show code
<KbMeter compact label="Funnel share" value={30} valueText="30%" />When to use
- Use it instead of a bar sized with inline width and colour.
- Pick the tone from the meaning of the value, and say that meaning in valueText.
- Use progress for a task that is getting done.
Friction score72 of 100, high
Score
Import
import { KbMeter } from "@/components/ui/KbMeter";
<KbMeter label="Friction score" value={72} tone="ruby" valueText="72 of 100, high" />Props
| Prop | Type | Default | What it does |
|---|---|---|---|
label | string | None | What is measured. |
value, min, max | number | None | The reading and its range. |
valueText | string | None | The readout; defaults to a percentage. |
tone | KbTone | None | Fill colour. |
compact | boolean | None | Inline in a table cell; the name stays for screen readers. |
Keyboard and screen readers
- role=meter with name, range and aria-valuetext.
- The fill is 3:1 against the track; the value is also printed.