ProgressBar

Usage

Import the component and render it.

import { ProgressBar } from 'src/components/ProgressBar/ProgressBar';

<ProgressBar
  color="brand"
  size="sm"
  value={75}
  max={100}
  label="Uploading..."
  showValue
/>

Accessibility

Role: progressbar (role="progressbar" on the Track, with aria-valuenow/min/max).

• Not focusable: a progress bar only reports status.
• The Label names the progress bar (aria-labelledby). Without a label, pass aria-label.
• valueText, when set, becomes aria-valuetext; the visible Value is hidden from assistive technology to avoid repeating it.
• Color is not the only signal: pair Success, Warning and Danger with a label that says what happened.

Size

Set the size prop: Small is "sm", Medium is "md".

<ProgressBar size="sm" />
<ProgressBar size="md" />

Color

Set the color prop: Brand is "brand", Success is "success", Warning is "warning", Danger is "danger".

<ProgressBar color="brand" />
<ProgressBar color="success" />
<ProgressBar color="warning" />
<ProgressBar color="danger" />