Skip to content


Use ProgressBar 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

System props

ProgressBar components get COMMON system props. Read our System Props doc page for a full list of available props.

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
Edit this page on GitHub
2 contributorsVanAndersonemplums
Last edited by VanAnderson on March 8, 2021