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.
PrivacyTermsSupport