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
The title states the outcome of an action and should explain clearly what a user is about to do, whether it's deleting a shop for a seller or a mapping configuration for an operator.
The title should be concise and clear and provide enough information for sellers and operators to make an informed choice. You can drop the a/an article.
Remember modals are disruptive and can be perceived as aggressive, so use them when necessary.
Generate new key
Report as critical
Are you sure you want to generate a new key?
Delete
The description adds any valuable information that Mirakl users need to know in order to make an informed choice between the two action states in the buttons below. No questions.
You're about to delete the entire product mapping configuration of the store. This cannot be undone.
Are you sure you want to delete the entire product mapping configuration of the store?
Buttons on modals should follow generic button guidelines.
Try to use the same language in the button as the action mentioned in the modal title.
Title: Delete product mapping configuration
Button: Delete
Title: Delete product mapping configuration
Button: Confirm
Make the microcopy as precise as possible. Bear in mind users will potentially only read the title and the primary button of the modal.
The secondary action will most likely close the modal. Use common actions 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 indeed 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
