Component · 22

Meter

A gauge for a value within a known range, such as disk space or a score. It is not about work that finishes: for that, use Progress. Announced as a meter. Built on Base UI.

Basic

Storage used

tsx

<Meter label="Storage used" value={72} showValue />

Another range and a unit

The fill follows the value's position between min and max.

Battery

tsx

<Meter
  label="Battery"
  value={0.18}
  min={0}
  max={1}
  showValue
  format={{ style: "percent" }}
  aria-valuetext="18 percent charged"
/>

Colour the fill

Colour should never be the only signal: keep the label and value visible.

Memory

tsx

<Meter
  label="Memory"
  value={91}
  showValue
  style={{ "--gu-meter-color": "var(--gu-danger)" }}
/>

Props

Prop	Type	Default	Description
value	number	required	The current value, within min and max.
min / max	number	0 / 100	The range. The fill is the value's position within it.
label	ReactNode	-	Visible name. Without it, pass aria-label.
showValue	boolean	false	Show the value beside the label.
format	Intl.NumberFormatOptions	-	How the value is written, e.g. a percentage or a unit.
locale	Intl.LocalesArgument	-	The locale used to format the value.
getAriaValueText	(formatted, value) => string	-	A friendlier spoken value, such as "72 of 100 GB used".
--gu-meter-color	CSS variable	var(--gu-accent)	Set it on the meter to colour the fill.