Progress Bar

Progress bars visually communicate the completion status of a task, process or goals.

Colors

With counter

70%

With label

Data Storage80%

to unlock unlimited data storage.

Circular Progress Bar

50%

Size

50%

75%

100%

API References

Progress Bar

PropTypeDefault

value

number

—

color

"primary""error""warning""success""grey"

"primary"

counter

"none""right""down"

"none"

aria-label

string

—

className

string

" "

Progress Bar With Label

PropTypeDefault

title

ReactNode

—

value / color

number / ProgressBarColor

—

showPercentage

boolean

true

description / linkLabel

ReactNode / string

—

onLinkClick

() => void

—

className

string

" "

Circular Progress Bar

PropTypeDefault

value / color

number / ProgressBarColor

—

size

40 | 48 | 56 | 64 | 72 | 80

showPercentage

boolean

true

aria-label

string

—

className

string

" "