Primitives
Meter
A measurement inside a range
Disk usage · 68%
Storage · 40%
Load · 92%
Reserved · 15%
Usage
import { Meter, Stack, Text } from "@gpuixui/primitives";
<Stack direction="column" gap="xs">
<Text role="caption" tone="muted">Disk usage · 68 of 100 GB</Text>
<Meter label="Disk usage" value={68} max={100} formatValue={(v) => `${v} GB`} />
</Stack>;API
| Prop | Type | Default | Consequence |
|---|---|---|---|
value | number | required | the measurement; clamped into the range |
min / max | number | 0 / 100 | the range the fill is a fraction of; a stored bound that is not a number is that default |
tone | primary | success | destructive | muted | "primary" | the fill's colour role; a stored name the table does not carry reads as primary |
size | "sm" | "md" | "md" | track height from spacing.xs / sm; a stored name the table does not carry reads as md |
label | string | none | accessible name, and MeterLabel's default text; a blank label is no name, and a caption child that says nothing falls back to it rather than painting a blank line |
formatValue | (value: number) => string | String | the announced and displayed measurement; a blank answer keeps the number |
children | ReactNode | the track | the parts to draw |
style | StyleDesc | — | merged last, on the root frame |
className | string | — | Tailwind classes, joined last on the root frame |
ref / aria-id / onLayout | host props | none | the root frame itself: the box a layout measures, the instance a caller holds, and the author id an automation host addresses |
testId | string | — | stable locator, on the root |
Edit this page on GitHubpackages/primitives/docs/meter.mdx