Modal

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

• Never use full screen modal.

• Always use the same space at the top and the bottom of a modal.

• Clicking outside the modal should always close it.

• Always use a darken overlay to make it more visible and give the impression to the user that he has to interact with the modal before doing something else.

Anatomy

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.