Mesa Design System White Logo

Modals appear as a temporary overlay on top of a webpage’s content. They are often used to display additional information, notifications, or interactive components without requiring users to navigate to another website.

Overview

When to use

  • To display additional information to users without navigating away from the website
  • For important information like alerts or urgent notifications that require immediate attention
  • To confirm what will happen before users take an action

 

Best practices

Use sparingly

Modals are highly disruptive and may overwhelm users.

 

Make exits clear

Make sure it's clear to users how they can close the modal.

Behaviors

Modals usually appear as an overlay on the user interface. When this happens, users will not be able to interact with other content on the page until the user has completed the tasks or closed the modal window. 

When a modal is activated, it typically displays as an overlay that covers the rest of the content. This indicates that the interactions outside the modal are disabled until it is closed by the user.

References

U.S. Web Design System (USWDS)

What is a Modal and when should I use one?HubSpot

ModalsCarbon Design System

Best Practices for Modal Window DesignUXPlanet