Progress
Determinate or indeterminate progress bar with label and three sizes.
Example
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
value | number | — | No | Current progress (omit for indeterminate) |
max | number | 100 | No | Maximum value |
size | 'sm' | 'md' | 'lg' | 'md' | No | Bar height |
label | string | — | No | Accessible label for the progress bar |
Accessibility
- role="progressbar" with aria-valuenow, aria-valuemin, aria-valuemax
- aria-label from label prop
- Indeterminate when value is undefined
Related Tokens
--progress-surface--progress-on-surface--progress-indicator