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.
Occasionally you need to lock a component to the smallest size. This is done
The Progress Stepper comes with a Step component available to inject steps with custom props directly into the Stepper component.
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.
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.
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.
Titles can be passes as a string or as a title property to the Step configuration object.
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.
Step Locations and Callbacks
Steps can be directed to other locations or actions by providing
onClick properties to the step either when using
React Notation or
|currentStep||Sets the currently selected step|
|size||Sets size of the tooltip to either sm or lg|