Meter

A meter shows the user the current progress on a scale.

Value

The progress of the Meter is controlled through the value prop.

<Meter label="Free minutes" value={25} />

<Meter label="Free minutes" value={25} />

<Meter
  label="Free minutes"
  value={25}
/>

Scale

By default, the scale is from 0 to 100. This scale can be changed via the minValue and maxValue props.

<Meter label="Free minutes" minValue={50} maxValue={2000} value={1500} />

<Meter
  label="Free minutes"
  minValue={50}
  maxValue={2000}
  value={1500}
/>

<Meter
  label="Free minutes"
  minValue={50}
  maxValue={2000}
  value={1500}
/>

Formatting

Values are formatted as percentages by default. You can change the number formatting through the formatOptions prop.

<Meter
  label="Currency"
  formatOptions={{ style: 'currency', currency: 'EUR' }}
  value={25}
/>

<Meter
  label="Currency"
  formatOptions={{ style: 'currency', currency: 'EUR' }}
  value={25}
/>

<Meter
  label="Currency"
  formatOptions={{
    style: 'currency',
    currency: 'EUR'
  }}
  value={25}
/>

Variants

The Meter component offers three different variants that set a distinctive color. The color conveys the meaning and severity of the meter.

<div>
  <Meter label="Free minutes" variant='positive' value={25} />
  <br />
  <Meter label="Free minutes" variant='warning' value={25} />
  <br />
  <Meter label="Free minutes" variant='critical' value={25} />
</div>

<div>
  <Meter
    label="Free minutes"
    variant="positive"
    value={25}
  />
  <br />
  <Meter
    label="Free minutes"
    variant="warning"
    value={25}
  />
  <br />
  <Meter
    label="Free minutes"
    variant="critical"
    value={25}
  />
</div>

<div>
  <Meter
    label="Free minutes"
    variant="positive"
    value={25}
  />
  <br />
  <Meter
    label="Free minutes"
    variant="warning"
    value={25}
  />
  <br />
  <Meter
    label="Free minutes"
    variant="critical"
    value={25}
  />
</div>

Value Label

The value label can be hidden through the showValueLabel prop. The label itself can be changed through the valueLabel prop.

<Meter
  label="Free minutes"
  valueLabel="54 of 60 Minutes"
  value={54 / 60 * 100}
/>

<Meter
  label="Free minutes"
  valueLabel="54 of 60 Minutes"
  value={54 / 60 * 100}
/>

<Meter
  label="Free minutes"
  valueLabel="54 of 60 Minutes"
  value={54 / 60 * 100}
/>

Accessibility

If the meter does not include a textual label, an aria-label or aria-labelledby prop need to be provided to support assistive technology such as screen readers.

In order to support internationalization, provide a localized string to the aria-label prop.

API