helpText

A meter can include help text below it to explain what the value means and how to reach the target. This text may include units, value ranges, thresholds like targets or warnings, and actions that affect the meter.

value

The value represents a user-driven quantity or achievement, such as tutorials completed or storage used. Unlike a progress bar, it reflects user actions, not system activity.

size

Meters come in four different sizes: small, medium, large, and extra-large. By default, meters use medium size. 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.

width

The width of a meter can be customized appropriately for its context. The minimum width is meter-minimum-width. The maximum width is meter-maximum-width.

valueLabel

Meters can include a value label to show details like "60%" or "2 of 8." It should only appear if the main label is shown and is always placed above the track.

label and hideLabel

Meters should always have a label placed above the track. 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").

variant

Meter has four variants: informative, positive, notice, and negative.

• 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.
• 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.
• 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 very limited.