" language="jsx" style="position: relative; text-align: left; box-sizing: border-box; padding: 0px; overflow: hidden; white-space: pre; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; color: rgb(57, 58, 52); background-color: rgb(246, 248, 250); font-size: 85%; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-width: 0px 1px 1px; border-top-style: initial; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-color: rgb(208, 215, 222); border-image: initial;">
<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 sx={{width: '100px'}} />
</>
If you want to show multiple segments in a ProgressBar, pass separate Item
s as children instead of a progress
value.
<>
<ProgressBar>
<ProgressBar.Item progress={33} />
<ProgressBar.Item progress={33} sx={{backgroundColor: 'danger.emphasis'}} />
</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. |
- 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.