- Contents:
- Modals are used to present content that requires the user’s immediate attention.
- Use modals judiciously. They are interruptive and can quickly lead to a frustrating user experience.
Types
Alerts
Info modal
Confirmation dialog
Overlay
Image gallery
Guidelines
- A modal should never be obscured by other elements or the edge of the screen.
- A modal should remain in focus until an action is taken.
Click the prototype to interact with it
- A modal should be launched or activated by the user.
Click the prototype to interact with it
- For less urgent items, use less intrusive content modules such as accordions to reveal hidden content.
- Avoid opening a modal from within another modal.
Click the prototype above to interact with it
- Allow a modal to be dismissed by clicking a “close” or “cancel” button, or by using the system back button on Android.
Click the prototype to interact with it
Behavior
When using a transactional modal, use these guidelines to decide what button labels to use for exit/continue functionality:
| Scenario | Exit label | Proceed label |
|---|---|---|
| Informational | Close (or close icon) | |
| Transactional – make a selection with another step to submit | Cancel | Done |
| Transactional – refreshes results on page. E.g, filtering search results | Cancel | Apply |
| Transactional – submits information to another page | Cancel | Primary CTA (for covering submit action). E.g, “Book”, “Search” |
| Transactional – returns to the previous step in a process | Back | Next |
Accessibility
As you use and customize this element, ensure it continues to follow the Accessibility 101 guidelines.
See Also
Further Reading
Related Elements
Related Components
Version History
| Date/Time of Change | Who Made the Change | Change Details |
|---|---|---|
| May. 03 2017 9:26pm | Initial content entry. |