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 measurement that is true right now and is not going anywhere on its own.
When not to use
- Work that is running and will finish. That is a progress bar, which describes a process rather than a quantity.
- A value with no ceiling. Without a maximum the fill is meaningless, 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. Critical at six of fifty says there is a problem when there is not.
Intensity
What each of this component's grounds spends, measured 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, and Demanded is declared and rationed, so neither is a property this component carries by itself. See intensity.
Content
What to write, and what to leave out.
- Name the quantity, not the widget. Storage used, not Storage meter.
- Give the unit when the number needs one. Forty means nothing on its own.
- Keep the label short enough to sit on one line beside the value.