Design
Component checklist
React
Basics
Use modals to focus the user’s attention on an essential piece of information or action required for the further function of the platform.
When the modal appears
- It disables all app functionality and remains on the screen until the user confirms, dismisses, or performs the required action.
- It appears with an overlay covering the whole interface (except the modal).
- It has a close button in the top right corner.
Aim to use one modal at a time. Exceptionally, it's possible to stack multiple modals one over the other. However, this is not a recommended behavior.
In case you need to use multiple modals, make sure they're all the same size.
Modal variants
We differentiate three main types of modals: two simple modals—confirmative and informative—and an advanced modal that helps users to perform more complex actions.
Confirmation modal
The confirmation modal is the simplest modal that informs the user that something happened and it needs a user's attention.
The confirmation modal is used to confirm or dismiss actions. It's necessary to perform the proposed action to resolve the issue that triggered the modal. The required action could involve removing or deleting something, so you may use the “Delete” or “Remove” button. By dismissing the proposed action, the user gets returned to the screen or step that leads to opening the modal.
Informative modal
A simple modal that informs the user that something happened but usually, the user can only confirm they understand.
The informative modal informs the users about something that may have happened in the product without their knowledge. Usually, the only action the user can do is acknowledge that something changed. Therefore, the button usually says “I understand”.
Advanced modal
The advanced modal is used for more advanced actions, such as creating and editing multiple items in one place or adding or selecting a profile.
Anatomy
The modal is defined by its content and its action.
Content - The content could consist of a headline, a paragraph of text, or a combination of them both, and it can be supported by illustration.
Action - The action is always expressed with one CTA button. However, the main action can be complemented by a secondary and tertiary button.
Confirmation and Informative modals
The confirmation and informative modals consist of the following parts.
-
Headline
The headline provides guidance about what the modal is about. -
Content
The content area includes a description, banner, or a combination of visual elements that describe what needs to be confirmed. -
Action
The modal always has at least one CTA button. It can be complemented by a secondary action, for example, by canceling or checkbox element. -
Illustration
If there's an illustration, it's usually an empty state illustration that helps the users better understand the context of the message. -
Close button
Each modal has a close button as a default option for closing it. This button has the same function as a cancel button if it is available.
Advanced modal
The advanced modals consist of the following parts.
-
Header
The header area contains always a title and it can be supplemented by tabs, select, input, or another component. -
Content
The content area contains elements that the users need to interact with, for example, inputs, selects, lists of users, profiles, or labels. -
Actions
The modal always has at least one CTA button. It can be complemented by a secondary action, for example, by canceling or checkbox element. -
Close button
Each modal has a close button as a default option for closing it. This button has the same function as a cancel button if it is available.
Behavior
- The modal always appears over the whole interface, even over the main navigation, and it’s supported by an overlay to increase the focus on the modal.
- It’s always positioned in the middle of the screen.
- There's an animation when the modal appears. By default, it's 200ms dissolve, ease in and out effect.
- It's possible to stack multiple modals one over each other. However, this is an unrecommended behavior. In case you go with this option, the modal has to be the same size.
Modal is dismissed when
- Pressing outside of the dialogue
- Pressing the “Cancel” button
- Pressing close button
- Pressing the ESC key
- Pressing the Enter key if the “Cancel” button is focused
Modal is confirmed when
- Pressing the CTA button
- Pressing the Enter key if the CTA button is focused