Meter
data-displayVisual meter bar with range-based color coding (low/medium/high/overflow). Token-driven colors, sizing, and thresholds. ARIA meter role.
Import
typescript
import { Meter } from "packages/ui/src";Props
MeterProps
| Prop | Type | Required |
|---|---|---|
value | number | Yes |
min | number | No |
max | number | No |
low | number | No |
high | number | No |
label | string | No |
showValue | boolean | No |
Examples
Meter
Visual meter bar with range-based color coding for displaying measurable values.
Range Colors
Low (red)15/100
Medium (amber)50/100
High (green)85/100
Storage Usage
Documents2/10
Media7/10
Backups9/10