Steps
How to add and style 'Steps'.
Last updated
Was this helpful?
How to add and style 'Steps'.
Last updated
Was this helpful?
Steps can be used to visually represent a sequence of steps or stages in a process. They are commonly used in multi-step forms, onboarding processes, progress trackers, and any scenario where you want to guide the user through a series of tasks or stages.
Location in the Parts Library: Base Parts > Navigation > Steps
Steps provide:
Sequential representation by illustrating the progression through a process, making it clear which step the user is on and how many steps remain.
User guidance by breaking down complex processes into smaller, manageable steps, they guide users effectively, reducing cognitive load and potential confusion.
Progress indication by providing a visual indication of progress, helping users to understand their current position in the process, and encouraging them to complete it.
The Steps part (parent) houses several Step parts. Each step parts represents a step or stage in the process.
You can also change the colors of Steps in an active state, when focused, and on hover. These are done the same way for foreground and background color.
To change the color when the Step is being hovered, select the Step and open the 'Colors on Hover' editor on the right. Now you can set your preferred background and foreground color combination to signify that the Step is being hovered.
The 'Color on Focus' editor on the right refers to the color of the Step after it has been clicked, or if the user tabs to the Step.
The 'Color on Active' editor on the right refers to the color of the Step when it is active.
Steps can be horizontal or vertical, and the orientation can be adjusted according to device size.
To change the orientation, select the Steps Part. This will activate the property editing panel on the right. Then go to 'Orientation'.
Here is an example:
More information on Steps is coming soon.
Like many other parts, , , , , and can be applied using the property editor on the right, once the steps part has been selected.
Steps have more properties than most other parts. The background and foreground colors can be set.
The background colors of Steps can be a .
Customizing and formatting
