Modal
A modal is an overlay that requires users to take an action or gives them urgent information.
How to use modals
Modals are used to focus the user’s attention on a single task or an urgent piece of information. As modals are disruptive to the user's experience, they should be used sparingly.
Modals should only be used to:
- Request information that is preventing the user from progressing through their journey
- Notify the user of important information relating to their journey like system errors
- Confirm user actions and explaining the potential consequences of those actions
When using modals:
- Use them sparingly as they are disruptive to the user’s experience
- Both the title and the button should reflect the action that will occur
- Provide context to screen reader users by announcing the modal using when it is opened
- 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.
Don't use modals for non-essential information or when the user requires additional information to make a decision that is unavailable in the modal itself.
Elements of a modal
The modal is composed of a header, body and footer element. Components (eg. data table, form, progress indicator) can occupy the full width of the modal.
Header
Includes a title, optional label and the close icon.
Body
Contains the information or the controls needed to complete the modal’s task. It can include message text and components.
Footer
Contains the main actions needed to complete or cancel the dialog task. Button groupings can change based on modal variant.
Content 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.