Steppers are used to help users keep track in a multi-step workflow
Steppers are used to help users keep track of their progress in a multi-step workflow. It is recommended to break down a long process into multiple steps using steppers to help users keep track of their progress while completing a task.
The stepper can be used at different places to serve different purposes. The stepper component is a subset of the Horizontal Navigation component with its icons fixed.
|Height (of a stepper item)||32px||-|
|Corner radius (of the active stepper item)||16px||-|
|Margin (of a stepper item)|
(top, right, bottom, left)
|0px, 1px, 0px, 1px||-|
|Spacing between stepper items||0px||-|
Users cannot visit any upcoming steps however they can visit any previous steps given the step was done or skipped.
Steppers are commonly used in page headers. Any action which is used collectively for the whole process e.g. Finish Later etc. should be accommodated in the header while the step related actions such as Next, Skip, etc. should be accommodated in the body.
Steppers can also be used separately without the page header. The actions will be at the bottom of the layout. This variant is commonly used for onboarding.
The actions specific to any step will be located at the bottom of the content of that step, while if there is any action that is for the whole process it will be accommodated in the page header itself.
A stepper can also have a skippable/optional step. Users can skip the step for the time being and can navigate back to it, to fill it again before completing the progress.
In case of an optional step, an additional step-specific action “Skip” gets added on the left of the primary action.
In case the last step is supposed to be optional, relabel the Skip button to Skip and Finish.