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.
Data Display
Meter
Meters are visual representations of a quantity or an achievement. Their progress is determined by user actions, rather than system actions.
Examples
Options
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.
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.
Label
Meters should always have a label. In rare cases where context is sufficient and the UX Team have 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.
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.
Width
The width of a meter can be customized appropriately for its context.
Size
Meters come in three different sizes: small, medium, and large. The medium size is the default and most frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page. 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.
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.
Behaviors
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.
Implementation
Example Name
Description and implementation notes
<p> code example </p>Information
Checklist
All interactive states
Includes all interactive states that are applicable (hover, down, focus, keyboard disabled).
All Color Schemes
Works properly across all color schemes (light, dark).
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).
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).
Defined Options
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc).
Defined Behaviors
Includes guidelines for keyboard focus, layout(wrapping, truncation, overflow) animation, interactions etc.
Usage guidelines
Includes a list of dos and don'ts that highlight best practices and common mistakes.
Writing Guidelines
Includes content standards or usage guidelines for how to write or format in-product content for the component.
Internationalization Guidelines
Works properly across various locales and includes guidelines for bi-directionality (RTL).
Keyboard Interactions
Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.
Design Tokens
All design attributes (color, typography, layout, animation, etc.) are available as design tokens.
UI Kit
Includes a downloadable Figma file that shows multiple options, states, color themes, and platform scales.