Primer React Prototype

ProgressBar

Alpha

import { ProgressBar } from 'primer-react-prototype'

<ProgressBar>
  <ProgressBar.Item percentage={20} />
</ProgressBar>

<ProgressBar>
  <ProgressBar.Item percentage={20} />
</ProgressBar>

Multiple items

<ProgressBar>
  <ProgressBar.Item percentage={30} />
  <ProgressBar.Item percentage={20} bg="bg.warningInverse" />
  <ProgressBar.Item percentage={10} bg="bg.dangerInverse" />
</ProgressBar>

<ProgressBar>
  <ProgressBar.Item percentage={30} />
  <ProgressBar.Item percentage={20} bg="bg.warningInverse" />
  <ProgressBar.Item percentage={10} bg="bg.dangerInverse" />
</ProgressBar>

API Reference

ProgressBar

Prop
`size`

ProgressBar.Item

Prop
`percentage`

Color

backgroundColor

bg