Modal

Modal helps to focus the user’s attention on one task or piece of information via a window that sits on top of the page content.

Component checklist

Design

Up to date

React

Up to date

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.

Usage - Preview

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.

Usage - Type - Confirmation

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.

Usage - Type - Informative

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.

Usage - Type - Advanced

 

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.

Confirmation modal

Confirmation modal

Informative modal

Informative modal

  1. Headline
    The headline provides guidance about what the modal is about.
  2. Content
    The content area includes a description, banner, or a combination of visual elements that describe what needs to be confirmed.
  3. 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.
  4. Illustration
    If there's an illustration, it's usually an empty state illustration that helps the users better understand the context of the message.
  5. 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.

Advanced modal

Advanced modal

  1. Header
    The header area contains always a title and it can be supplemented by tabs, select, input, or another component.
  2. Content
    The content area contains elements that the users need to interact with, for example, inputs, selects, lists of users, profiles, or labels.
  3. 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.
  4. 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