Skip to main content


Modal dialogs interrupt workflows and require user interaction.

Modal Example


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.


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.


Single Button

Single Buttton Modal

Two Buttons

Two Butttons Modal

Three Buttons

Three Butttons Modal

Icon in the Header

Icon in the Header

Dialog with Destructive Action

Buttons with destructive actions should be red:


Modals with Destructive Action

Stacked Full-Width Button

Stacked Full-Width Button

Stacked Full-Width with a Single Button

Stacked Full-Width with a Single Button

Modal with Inputs

What's changed
Date Version Notes Contributors
01/16/2023 1.0.0 New component added. D. Bedick, E. Bohn, N. Cadsawan, E. Gunther, I. Perez, J. A. Provin Silva, L. Saenz, C. Starbird, R. Stillwell, S. Kaukonen, N. Byati