ProgressBar

Design

Development

Table of contents

Table of contents

Use ProgressBar to visualize task completion.

Default example

<ProgressBar progress={80}/>

<ProgressBar progress={80}/>

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

5 of 10

<>
   <Text mr={3}>5 of 10</Text>
   <ProgressBar progress={50} inline width='100px'/>
 </>

<>
   <Text mr={3}>5 of 10</Text>
   <ProgressBar progress={50} inline width='100px'/>
 </>

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

Name	Type	Default	Description
progress	Number		Used to set the size of the green bar
barSize	String	'default'	Controls the height of the progress bar. Can be 'small', 'large', or 'default'. If omitted, height is set to the default height.
inline	Boolean	false	Styles the progress bar inline
bg	String	'green.5'	Set the progress bar color, defaults to bg-green

1 contributor