Data display
Progress
Show how far along a task or utilisation figure sits, from 0 to 100. For usage against an entitlement limit, use Entitlement progress.
Purpose
Progress is determinate: it needs a value. When the wait has no known length, use
Spinner.
Example
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | undefined | "Progress" | Accessible name for the bar. Radix renders `role="progressbar"`, which WCAG requires to have a name — without one, a screen reader announces only a percentage with no indication of what is progressing. Override the default with something specific ("Dental entitlement used", "Upload progress"), or pass `aria-labelledby` to point at visible text. |
asChild | boolean | undefined | — | — |
value | number | null | undefined | — | — |
max | number | undefined | — | — |
getValueLabel | ((value: number, max: number) => string) | undefined | — | — |