General guidelines
Modals should be used to provide specific information that is critical to continue a process. Use of modal moves the interface into a temporary mode requiring a user’s action.
The modal should be always displayed on top of every other component as the need is to disable the main content behind, emphasizing this temporary mode. Somehow forcing the user to focus on the modal content.
Modal can be used when fragmenting a complex workflow into simpler steps.
Use modals when preventing the user of a critical action.
Best practices
Always use a darken overlay and the same space at the top and the bottom of a modal.
Don’t let the user feel he can interact with the actions in the background.
Clicking outside of the modal should close it.
Never use full screen modal.
Visual guidelines
Modal examples can vary depending on your user’s needs, but should always at least encapsulate a title and a cross to close it.
Context and need can vary and modal can encapsulate a number of elements, such as text inputs, links, buttons, steppers, texts, etc. For more detailed information on the construction of these atomic elements, please consult the corresponding pages.
Code & Design assets
Request code and design assets for creating user interfaces.
Can I contribute to the System?
Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.