Modals

Overview

A dialog or a modal is a window overlaid on the primary window. It interrupts the user and requires an action. It disables the main content until the user explicitly interacts with the modal dialog. Windows under a modal dialog are inert: users cannot interact with content outside an active dialog window. Inert content outside an active dialog is visually obscured or screened. Because a dialog is highly disruptive to the user, it should be used sparingly, only when user’s interaction is required to continue.

Usage

Use when

• Content requires full attention. For important warnings, as a way to prevent or correct critical errors. Requesting a simple but critical action, like saving changes, necessary to the current process. Providing supplemental tasks required by the underlying page.

Don’t use when

• Providing non-essential information related to the underlying page.
• Interrupting high-stake processes such as checkout flows.
• Conveying brief thoughts or status changes. Instead, use an Prompts. Notification, or Message, depending on priority.
• Complex decision-making is needed by the user that requires additional sources of information unavailable in the modal.
• The modal content can be incorporated into the underlying page without complicating the page’s intent.