Meter
A meter shows a value against a known maximum.
When to use
- A value inside a known range, such as storage used against storage bought, or seats filled against seats available.
- A current measurement that will not change by itself.
When not to use
- Work in progress that will finish. Use a progress bar.
- A value with no maximum. The fill means nothing without one, so show the number instead.
- A rating or a score out of five. Those read better as text or stars.
Guidance
Do
Storage used44 of 50 GB
Change the appearance when the value crosses a threshold that should change what someone does.
Don't
Storage used6 of 50 GB
Do not colour a meter for emphasis. Showing critical at six of fifty suggests a problem that does not exist.
Intensity
How much attention each of this component's grounds uses, scored against the ladder in both themes.
| Appearance | Ground | Light | Dark |
|---|---|---|---|
| meter | brand-bold | 0.460Marked | 0.598Marked |
| meter | neutral | 0.042Ambient | 0.066Substrate |
| meter--caution | yellow-bold | 0.354Marked | 0.619Marked |
| meter--critical | danger-bold | 0.443Marked | 0.617Marked |
| meter--success | green-bold | 0.454Marked | 0.691Marked |
Substrate, Ambient and Marked are measured. Directed depends on what else is in the region. Demanded is declared, and its use is limited. So neither of those two depends on the component alone. See intensity.
Content
What to write, and what to leave out.
- Name the quantity, not the widget. Storage used, not Storage meter.
- Include the unit when the number needs one. Forty on its own is unclear.
- Keep the label short enough to sit on one line beside the value.