Progress bar

The ProgressBar component displays feedback on the status or duration of a given process.

Basic usage

The value prop can be used to indicate the percentage of the progress bar that should be filled.
tsx
Copied
1
<ProgressBar label="Download progress" value={75} />

Sections

Alternatively, a progress bar can consist of multiple sections, each with its own value and color. It can also include a tooltip that appears when the section is hovered.
tsx
Copied
1
<ProgressBar
2
label="Multiple file download progress"
3
sections={[
4
{
5
color: "blue",
6
value: 25,
7
tooltip: "file1.txt",
8
},
9
{
10
color: "yellow",
11
value: 35,
12
tooltip: "file2.txt",
13
},
14
{
15
color: "green",
16
value: 15,
17
tooltip: "file3.txt",
18
},
19
]}
20
/>

Component API

color
optional
Default
primary
"primary" | "secondary" | "dark" | "gray" | "red" | "pink" | "grape" | "violet" | "indigo" | "blue" | "cyan" | "teal" | "green" | "lime" | "yellow" | "orange" | "success" | "error" | `primary.${number}` | `secondary.${number}` | `dark.${number}` | `gray.${number}` | `red.${number}` | `pink.${number}` | `grape.${number}` | `violet.${number}` | `indigo.${number}` | `blue.${number}` | `cyan.${number}` | `teal.${number}` | `green.${number}` | `lime.${number}` | `yellow.${number}` | `orange.${number}` | `success.${number}` | `error.${number}`

Color of the progress bar

grow
optional
boolean

If true, the element will grow to fill available space.

This prop works only if the element is a direct child of a Stack.

height
optional
Default
auto
SizingToken | "{number}px"
Defines the height of the component. See SizingToken docs for more details.
label
optional
string

Label of the progress bar

radius
optional
Default
9999
number | "xs" | "sm" | "md" | "lg" | "xl"

Progress bar border radius. Defaults to 9999px to force a fully-circular border.

sections
optional
{ color: string; value: number; tooltip?: React.ReactNode }[]

Sections of progress bar filled.

size
optional
Default
md
number | "xs" | "sm" | "md" | "lg" | "xl"

Size of the progress bar

value
optional
number

Percentage of the progress bar filled.

width
optional
Default
auto
SizingToken | "{number}px"
Defines the width of the component. See SizingToken docs for more details.