Modal

Modals are temporary pop-ups that take the focus from the page or app. User input is to close the modal.

The Interactive Playground allows you to experiment with various modal styles and features. Once you get the results you want, copy the HTML or React code provided and paste it into your application.

A modal includes a number of elements. Shown below are the common components of a modal.

Modal with title, container, close button, content, buttons and transparent background pointed out

  • Title:

    The title of the modal contains information about its purpose and appears at the top of the container. Additional supporting text and actions appear inside the container.

  • Container:

    This is the boundary box around the modal. All of the other modal elements appear within the container.

  • Close Button:

    The close button (X), located in the upper right corner of the container, allows the user to dismiss the modal.

  • Content:

    The close button (X), located in the upper right corner of the container, allows the user to dismiss the modal.

  • Buttons (Optional):

    The close button (X), located in the upper right corner of the container, allows the user to dismiss the modal.

  • Transparent Background:

    The close button (X), located in the upper right corner of the container, allows the user to dismiss the modal.

There are different types of modal that vary by the amount of user interaction required to close the modal.

The Basic modal type includes actionable buttons. The user must select a button before being allowed to continue in the application.

An image of a basic modal which includes action buttons

This type of modal is used to tell the user something about the current state of the application. It can include guidance about what they need to do next, or report on what they just did. The user can dismiss the modal by clicking on the clear icon or the transparent background outside of the modal.

An image of an informational modal which does not include action buttons

Modals are used to convey the highest priority information and require the user take an action before continuing. They provide important information that the user must acknowledge.

Modals are similar in function to Toasts and Notifications. See the chart below comparing the three options, and for guidance on when each should be used.

Component Priority User Action
Toast Low priority Feedback (Alert) that does not interrupt the user flow. They should be used for confirmation in response to an action. Toasts are timed to disappear automatically without user involvement.
Notification Prominent priority Items that require immediate attention. They can be persistent or dismissible depending on the context. Dismissible notifications remain until closed by the user, or if the state that cause the notification is resolved. (Notification inline)
Modal Highest priority Modals block any further use of the app until the user acknowledges the message or resolves the issue.
An image of a Modal with a confirmation prompt

DO: Use modals for items that disrupt the user flow, such as confirmation prompts, or actions that must be completed before continuing.

An image of a modal displaying static content

DON'T: Do not display static content in a modal.

A modal that uses action verbs in its text prompt

DO: Use actionable verbs to concisely describe the functions of buttons.

A modal using terms that are too generic

DON'T: Do not use generic terms to describe button actions.

Modals should be sized to fit the content they contain. They must be large enough to display the content and actions clearly.

A modal is always centered horizontally and vertically on the page. A transparent overlay separates the page behind from the modal.

An image of a center-aligned modal

At its maximum height, a modal will cover the majority of the page with equal margins on top and bottom.

An image of a center-aligned modal at maximum height

Non-dismissible modals do not allow the user to close the modal without explicitly selecting one of the action buttons in the footer. Clicking on the background does nothing. They should also provide clear and actionable feedback to the user, such as displaying a success or error message when an action is completed.

An image of a modal with action buttons

A modal can also be set to Dismissible. A dismissible modal allows the user to close the modal by clicking anywhere outside the modal in addition to using the close icon.

An image of a modal with a close button in the top-right corner

If the content exceeds the maximum height of the container, add a scrollbar. Try to avoid scrolling wherever possible as walls of text are hard to read and harm the user experience. Modal content should never scroll horizontally. If more space is required, use a larger modal or reduce the amount of text.

An image of a modal with a scrollbar

Shown below are the specifications for the modal component.

An image of a modal with specifications in pixels

Accessibility requires that each item on the screen is reachable using the keyboard alone. The mouse is not always an option for some users.

Keyboard navigation employs the following shortcuts.

Keystrokes Interaction
Tab Moves to the next interactive element.
Shift + Tab Moves to the previous interactive element.
Enter or Spacebar Activates the selected button in the modal.
Esc Closes the modal. Same as a close button.

Components