ProgressBar

Importing

import { ProgressBar } from '@customerio/pluma-components/react';

Usage

<ProgressBar value={50} />

Size

Progress bars can be either medium (default) or small.

<ProgressBar value={50} size="small" />

<ProgressBar value={50} size="small" />

Max

The maximum value of the progress bar can be set using the max prop. By default, the maximum value is 100.

<ProgressBar value={50} max={200} />

Accessibility

To screen readers, the progress bar will announce the percentage of completion. The aria-label prop can be used to provide a more descriptive label.

<ProgressBar value={50} ariaLabel="50% complete" />

If it has a label, you can also use the ariaLabelledby prop to reference the label element.

<Label id="label">50% complete</Label>
<ProgressBar value={50} ariaLabelledby="label" />