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.
Last updated
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.
Last updated
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.
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
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.
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
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 on modals should follow generic button guidelines. Users are likely to only read the title and the main CTA.
Try to use the same words in the button as the action mentioned in the modal title.
Title: Delete product mapping configuration
Button: Delete
The secondary action will most likely close the modal. Use common verbs like Cancel or Close.
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
