Skip to content


Use progress bars to visualize task completion.

Default example

If you'd like to use ProgressBar inline, pass the inline boolean prop & be sure to set a width.

Component props

progressNumberUsed to set the size of the green bar
barSizeString'default'Controls the height of the progress bar. Can be 'small', 'large', or 'default'. If omitted, height is set to the default height.
inlineBooleanfalseStyles the progress bar inline
bgString'bg.successInverse'Set the progress bar color, defaults to bg-green
sxSystemStyleObject{}Style to be applied to the component