Steps
Documentation and examples for showing step indicator or navigation used to indicate completion status of an activity.
Basic Example
The base step component is built with flexbox of lines to display a paragraph like content.
Active
An active state indicator which is the current step currently in progress of a wizard.
Disabled State
A disabled state are those steps which cannot be accessed while the current step is not yet completed.
Completed State
A complete state indicator are those steps that are already completed.
Smaller Indicator
A step indicator with smaller title perfect for using inside a smaller element like cards and widgets.
Larger Indicator
A step indicator with bigger title perfect to use in a full page layout.
Justified
A step indicator that expand the width to fill all available space of a parent element having equal width in every step item.
Using Icon
A step indicator that uses icon instead of a step number indicator.
With Description
A step indicator with some brief description to every steps.
Vertical
A step indicator that align vertically perfect for larger list of steps.