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

Users app with modal

Structure

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

Default modal

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

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: Modals should always have at least one primary button in the bottom right. If more buttons are needed, they should be in the default style.

Labels should be short but descriptive. 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

Confirmation modal

A confirmation modal asks users to verify if they would like to proceed with an action.

Title: The title states what action users are about to do. It should be short, descriptive and always start with a verb.

Examples: “Close the page”, “Change book location”.

Content: The content is short and states what will happen if users proceed with the action.

Button: A minimum of two buttons (one primary and one default) should be placed. The primary button should be located on the right-hand side while the close default button should be on the left-hand side of the modal. Below are the 3 main rules to follow for confirmation modal buttons:

  •  Labels summarize what will happen on click. So instead of labelling buttons “Confirm” and “Cancel” use the following format “Confirm {type}” and “Cancel {type}”.
  • In the case of a cancelling confirmation modal, buttons should be labelled as follow: “Cancel {type}” and “Keep {type]”.
  • If secondary actions are needed, buttons in the default style should be added next to the primary button.
Confirmation modal
Cancelling confirmation modal

Extra confirmation step: For dangerous operations, a modal in the danger style should be display and users should type the action they would like to perform before confirming. In the following example, users need to type “Reset ” before clicking on the reset button.

Extra confirmation step example

Information modal

The information modal inform users about an action they performed.

Title: The title states what happened after performing an action. It should be a short and descriptive statement.   

Content: The content is short and provides users with critical information about an action they performed. If there is an issue, a solution should be given in the content.

Button: A “Close” button in the primary style should be displayed on the right-hand side. If the modal inform users about an issue, the primary button should be the one allowing users to fix the issue.

Information modal with a close button
Information modal with a button to fix issue