display contract
Progress
Determinate progress bar. For uploads, multi-step flows, and rate limits.
Variants
- linear
- Horizontal bar
- circular
- Ring progress
- segmented
- Stepped bar — multi-step wizards
Sizes
- sm
- 4pt thick
- md
- 6pt thick
- lg
- 10pt thick
Example
<Progress value={percent} aria-label="Upload progress" />Usage rule
role="progressbar" + aria-valuemin/max/now + aria-label.
The full Progress contract has 3 more rules, plus the do-not patterns. Get the full recipe.