Modal

A modal displays content that requires user interaction in a layer that shows up on top of the current context. Modals block access to the rest of the page and force user interaction.

Guidelines

Use modal for the following purposes:

  • Users need to confirm an action before they can continue with the main workflow. Only use modals for important steps in a workflow. While standard actions can be marked as skipped by users, confirmation of destructive actions is mandatory and can never be skipped.

  • Add an item to a list by creating it or selecting it from a list (see Advanced Picker

  • Create a simple object with limited information using a maximum of 5 input fields. For complex forms, you should consider creating a dedicated page for that task.

  • Complete a task without losing the current context of the page. Users won't be able to interact with the page until the modal is closed.

Modals come in 3 sizes: SMALL, MEDIUM, and LARGE. SMALL should only be used for confirmation Modals.

Modals should:

  • Require that users take an action or cancel.

  • Close when users press the ✕ button, the Cancel button, the Esc key, or when users click or tap the overlay outside the modal.

  • Must have a primary action (the main purpose of the modal) and a secondary action (usually Cancel).

  • Scroll if the content is larger than the max height of the container. The footer is sticky during scrolling so that the actions are always accessible by the user. Scrolling should be indicated by adding an additional drop shadow on the footer.

Accessibility

  • When a modal opens, focus moves automatically to the modal container so it can be accessed by keyboard users

  • While the modal is open, a focus trap keyboard focus shouldn’t leave the modal

  • Users can close the modal with the keyboard by activating the ✕ button, the Cancel button if one is provided, or by pressing the Esc key

  • After a modal is closed, the focus returns to the button that opened it

Content

Modals are composed of:

  • A title

  • A description

  • One or several buttons

Remember modals are disruptive and can be perceived as aggressive, so use them only when necessary.

Avoid using questions in modals, they could add confusion.

Title

The title should be concise and clear and provide enough information for users to make an informed choice.

Capitalize the first word, no article, no punctuation

  • Generate new key

  • Report as critical

Description

The description adds any information that users need to know in order to make an informed choice between the two action states in the buttons below.

You're about to delete the entire product mapping configuration of the store. This cannot be undone.

Buttons

Buttons on modals should follow generic button guidelines. Users are likely to only read the title and the main CTA.

Primary action

Try to use the same words in the button as the action mentioned in the modal title.

Title: Delete product mapping configuration

Button: Delete

Secondary action

The secondary action will most likely close the modal. Use common verbs like Cancel or Close.

Specific patterns

Cancelation confirmation

Cancellation confirmation modals can be tricky as "cancel" is the ultimate secondary action in modals. Here, it has to be the primary action.

You can use "Cancel" as a primary action and clarify the secondary action as much as possible, "Keep [verb-ing]" for example. The main objective is that the difference between the two actions is absolutely clear.

Cancel + Keep editing

Cancel order + Keep order

Cancel order + Back to order

Last updated