Progress Bar

Accessibility

A ProgressBar needs to be associated with a label for accessibility purposes, therefore the component id needs to be set. If a label is not available, please add an aria-label to ensure that the component remains accessible. For more examples, please read aria-progressbar-name

<ProgressBar value={20} aria-label="Completion rate" />
<ProgressBar value={20} aria-label="Completion rate" />
Edit me!

Themes

These are the available themes for this component: Primary (default), Success, Warning, Danger

<>
  <ProgressBar value={20} />
  <ProgressBar theme="success" value={20} aria-label="Completion rate" />
  <ProgressBar theme="warning" value={20} aria-label="Completion rate" />
  <ProgressBar theme="danger" value={20} aria-label="Completion rate" />
</>

Appearance

There two options for the appearance property: solid and outline(default). These are the available outline variations for all the themes.

<>
  <ProgressBar appearance="solid" value={20} aria-label="Completion rate" />
  <ProgressBar
    appearance="solid"
    theme="success"
    value={20}
    aria-label="Completion rate"
  />
  <ProgressBar
    appearance="solid"
    theme="warning"
    value={20}
    aria-label="Completion rate"
  />
  <ProgressBar
    appearance="solid"
    theme="danger"
    value={20}
    aria-label="Completion rate"
  />
</>