Skip to content

Documentation

MeterStack

MeterStack is a compound component for segmented meter displays.

Storybook Source Figma

Root Props

Prop	Type	Default
`size`	`MeterStackSize`	`'md'`
Visual size of the meter component. Typically maps to predefined size tokens in a design system.
`max`	`number`	`1`
Maximum possible value of the meter. Default is 100.
`min`	`number`	`0`
Minimum possible value of the meter. Default is 0.
`value`required	`number`	—
The current numeric value displayed by the meter. Required. Clamped between `min` and `max`.
`fullWidth`	`boolean`	—
Whether the meter should expand to fill the width with its container.

Also accepts all <div> attributes.

Child Parts

MeterStackSegment: one proportional segment.

`MeterStackSegment`

Prop	Type	Default
`value`	`number`	—
The numeric value this partial item visually represents. For example, a segment in a stacked meter.

Also accepts all <div> attributes.

Types

MeterStackProps
MeterStackSegmentProps
MeterStackSize

State Model

MeterStack itself is display-only and has no controlled interaction state.
The root provides min and max context to each segment for ARIA meter semantics.