Modal
A modal is an overlay that requires users to take an action or gives them urgent information.
On this page
How to use a modal
Modals are used to focus the user’s attention on a single task or an urgent piece of information. They can be used to confirm a user decision, notify the user of important information, or when an immediate response is required from the user.
When using modals:
- Use them sparingly as they are disruptive to the user’s experience
- Only give a single piece of information or require a single task to be completed. If you need the modal to do more than one thing, consider using a page instead
- Focus should automatically move to the modal container so it can be easily accessed by keyboard users
- Once the modal is closed, the focus state should return to the button that launched the modal
- The modal must be able to be closed by using the 'esc' key
- Focus should be limited to the modal meaning mouse and keyboard users should not be able to intereact with content outside of the modal while it is open
- When the modal is closed, focus should be returned to the control that opened the modal initially
- Provide context to screen reader users by announcing the modal using when it is opened
If you need to help users understand something on a page through supporting text, use a tooltip instead.
Types of modal
Dialog modal
The dialog modal can be used to confirm a user decision or to complete a task.
Copy guidelines
When using modals:
- Include descriptive headings that include the main message of the modal
- Keep content concise
When using buttons with modals, the button labels should make it easy to understand what will happen if the button is used.
If a user is cancelling something, like an order, make it clear how they can confirm the cancellation with your button labels.
It should be clear which button is confirmation and which is cancellation through your labels.