display contract
Progress
Determinate progress bar. For uploads, multi-step flows, and rate limits.
Variants
- linear
- circular
- segmented
Sizes
- sm
- md
- lg
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.