Use ProgressBar
to visualize task completion.
If you'd like to use ProgressBar inline, pass the inline
boolean prop & be sure to set a width.
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 |