Steps
The Steps allow navigation between steps through clicks on items or they can serve as a reference, informing where the user is, where he is going and how far it takes to get there - in the latter case, without navigation per click.
There are two types of Steps: Vertical or Horizontal.
Vertical
They are used to break a flow into smaller steps. They are applied to the body of the page where the flow will be available.
Because it has a vertical layout, there is no limit to the number of steps, but the user's experience within the flow must be taken into account.
Horizontal
Like vertical steps, horizontal steps are also used to break a flow into smaller steps.
The application must be at the top of the page, contextualizing right at the beginning of the navigation.
To have a horizontal layout it is necessary to check if there are other elements beside it and how it will behave in different screen resolutions.
Good habits
- Not to be used for conventional navigation. For this, use the Tabs component
- Use clear labels for each step of progress; they are crucial to inform where the user is
- Identify what the steps may require from the user. For example: content step, configuration, security, among others
- Use a maximum of 2 words on labels
Feedback
To report a problem, request new icons, request new component use cases, ask questions, share suggestions, or report bugs, get in touch through our Slack channel #tangram-design-system.