All components
Data Display
Metric
beta
Since 1.1
KPI stat tile with a prominent value, trend-toned change caption, and optional sparkline.
Data Display
primitive
Display
Documented
import { Metric } from '@ivim/native/components';
When to use
Use when
Summarizing a single measure at the top of a dashboard or record.
Don't use when
You need a full chart with axes — use a chart component.
Example
Preview
Code
State Matrix
With sparkline
Adherence
92%
↑ +4%
Down trend
No-shows
3
↓ -1
No sparkline
Open tasks
12
→ +2
since yesterday
Guidelines
Do
Use semantic trend colors (success/error), kept separate from the brand accent.
Don't
Don't crowd a metric with more than one value + one change caption.
Accessibility
Roles and screen-reader behavior this component provides, plus keyboard interactions.
•
Label, value, and change read in order; the sparkline is decorative.
State coverage
Interaction and visual states this component supports.
base
semantic color
density
Token references
Semantic design tokens this component page exercises. Tap one to edit it live.
Related components
Components that solve adjacent problems or compose with this one.
Card
Grouped content container with lit elevated, outlined, muted, and density states.
Badge
Compact status or metadata label with six semantic tones plus seven non-semantic accent tones, four treatments, a pill or square shape, three sizes, dots, counts, adornments, and optional press and remove actions.