Skip to main content

Modal

Last updated:
3/21/2023

A modal is a container that appears in front of, and disables, all page content. Modals contain text or other interactive elements that often prompt the user to take action before continuing.

View in Storybook

Modal title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet varius sapien. Nullam diam nisl, congue bibendum orci eu, fermentum consequat nulla. Nunc luctus placerat mauris, eu convallis ante sollicitudin in. Maecenas orci eros, placerat bibendum rhoncus a, tincidunt vitae lectus.

Modifiers

Required action

Use this modifier if the user must choose one of, at least, two actions in the modal to continue onward. This modifier does not have a close icon button. The user should still be able to exit the modal by clicking anywhere on the overlay background. Clicking on the overlay background is the equivalent of taking the “Cancel” action or a non-destructive action, usually the secondary action.

Modal title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet varius sapien. Nullam diam nisl, congue bibendum orci eu, fermentum consequat nulla. Nunc luctus placerat mauris, eu convallis ante sollicitudin in. Maecenas orci eros, placerat bibendum rhoncus a, tincidunt vitae lectus.

Single action

Use the single action modifier when the modal has only one action that the user can take. This modifier has a close icon button.

Modal title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet varius sapien. Nullam diam nisl, congue bibendum orci eu, fermentum consequat nulla. Nunc luctus placerat mauris, eu convallis ante sollicitudin in. Maecenas orci eros, placerat bibendum rhoncus a, tincidunt vitae lectus.

This modifier is only acceptable to use if something is covering the logo on the modal’s parent page. This is only approved for use on AEM, no other use case.

Modal title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet varius sapien. Nullam diam nisl, congue bibendum orci eu, fermentum consequat nulla. Nunc luctus placerat mauris, eu convallis ante sollicitudin in. Maecenas orci eros, placerat bibendum rhoncus a, tincidunt vitae lectus.
Positive actionCancel

Usage

Modals disrupt the user’s experience, which is why alternative options are preferable to using them.

Modals should be used for short, simple tasks that can be completed within the context of the current page. When used correctly, modals support efficient task completion or information delivery.

Use case examples

  • Disclaimers
  • Audience confirmations
  • Exit intent confirmations

Modal vs. pop-up

A modal disables its parent page. This forces the user to either select an action presented in the modal or close the modal. Modals are used to further a process or deliver contextual and necessary information to the user.

Pop-ups do not disable their parent page. Users can interact with either the page content or the pop-up. Pop-ups enhance the user’s experience and provide extra information or actions that are not necessary to continue the experience. Notifications, cookies alerts, and chat windows are all examples of pop-ups.

When to use modal vs. a page

If the proposed content for a modal is complex, long, or contains multiple steps, consider creating a page instead.

Always make sure that the modal allows the user to focus or make decisions based on the current page’s content.

Order of actions

Positive actions are generally the featured, or assertive, button style. Taking the positive action will usually advance the user within the workflow, for example accepting cookies or confirming a decision. Negative actions usually function as a cancel or redirect.

Positive actions come before negative actions in the order of possible modal actions. This allows the user to more easily scan their options.

The tab order also allows for the user to tab from the close icon button to the positive action, and then the negative action. Putting the positive action first will prevent the user from tabbing to two negative actions in a row. Users are also able to exit a modal by clicking anywhere on the overlay background.

Focus management

Focus management is an important part of creating usable modals. In general, the focus transfers from the modal trigger to the first focusable element in the modal. This will most likely be the close icon button.

The focus within the modal can change from the close icon button when the modal content demands it. This usually applies to semantic structures or form elements that would be difficult to understand out of context.

On close of the modal, the focus should return to the original modal trigger. Two exceptions to this rule are if the original trigger no longer exists or if the workflow makes sense to focus on a new element in the process.

Do:

  • Use a modal to deliver important information
  • Use a modal if an immediate response or action is required from the user
  • Use a modal to confirm a destructive action or to help a user avoid data loss
  • Keep modal content simple and direct
  • Use a modal for a single purpose or outcome
  • Put the positive action first
  • Make modal actions predictable

Don't:

  • Use a modal for complex or multi-step processes
  • Put the negative action first
  • Use more than one assertive button style
  • Nest modals
  • Overload the modal’s purpose
  • Use the logo modifier for any other platform other than AEM or for the specified use case
  • Remove the modal’s background overlay

Content guidelines

Because modals are disruptive to the user’s experience, it is important to keep their content as clear as possible. The user needs to know exactly why the modal has appeared and what their options for proceeding are.

If you’re asking the user a question within the modal, make sure the modal's actions answer that question clearly.

Do:

  • Write in sentence case
  • Title modals clearly and succinctly
    • The title should describe the purpose of the modal
  • Use unambiguous action text
  • Add “Yes,” or “No,” to action text if necessary
    • Example: “Yes, I am a health care professional” or “No, I am not a health care professional”
  • Make sure that the actions are distinct and separate from each other
    • Ideally, they should represent opposing choices, such as “Accept” or “Decline”
  • Make sure action text is answering the question within the modal text — if there is a question present

Don't:

  • Use marketing content in place of a modal title
  • Add so much content that the user will have to scroll
  • Add unnecessary content

User research

Key takeaways

  • Always provide a visible way to exit the modal
  • Make sure that the modal has a narrowly defined purpose
  • Make sure action text is specific, understandable, and distinct from the other actions
  • Users generally scan modals in a Z-pattern
  • Action order and alignment does not matter as much as consistency does
  • Avoid using modals during high stakes workflows, such as a checkout process
  • Don’t use a modal when there’s another option
  • Don’t use modals for information that isn’t essential to the current experience
  • Don’t ask the user to make a decision that requires information not included in the modal
    • The user should have everything they need within the modal to complete the task

No sources

Accessibility

This component passes AAA WCAG standards. However, changes made by the content owner or implementer could impact accessibility compliance. Be sure to follow code standards and content guidelines to ensure that this component is fully accessible.

For more information, see the WAI-ARIA Authoring Practices for modals and Deque’s screen reader keyboard shortcuts and gestures documentation.