Meters are visual representations of a quantity or an achievement. Their progress is determined by user actions, rather than system actions.
By default, the meter has a green fill to show the value. This can be used to represent a positive semantic value, such as when there’s a lot of space remaining, or a non-semantic value, such as the number of tutorials completed.
The notice variant has an orange fill to show the value. This can be used to warn users about a situation that may need to be addressed soon, such as when space remaining is becoming limited.
The negative variant has a red fill to show the value. This can be used to warn users about a critical situation that needs their urgent attention, such as when space remaining is becoming very limited.
Meters should always have a label. In rare cases where context is sufficient and an accessibility expert has reviewed the design, the label could be undefined. These meters without a visible label should still include an aria-label in HTML (depending on the context, “aria-label” or “aria-labelledby”). The label is always placed above the track.
Meters can have a value label that gives detailed information about the value shown (e.g., "60%" or "2 of 8"). This value label works alongside the label and should not be displayed if the label itself is not displayed. Similar to the label, the value label is always placed above the track.
The width of a meter can be customized appropriately for its context. The default width is size-2400 (192 px on desktop and 240 px on mobile).
Meters come in 2 sizes: large and small. By default, meters are large. The small size is used when there are multiple meters shown at the same time in a more confined space (e.g., tables, cards, etc), otherwise the large size should be used.
The value shows a quantity or an achievement, from 0 to 1, such as tutorials completed, storage space, etc. Unlike the progress bar, this value is determined by user actions, rather than system actions.
From the design point of view, each component has a number of options. These options and their names are platform agnostic, and each implementation should adapt these to fit into their framework.
Property | Values | Default Value |
---|---|---|
variant | positive / notice / negative | positive |
label | text / nothing | – |
value label | text / nothing | – |
width | number | size-2400 |
size | small / large | large |
value | number (0 to 1) | 0 |
When the label is too long for the available horizontal space, it wraps to form another line. The value is always shown in full and never wraps or truncates.
A progress bar fills automatically as the system loads determinately or indeterminately. A user's actions do not affect the progress bar; it just indicates how long they must wait for the process to finish. A meter indicates how much the user has completed or how far they are in a continuum.
Use the built-in style for showing a label associated with the meter. This style always has a left aligned label and an optional right aligned value above the track. The label should be in sentence case. When a stack of meters appears in a table, the label can also be in the form of a table column header.
Meter variants can be used to represent semantic values by switching variants as the value changes, from positive, to notice, and then to negative. This kind of variant switching should be handled appropriately within the context of your product so that you’re setting accurate expectations for your users about the semantic meaning.
For RTL (right-to-left) languages, the layout of the meter is mirrored. The label is right-aligned, the value is left-aligned, and the fill progresses from right to left. Beware that the placement of the percent sign differs depending on the locale.
Date | Number | Notes |
---|---|---|
Jul 20, 2020 | 6.0.0 |
|
Aug 22, 2019 | 5.1.0 |
|
Apr 20, 2019 | 5.0.0 |
|
Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)
Works properly across all four color themes (lightest, light, dark, darkest).
Includes a desktop scale (UWP, macOS, web desktop) and a mobile scale (iOS, Android, web mobile).
Includes guidelines for layout (wrapping, truncation, overflow), animation, interactions, etc.
Includes a list of dos and don’ts that highlight best practices and common mistakes.
Follows WCAG 2.0 standards for contrast (AA).
Works properly across various locales and includes guidelines for bi-directionality (RTL).
Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.
All design attributes (color, typography, layout, animation, etc.) are included in Spectrum DNA.
Includes a downloadable XD file that has been generated by code and shows multiple variations, states, color themes, and scales.
Component is included in the Spectrum for Adobe XD plugin.