Meter

Meter shows a bounded quantitative value, typically without the temporal progress semantics of a progress bar.

Overview

Meter styling is split across the root measurement surface and the visible track fill, with threshold-based color changes applied at the root level.

Public CSS Variables

Cloud storage36 of 50 GB

Variable	Value	Affects
Bar thickness.`Meter`, `MeterTrack`		No visible change in this state
Current value.`MeterTrack`		No visible change in this state
Maximum range.`MeterTrack`		No visible change in this state
Current fill color.`MeterTrack`		No visible change in this state
Radius ratio of the bar.`Meter`		No visible change in this state
Fill thickness, defaults to the bar height.`MeterTrack`		No visible change in this state
Radius ratio of the fill.`MeterTrack`		No visible change in this state
Fill color when the value is in the worst range.`Meter`		No visible change in this state

Edit a value to try it in the demo. Hover a variable to outline what it changes; switch the preview state to see hover, pressed, focus, disabled and invalid variables. Click a name to copy it.

Part-Level Variables

Meter: root size, background surface, and threshold state mapping.
MeterTrack: fill width and visible measured color.

State And Variant Interaction

size changes bar height.
variant sets the base color family.
Threshold-derived data-state can override the track color to good, warn, or bad.

Examples

.compactMeter {
  --meter-height: 4px;
}

.customMeterStates {
  --meter-track-optimum-color: var(--color-green-500);
  --meter-track-suboptimum-color: var(--color-amber-500);
}

Do Not Override

Do not confuse meter styling with temporal progress semantics.
Do not rely on color alone to explain threshold meaning.
Do not remove enough contrast that the track becomes hard to read.