A modal is an overlay that requires users to take an action or gives them urgent information.

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

  • Interactive demo - Sainsbury's

Dialog modal

The dialog modal can be used to confirm a user decision or to complete a task.

  • Interactive demo - Sainsbury's

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.

Add to basket
I want this!

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.

Keep order
Cancel order

Get in touch

Our team can answer any questions about using modals or give you a helping hand with your next project.

Was this page helpful?

Select a theme to demo: