Use ProgressBar
to visualize task completion.
Default example
<ProgressBar progress={80}/>
If you'd like to use ProgressBar inline, pass the inline
boolean prop & be sure to set a width.
<>
<Text mr={3}>5 of 10</Text>
<ProgressBar progress={50} inline width='100px'/>
</>
System props
ProgressBar components get COMMON
system props. Read our System Props doc page for a full list of available props.
Component 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 |