ProgressBar provides a styled progress bar

Accessibility

A ProgressBar needs to be associated with a label for accessibility purposes, therefore the component id needs to be set. If a label is not available, please add an aria-label to ensure that the component remains accessible. For more examples, please read aria-progressbar-name

Edit me!

Themes

These are the available themes for this component: Primary (default), Success, Warning, Danger

<>
<ProgressBar value={20} />
<ProgressBar theme="success" value={20} aria-label="Completion rate" />
<ProgressBar theme="warning" value={20} aria-label="Completion rate" />
<ProgressBar theme="danger" value={20} aria-label="Completion rate" />
</>

Appearance

There two options for the appearance property: solid and outline(default). These are the available outline variations for all the themes.

<>
<ProgressBar appearance="solid" value={20} aria-label="Completion rate" />
<ProgressBar
appearance="solid"
theme="success"
value={20}
aria-label="Completion rate"
/>
<ProgressBar
appearance="solid"
theme="warning"
value={20}
aria-label="Completion rate"
/>
<ProgressBar
appearance="solid"
theme="danger"
value={20}
aria-label="Completion rate"
/>
</>

API Reference

PropTypeDefaultRequired
asChild
boolean

-

-

theme
"primary" | "success" | "danger" | "warning"
primary

-

value
null | number

-

-

max
number
100

-

getValueLabel
(value: number, max: number) => string

-

-

cssCSSProperties

-

-