Meter

Version 7.0.0

Meters are visual representations of a quantity or an achievement. Their progress is determined by user actions, rather than system actions.

A meter, label Storage warning 80%.
DateVersionSpectrumExpress UI KitApr 06, 20227.0.0DownloadDownloadFeb 17, 20226.1.0In progressIn progressJul 20, 20206.0.0DownloadAug 22, 20195.1.0DownloadApr 20, 20195.0.0Download

Anatomy#

Image illustrating through labels the component parts of a standard meter, including its value, fill, track, and label.

Options#

Key example of a meter in informative variant. Meter label Tutorials completed, 2 of 8.

Informative variant#

By default, the meter has a blue fill to show the value. This can be used to represent a neutral or non-semantic value, such as the number of tutorials completed.

Key example of a meter in positive variant. Meter label Storage space, 15%.

Positive variant#

The positive variant 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.

Key example of a meter in notice variant. Label Storage space, 80%.

Notice variant#

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.

Key example of a meter in negative variant. Label Storage space, 90%.

Negative variant#

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.

Key example showing how to label a meter. Label Tutorials completed. Label is positioned above the meter track and aligned to the left.

Label#

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.

Key example showing a meter value. Label 2 of 8. Label is positioned above the meter track and aligned to the right.

Value label#

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.

Key example of 2 meters in positive variant at 2 different widths. Both labeled Tutorials completed, 2 of 8.

Width#

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).

Key example of 2 meters in positive variant in large and small sizes. Both labeled Tutorials completed, 2 of 8.

Size#

Meters come in 2 sizes: large and small. By default, meters are large. Use the small size when there are multiple meters shown at the same time in a more confined space, such as in tables or cards.

Key example of 2 meters in positive variant showing 2 different values. First meter value 0.25, label Tutorials completed, 2 of 8. Second meter value 1.00, label Tutorials completed, 8 of 8.

Value#

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.

Table of options#

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.

PropertyValuesDefault Valuevariantinformative / positive / notice / negativeinformativelabeltext / nothing–value labeltext / nothing–widthnumbersize-2400sizesmall / largelargevaluenumber (0 to 1)0

Behaviors#

Key example of a meter showing text overflow. Meter label Tutorials abgeschlossen, 1 of 4. New line created for second word abgeschlossen.

Text overflow#

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.

Usage guidelines#

Progress bar or meter?#

A progress bar fills automatically as the system loads either 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.

do
Key example showing correct usage of meter. A bar loader and meter. Bar loader label Loading data, 80%. Meter label Tasks completed, 1 of 5.

Labels#

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.

do
Key example showing correct usage of meter. Meter label Tasks completed, 1 of 5.

Representing semantic values#

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.

do
Key example of 3 meters in 3 variants. First meter, positive variant, label storage space, 26%. Second meter, notice variant, label Storage space, 80%. Third meter, negative variant, label Storage space, 90%.

Internationalization#

Key example of meter internationalization for right-to-left languages. Layout of meter is mirrored, label in Arabic Storage space 26%.

RTL#

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.

Theming#

A theme is an intentional, systematic customization of Spectrum. It has unique visual attributes. For more information, view Theming.

Key example of a meter in the Spectrum for Adobe Express theme. Positive variant. Meter label Storage space, 15% full.

Spectrum for Adobe Express#

Meters remain the same across themes.

Changelog#

DateNumberNotesApr 06, 20227.0.0
  • Updated all colors to 6.0.0
Feb 17, 20226.1.0
  • Added informative variant
Jul 20, 20206.0.0
  • Renamed "warning" variant to "notice"
  • Rename "critical" variant to "negative"
  • Added value and value label options
  • Added width option
Aug 22, 20195.1.0
  • Added text overflow behavior
Apr 20, 20195.0.0
  • This component is now individually versioned (individual versions of existing components start at 5.0.0)
  • Added RTL (right-to-left) guidelines

Design checklist#

N/A

All interactive states

Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).

check

All color themes

Works properly across all four color themes (lightest, light, dark, darkest).

check

All platform scales

Includes a desktop scale (UWP, macOS, web desktop) and a mobile scale (iOS, Android, web mobile).

check

Accessible use of color

Color is not used as the only visual means of conveying information (WCAG 2.0 1.4.1).

check

Accessible contrast for text

Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).

check

Accessible contrast for UI components

Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).

check

Content design

UI language and information design considerations have been incorporated into component design.

N/A

Defined options

Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)

check

Defined behaviors

Includes guidelines for keyboard focus, layout (wrapping, truncation, overflow), animation, interactions, etc.

check

Usage guidelines

Includes a list of dos and don'ts that highlight best practices and common mistakes.

check

Writing guidelines

Includes content standards or usage guidelines for how to write or format in-product content for the component.

check

Internationalization guidelines

Works properly across various locales and includes guidelines for bi-directionality (RTL).

N/A

Keyboard interactions

Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.

check

Design tokens

All design attributes (color, typography, layout, animation, etc.) are available as design tokens.

N/A

UI kit

Includes a downloadable XD file that shows multiple options, states, color themes, and platform scales.

check

Generated UI kit

Includes a downloadable XD file, generated by code using design tokens defined in Spectrum DNA, and shows multiple options, states, color themes, and platform scales.

check

In Spectrum for Adobe XD plugin

Component is included in the Spectrum for Adobe XD plugin.