Meter

A graphical display of a numeric value within a range. The indicator fills with the accent on a fully round track. Label and value are Regular.

Storage Used24%

Anatomy

<UiMeterRoot :value="24">
  <UiMeterLabel>Storage Used</UiMeterLabel>
  <UiMeterValue />
  <UiMeterTrack>
    <UiMeterIndicator />
  </UiMeterTrack>
</UiMeterRoot>

Parts

Root — role="meter" with aria-valuenow / min / max. value is required. min defaults to 0, max to 100.
Label — names the meter.
Value — formatted reading. Defaults to a percent of the range. Pass format for Intl.NumberFormat.
Track — the full range.
Indicator — fills the track. Width is a percent, with a short CSS transition.