Skip to main content

Modals

Modal dialogs interrupt workflows and require user interaction.

Overview

Modals are overlaid on the primary environment the user is in. They interrupt the user, informing about processes, and in most cases requiring a user action. Modals overlay on the main content until the user takes the recommended action or interacts with the modal.

When modals are used within the context of other interfaces these are inert: users cannot interact with content outside an active dialog. Inert content outside an active dialog should be visually obscured or displaced beyond reach to direct the users’ attention to the dialog.

Because dialogs are highly disruptive to the user experience, they should be used sparingly, only when user’s interaction is required to continue.

Usage

Use when

  • Showing errors that block an app’s normal operation.
  • Critical information that requires a specific user task, decision, or acknowledgement is needed.
  • Needing far interaction for large and x-large dialogs.

Don’t use when

  • Scrollable, complex interaction dialogs.
  • Providing non-essential information related to the underlying page. Use plain txt messages instead.

Types

Example Type
Dialog Small Small Dialog
Dialog Medium Medium Dialog
Dialog Large Large Dialog
Dialog Extra Large X-Large Dialog
Last updated November 27, 2023.