Use a modal as a pop-up interface that overlays the main content, temporarily disabling interaction with the rest of the page.
Modals have an optional fixed button area at the bottom that floats over the modal content.
Usage
Use a modal when you need to capture the user's attention for a critical decision or a short self contained task (e.g. form input, quick settings, login).
Use a modal when you need to present additional details without navigating away (e.g. providing extra context).
Never allow the user to activate a new modal when a modal is already active. When the user closes the modal, immediately return them to the screen where they activated the modal to avoid disorientation.
If the modal contains a multi step journey, use the ‘stepped‘ variant to allow the user to easily move backwards and forwards inside the journey.
Where appropriate, include an alert to warn the user that their inputted data will be lost when closing a modal mid task.
Writing a modal heading
The heading should be two lines at most and describe the action or purpose of the modal.
Use action orientated language if the modal requires a user decision, align the heading with the action being taken.
- Delete this meter reading? (for a confirmation modal)
- We’ve made some changes to our policy (for an informational modal)
- Create a home profile (for a form modal)
- Go Beyond (Unclear what the action is)
- Warning! (Doesn’t explain what’s happening)
- Important Message (Too generic)
Available platforms
|
Platform |
Available |
|---|---|
|
Figma |
v1+ |
|
Web (@ovotech/element) |
v1+ |
|
App (@ovotech/element-native) |
❌ |
Related
External links
Modal & Nonmodal Dialogs: When (& When Not) to Use Them