ProgressBar
AlphaUse progress bars to visualize task completion.
import {ProgressBar} from '@primer/react'
Examples
<ProgressBar progress={80} />
Inline
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 sx={{width: '100px'}} />
</>
Props
ProgressBar
| Name | Type | Default | Description |
|---|
| progress | number | 0 | Used to set the size of the green bar |
| barSize | | 'small'
| 'large'
| 'default' | 'default' | Controls the height of the progress bar. If omitted, height is set to the default height. |
| inline | boolean | false | Styles the progress bar inline |
| bg | string | 'bg.successInverse' | Set the progress bar color |
| sx | SystemStyleObject | | Style overrides to apply to the component. See also overriding styles. |
Status
Alpha
- Component props are documented on primer.style/react.
- Component does not have any unnecessary third-party dependencies.
- Component can adapt to different themes.
- Component can adapt to different screen sizes.
- Component has 100% test coverage.
Beta
- Component is used in a production application.
- Common usage examples are documented on primer.style/react.
- Common usage examples are documented in storybook stories.
- Component has been reviewed by a systems designer and any resulting issues have been addressed.
- Component has been manually reviewed by the accessibility team and any resulting issues have been addressed.
Stable
- Component API has been stable with no breaking changes for at least one month.
- Feedback on API usability has been sought from developers using the component and any resulting issues have been addressed.
- Component has corresponding design guidelines documented in the interface guidelines.
- Component has corresponding Figma component in the Primer Web library.