WizardA wizard presents a series of steps in a prescribed order that the user needs to complete in order to accomplish a goal (e.g. purchase a product).
The wizard must be included only in modal screens.
Wizards can be helpful in the following situations:
- When you want to simplify a complex task.
- When the user must complete steps in a specific sequence.
- Overview
- Dev
Product ExamplesIn the example below the user has to go through a checkout process of 3 steps.
Wizard is being used here to guide the user through the process.
Wizard AlternativeSteps can be also represented with a counter in the TopBar subtitle, without a Wizard.
The Wizard is more fitting for guide-through, more interactive flows. For simpler, more conventional flows- a simple counter will be more fitting.
| Steps number | Component |
|---|---|
| 3 Steps (1st active) |  |
| 4 Steps (3rd active) |  |
| 5 Steps (4th active) |  |
| 6 Steps (6th active) |  |
| State | Component |
|---|---|
| Active Border: $outlinePrimary Number: subtext, $textPrimary Step label: bodySmallBold, $textNuetralHeavy |  |
| Next (enabled) Border: $outlineDisabled Number: subtext, $textNuetralHeavy |  |
| Next (disabled) Border: $outlineDisabled Number: subtext, $textDisabled |  |
| Completed Border: $outlineDisabled Icon: $iconNuetral |  |
| Skipped Border: $outlineDanger Number: subtext, $textDangerLight |  |
| Error Border: $outlineDanger Icon: $iconDangerLight |  |
Spacing Between Steps
All steps are distributed evenly, leaving S5 margins.
Min spacing between steps: S3
Maximum Step Width
Current step’s text box shouldnt be larger than 40% of the screen’s width.
If the label will be larger it will get ellipsis.
e.g. : For 375px screen : 40% = 150px
Steps spacingAll steps are distributed evenly, leaving 180px margins.
Min spacing between steps: S9
In case the steps does not fit with text, only the current step title should show (like in Mobile)
Maximum step widthCurrent step’s text box shouldnt be larger than 20% of the screen’s width. (26% in portrait)
If the label will be larger it will get ellipsis.
e.g. : For 1112px screen : 20% = 222.4px
UsageCode Example
<Wizard activeIndex={0} onActiveIndexChanged={() => console.log('changed')}>
{_.map(items, item => (
return renderItem(item, index);
))}
</Wizard>
APIThis is the list of additional props for the component