Modal component

A modal is a container triggered by a user’s action to give critical information about the action, to ask the user to take a decision or to add content.

Users app with modal

Structure

A modal is a non-dismissible window with a header, content and, at least, one button to close the modal.

Title

The title should be a short, descriptive and clear statement.

Default modal

Content

The content gives users information about the action they performed and what will happen if they proceed with the action. Below are the 3 main rules to follow while writing modal content: 

  • Key information should be bold.
  • Give a solution to users if there is an issue.
  • Content should be short. To add information while avoiding scrolling, a “More info” button can be added.

For modals linked to bulk actions, users should see:

  • A summary (top left) showing how many items weren’t successful versus how many were.
  • A scrollable list with details information about each item involved in the action.
Bulk modal example

Buttons

Since modals are not dismissible, they should always have at least one primary button in the bottom right to close the modal and it shall be labelled “Close”. If more buttons are needed, they should be in the default style with the cancel action on the left.

Labels should be short but descriptive.

Modal with one close button
Modal with 2 buttons
Modal with 3 buttons

If the modal states an issue, provide a button to allow users to fix the issue and label it accordingly.

Modal with a button to fix issue

Choosing a primary button

The primary button should translate what action has been attended by the user. If no explicit action triggers a modal, the primary button should be the safer choice. For instance, the “Close the page” modal appears when users click on a navigation icon without closing an edit/create page. In here, no explicit action to close the page has been performed by the user therefore, the “Keep editing”  button (safer choice) is the primary button.

Size & location

Modals should appear at the upper half of the screen and they shouldn’t take more than 50% of the screen.

Behavior

When a modal appears, it interrupts a user’s current task to catch its full attention.  

Since modals display important information, they aren’t dismissable, users consciously dismiss them by clicking on the close/cancel button or choosing another action.

Style

Modals can have 4 different states: Default, error, success and danger.

Default modal
Error modal
Success modal
Danger modal

Specific modals

Add quick content UX pattern

Also referred to as: Add modal; Add content modal; Quick add;

The “Add content” modal is used to add content to a specific section.
This modal acts as a confirmation window for bulk actions.
A confirmation modal is a type of modal that asks users to verify if they would like to proceed with an action.
The information modal is a modal that gives users critical information about an action they performed.
This modal is a confirmation modal that prevents users from leaving a create/edit record page without saving changes.