Progress Bar
Indicates a wait time for actions - either within an experience flow or loading data.
Accessibility
- The progress bar always sets
role="progressbar"
When
infinite
isfalse
(the progress bar is determinate), these determinate aria tags are set:aria-valuenow={value}
aria-valuemin={0}
aria-valuemax={100}
Examples
Progress bar rounded
There also is a rounded version of the progress bar
API
Progress Bar props
Name | Type | Description |
---|---|---|
aria-label | string | Aria-label attribute |
errorMessage | string | Error message for screen-reader users. |
getProgressLabel | function | Can be used to display a custom label for the progress bar. |
infinite | boolean | Can be used to show the infinite progress bar. |
maxValue | number | The biggest value allowed. |
minValue | number | The smallest value allowed. |
overrides | custom | Lets you customize all aspects of the component. |
showLabel | boolean | Can be used to show the progress bar label. |
size | enum | Renders component in provided size. |
steps | number | Defines how many steps the progress bar has. Defaults to 1. |
value | number | Progress bar value attribute normalized in the 0 to 100 range. |
Progress Bar exports
You can import this module like so:
import {ProgressBar} from 'baseui/progress-bar'
It exports the following components or utility functions: