Meter

Meters are visual representations of a quantity or an achievement. Their progress is determined by user actions, rather than system actions.

Storage space

35%

label

value

variant

size

staticColor

labelPosition

formatOptions

valueLabel

import {Meter} from '@react-spectrum/s2/Meter';

<Meter label="Storage space" value={35} />

Value

By default, the value prop is a percentage between 0 and 100. Use the minValue, and maxValue props to set a custom value scale.

Progress

33%

minValue

maxValue

<Meter
  label="Progress"
  maxValue={150}
  value={50} />

Name	Type	Default
`value`	`number`	Default: `0`
The current value (controlled).
`valueLabel`	`ReactNode`	Default: —
The content to display as the value's label (e.g. 1 of 4).
`variant`	`'informative' \| 'positive' \| 'notice' \| 'negative'`	Default: `'informative'`
The visual style of the Meter.
`size`	`'S' \| 'M' \| 'L' \| 'XL'`	Default: `'M'`
The size of the Meter.
`staticColor`	`'white' \| 'black' \| 'auto'`	Default: —
The static color style to apply. Useful when the button appears over a color background.
`styles`	`StylesProp`	Default: —
Spectrum-defined styles, returned by the `style()` macro.

`formatOptions`	`Intl.NumberFormatOptions`	Default: `{ style: 'percent' }`
The display format of the value label.