ProgressBar
Use progress bars to visualize task completion.
- Alpha
- Not reviewed for accessibility
This documentation is moving to a new home. Please update any link or bookmark that points to this page. The new content can be found
here.
import {ProgressBar} from '@primer/react'
<ProgressBar progress={80} aria-label="Upload test.png" />
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'}} aria-label="Upload test.png" />
</>
If you want to show multiple segments in a ProgressBar, pass separate Items as children instead of a progress value.
<>
<ProgressBar aria-label="Upload test.png">
<ProgressBar.Item progress={33} />
<ProgressBar.Item progress={33} sx={{backgroundColor: 'danger.emphasis'}} />
</ProgressBar>
</>
| Name | Type | Default | Description |
|---|
| animated | boolean | | Whether the filled in area(s) of the progress bar will be animated or not |
| 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 | | |
- Component props and basic example usage of the component 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 robust unit test coverage (100% where achievable).
- Component has visual regression coverage of its default and interactive states.
- Component does not introduce any axe violations.
- Component has been manually reviewed by the accessibility team and any resulting issues have been addressed.
- 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 does not introduce any performance regressions.
- 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.
- Tooling (such as linters, codemods, etc.) exists to prevent further use of alternatives.