Tiered Progress Bar

Tiered progress bar displays progress across multiple discrete segments, where each segment has its own filled and pending state.

#Example

#Guidelines

#When to use

• When progress is naturally split into discrete tiers, batches, or buckets that share an overall goal (e.g. throughput per timezone, fan-out across regions).
• When in-flight work should be visualized separately from completed work, using each segment's optional pending value.

#When not to use

• If progress is a single continuous quantity, use a progress bar.
• If progress should fit in a small space, use a progress circle.
• If you only need an indeterminate indicator, use a spinner.

#Props

Inherits margin props.

Name	Default	Description
aria-label	—	string Mandatory label for the progress bar group. Required for accessibility.
segments	—	TieredProgressBarSegment[] Segments to render, one pill per entry, distributed with equal width.

#Segment

Each entry in segments is shaped like:

• completed (number, required) — filled portion of the segment, 0–100. Values are clamped.
• pending (number, optional) — in-flight portion stacked behind completed, 0–100. Capped at 100 - completed.
• tooltip (ReactNode, optional) — content shown when hovering or focusing the segment. Segments with a tooltip are focusable; segments without are not.