ProgressBar
A horizontal progress indicator that shows how far along a task is, either as one continuous linear bar or as a row of segmented steps, with an optional trailing count label.
Overview
A horizontal progress indicator that shows how far along a task is, either as one continuous linear bar or as a row of segmented steps, with an optional trailing count label.
The linear variant.
Anatomy
- 1Track required The Root slot rail. Linear holds one full-width fill; segmented holds a row of Step segments.
- 2Fill optional Linear only. Colored portion whose width follows the progress value.
- 3Segment optional Segmented only. Instance of BuildingBlock / Bar, repeated 2 to 7 times, filled to count completed steps.
- 4Label.Progress optional Trailing count label inset from the bar.
- 5Label required
Measurements
Specs
Values resolved live from the token spine. Token names follow the active platform; each links to its page.
Properties
The component’s Figma API, the properties you set on an instance. Useful to designers in Figma and to engineers mapping it to code props.
Accessibility
Expose the progress value to assistive technology (accessibilityValue on iOS, a progress semantics node on Android, aria-valuenow / valuemin / valuemax on web) so screen-reader users hear how far along the task is. Do not convey progress with color alone.
Reference: Apple Human Interface Guidelines and WCAG 2.5.5 Target Size.