Modal
A Modal is used to interrupt the workflow, it's a "container" where other components can be applied, like Form, Select, Input, etc.
If it's necessary for the person to only confirm some action, the Dialog should be used.
Modal composition
Title
The title should be short and preferably have a verb that clearly describes the result of the action done through the Modal.
Description
Write short and relevant descriptions for the fulfillment of the proposed task in the Modal.
Actions
- Relate the action verbs to the title to create a double confirmation of the action in an organic way
- Offer an option to "Cancel" the action
- If you need to relate the
Modalto external documentation, use a link in the description
Internal scroll
Modals with large contents may present a scroll bar in the area between the title and the actions, when the content is greater than the height of the browser screen, allowing the person to scroll down and find the rest of the information.
The header and the area intended for the actions of the component are always visible.
Use cases
Transactional Modal
Used to obtain additional information in a given flow or as a complement to an action or a task.
Onboarding Modal
Can be used for presentation or step-by-step tutorials of new product features.
Controls
The navigation between the steps of the Onboarding should be done exclusively by the "Previous" and "Next" buttons, because the step indicators aren't clickable.
In order to close the Modal, you should use a tertiary button with the "Skip" option, which will cause the Modal to close.
The Modal can also be closed when a person goes through all the Onboarding steps.
Illustration
The Onboarding Modal should have one illustration per step. The illustration must be in format 600x200 pixels, SVG, and we recommend using a background color.
Steps
Onboarding Modals can have a maximum of 5 steps. If your Onboarding Modal contains only 1 step, we recommend not displaying the steps indicator.
The steps indicators are not clickable