Skip to content

ProgressBar

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.

5 of 10

Component props

NameTypeDefaultDescription
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