Example
Props
Value
Meters are controlled with the value prop. By default, the value prop represents the current percentage of progress, as the minimum and maxiumum values default to 0 and 100, respectively.
Min/Max
Alternatively, a different scale can be used by setting the minValue and maxValue props.
Formatting
Values are formatted as a percentage by default, but this can be modified by using the formatOptions prop to specify a different format. formatOptions is compatible with the option parameter of Intl.NumberFormat and is applied based on the current locale.
Tone
Use tones to add additional semantic meaning to the value value as it progresses over time.
Used to represent a neutral or non-semantic value, e.g. the number of sections completed.
Positive
Used to represent a positive semantic value, e.g. when there’s a lot of space remaining.
Caution
Used to warn users about a situation that may need to be addressed soon, e.g. when space remaining is becoming limited.
Critical
Used to warn users about a critical situation that needs their urgent attention, e.g. when space remaining is becoming very limited.
Labelling
By default, the value label is formatted as a percentage, but can be customised with the valueLabel and formatOptions props.