You are viewing the legacy documentation of Plasma featuring the components from the@coveord/plasma-react and @coveord/plasma-style packages. Those packages are deprecated and replaced by the @coveord/plasma-mantine package.

Step Progress Bar

A step progress bar visualizes a user’s progress as they complete a task by representing the number of steps left to complete the task.

View source

1
import {StepProgressBar} from '@coveord/plasma-react';
2

3
const Demo = () => <StepProgressBar numberOfSteps={5} currentStep={2} />;
4
export default Demo;

Props

Name	Type	Description
`currentStep`required	`number`	The 0-based index of the step currently in completion by the user.
`numberOfSteps`required	`number`	The total number of steps. A positive integer above 0.
`className`	`IClassName`	Additional CSS classes that are added to the progress bar element

No guidelines exist for StepProgressBar yet.

Create guidelines