Meter
A value inside a known range, such as storage used, battery left or a score, colored by which part of the range it is in.JSX
<Meter
label="Battery"
low={20}
high={50}
optimum={100}
/>PropsOpen in Playground
size
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { Meter } from '@advui/core'
<Meter value={7.2} max={10} high={8} optimum={0} label="Storage" valueText="7.2 of 10 GB used" />Examples
Basic
Preview
Code
Storage7.2 of 10 GB
Colored by range
Preview
Code
Headphones82%
Keyboard41%
Mouse12%
API reference
Meter
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | The measured value, clamped between `min` and `max`. |
min | number | 0 | Lowest value. |
max | number | 100 | Highest value. |
low | number | — | Values below it are in the low range. |
high | number | — | Values above it are in the high range. |
optimum | number | — | The best value. Its range is `success`, the middle next to it `warning` and the far end `error`. Defaults to the middle of the range when `low` or `high` is given. |
tone | 'primary' | 'success' | 'warning' | 'error' | — | Fill color, in place of the one the ranges give. `primary` without ranges. |
label | string | — | Accessible name. |
valueText | string | — | What screen readers read for the value, such as “7.2 of 10 GB used”. Without it, web reads the number and iOS and Android the percentage. |
size | 'sm' | 'md' | 'lg' | 'md' | 4, 8 or 12px tall. |
Accessibility
role="meter"witharia-valuemin,aria-valuemaxandaria-valuenow;valueTextbecomesaria-valuetext.- Use Meter for a measurement and Progress for work that finishes: a meter is not read as busy or loading.
- Color is not the only sign of a bad value: give it in
valueTextor in visible text too.
Platform notes
iOS
Sends the percentage as its value when
valueText is not given.Android
TalkBack reads a value only as text, so the meter always sends
aria-valuetext: valueText, or the percentage.