Progress Bar
The Progress Bar component visually represents the completion state of a task or process.
Usage
Default
<Progressbar value={65} />Props
| Type | Description | |
|---|---|---|
| animated | boolean | If true, applies an animated effect to the progress bar. |
| aria-describedby | string | ID of the element that describes the progress bar. Useful for extra context or status messaging. |
| aria-label | string | Accessible label for the progress bar. Use this when no visible label exists. |
| aria-labelledby | string | ID of the element that labels the progress bar. Prefer this when there is a visible label in the UI. |
| aria-valuetext | string | Custom accessible text for screen readers. Example: "Uploading 3 of 5 files" |
| className | string | Optional additional class name(s) for custom styling. |
| data-testid | string | Optional test ID for testing purposes. |
| description | ReactNode | Optional description content rendered for assistive technology. |
| descriptionId | string | Optional id applied to the description container. Useful when connecting the description with aria-describedby. |
| indeterminate | boolean | If true, the progress bar shows an indeterminate animation. When true, the value prop is ignored. |
| label | ReactNode | Optional label describing what the progress represents. Example: "Uploading files", "Build progress" |
| labelId | string | Optional id applied to the visible label container. Useful when connecting the label with aria-labelledby. |
| labelPosition | LabelPositionType | Position of the label relative to the progress bar. |
| rounding | RoundingType | Rounding to apply to the progress bar. One of: "none" | "small" | "medium" | "large" | "full" |
| shadow | ShadowType | Shadow to apply to the progress bar. One of: "none" | "light" | "medium" | "strong" | "intense" |
| size | SizeType | Size of the progress bar. One of: "xs" | "small" | "medium" | "large" | "xl" |
| state | StateType | State of the progress bar. One of: "success" | "error" | "warning" | "disabled" | "" |
| theme | ThemeType | Theme for styling the progress bar. One of: "primary" | "secondary" | "tertiary" | "quaternary" | "clear" |
| value | number | Value of progress (0 to 100). Ignored if `indeterminate` is true. |