Skip to main content

Function: Meter()

Meter(__namedParameters): Element

Defined in: components/Meter/Meter.tsx:103

A semantic meter built on React Aria's Meter — a static quantity within a known range (role="meter").

Reads from vars.colors.feedback.{primary|positive|caution|negative} and uses vars.radii.control for the track. Unlike ProgressBar (which communicates an operation in progress and supports an indeterminate mode), Meter displays a fixed measurement the user reads — battery, disk usage, rate limit remaining. Pick Meter when the number is a state, ProgressBar when it is a task advancing.

Provide an accessible name via aria-label (or aria-labelledby) — the visible label is display text and does not itself name the meter.

Parameters

ParameterType
__namedParametersMeterProps

Returns

Element

Example

<Meter aria-label="Storage" label="Storage used" value={82} evaluation="caution" />
<Meter aria-label="Battery" value={12} evaluation="negative" />