Meter
A bar that visualizes a value within a known range.
Basic
The scalar-measurement cousin of Progress: reach for meter when the value just sits at a level (storage used, score vs target) and for Progress when work is in motion. Wrap a .meter__bar in a .meter__track inside .meter. The root carries role="meter" + aria value attributes (use aria-valuetext when the unit matters). Add .meter__label / .meter__value to caption it.
Intents
Recolor the fill with an intent modifier on .meter__bar. Flip the intent at thresholds for a quick gauge.
Sizes
Default is a thin strip; --sm a hairline; --lg a label-friendly height for hero metrics.
Stacked
Drop multiple .meter__bar children into one track to break the value into segments. Widths must sum to ≤ 100%; remaining room exposes the track background.
Legend
Pair a stacked meter with a .meter__legend row. Each .meter__legend-dot reuses --meter-bar-bg, so the intent modifier (or an inline override) colors the swatch to match its bar.
Customization
These variables retune .meter. Override on the element, a parent scope, or :root.
| Variable | Use |
|---|---|
--meter-height | Track height; size modifiers reassign this |
--meter-radius | Track corner radius; pilled by default |
--meter-header-gap | Space between the caption row and the track |
--meter-segment-gap | Gap between adjacent bars in a stacked track |
--meter-bg | Track background (unfilled portion) |
--meter-bar-bg | Bar fill (intent modifiers retune; also drives the legend dot) |
--meter-label-font-size | Caption font size |
--meter-label-color | Label text color |
--meter-value-color | Value text color |
--meter-legend-row-gap | Space between the track and the legend |
--meter-legend-item-gap | Horizontal gap between legend items |
--meter-legend-dot-size | Diameter of the legend swatch |
--meter-legend-font-size | Legend text size |
--meter-legend-color | Legend text color |