- 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. |