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 Alert. Toast, 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.

Types

Single Button

Two Buttons

Three Buttons

Icon in the Header

Dialog with Destructive Action

Buttons with destructive actions should be red:

Stacked Full-Width Button

Stacked Full-Width with a Single Button

Modal with Inputs