Progress Stepper
import ProgressStepper from '@prism/progressstepper'; // cjs or esm module
import '@prism/styles/[theme]/progressstepper.css'; // styles

Sizes

The Progress Stepper comes in two different sizes. The largest of which is the default and is responsive. Starting at the smallest component size at the smallest screen width and then adjusting in size as the viewport changes in size.

ReactHTML

Small Size

Occasionally you need to lock a component to the smallest size. This is done with the size="sm" property.

ReactHTML

React Notation

The Progress Stepper comes with a Step component available to inject steps with custom props directly into the Stepper component.

Minimal

When using the Step component, titles can be included either as a child of the Step component or as a title prop of the Step component.

ReactHTML

Expanded

This example aims to highlight how you specify which step is complete or incomplete. By default, all steps are complete if they are before the currentStep index.

ReactHTML

Object Notation

Depending on the environment, an Array of step titles or objects may be used in lieu of using a Step component. As all Step components, steps before the currentStep index will be marked as complete by default.

Minimal

Titles can be passes as a string or as a title property to the Step configuration object.

ReactHTML

Expanded

In order to display a Step as incomplete or specify one as complete, Step configuration objects will need to be used. These can also be mixed with title strings for when only one step needs to have incomplete specified.

ReactHTML

Step Locations and Callbacks

Steps can be directed to other locations or actions by providing href or onClick properties to the step either when using React Notation or Object Notation.

React Notation

ReactHTML

Object Notation

ReactHTML

Props

Stepper

NameTypeDefaultDescription
currentStepnumber1Sets the currently selected step
sizestring"lg"Sets size of the tooltip to either sm or lg