Meter

A meter represents a quantity within a known range, or a fractional value.

Storage25%

value

formatOptions

valueLabel

Example

Meter.tsx

Meter.css

import {Meter} from './Meter';

<Meter label="Storage" value={25} />

Value

By default, the value prop is a percentage between 0 and 100. Use the minValue, and maxValue props to set a custom value scale.

Data usage250 MB

minValue

maxValue

<Meter
  label="Data usage"
  maxValue={500}
  value={250}
  formatOptions={{style: "unit", unit: "megabyte"}} />