components icon

Modal

A modal is a dialog that intentionally interrupts a user’s page experience. It’s often used for critical information or for actions that require review or completion prior to returning to the task flow or page.

Status

PublishedElement can be used in production
Adobe XD
Adobe XD Kit
In backlogElement is in backlog
PublishedElement can be used in production
Web Components
In backlogElement is in backlog
React
React
In backlogElement is in backlog
Angular
Angular
In backlogElement is in backlog
Documentation
PublishedElement can be used in production

What's new

Modals have been redesigned to reflect the updated color palette and font ramp and now incorporate accessible button behaviors. The dividers and extra styling were removed to simplify the experience and improve legibility. The modal background overlay design, which is built in to the engineering of the component, is now featured as a separate composite component in the UI kit.

When to use

ComponentUse case
ModalModals display important information that users need to acknowledge before moving ahead. They appear over the interface and block further interactions on the base page until an action is completed. Use in cases where a user’s action is critical.
NotificationA notification is a non-modal, passive dialog that keeps users informed without blocking access to the base page. The user can continue with the experience, regardless if the notification is still on screen. Use for interactions that aren’t critical.
Message barGlobal message bars display non-modal messages that inform users of updates or changes to system status. Contextual message bars are most often used in task flows and forms, providing users additional context or information about a task. Either can be used for critical system alerts or passive feedback.

Anatomy

The anatomy of a modal, labeled 1 through 4.

A modal contains four main elements. The header and button group are optional, whereas the message body and dismiss icon are required.

  1. Header: an optional headline.
  2. Body: message text.
  3. Dismiss icon: to close the modal.
  4. Call-to-action: optional button group.

Articles

Best practices for modal window design

Designers use modal windows to grab users’ attention.

Modal and non-modal dialogs

When and when not to use them.

Feedback