Navigation
input
Floating
Display

Modal

Presents a short, secondary flow in a dialog that floats above the primary flow. The secondary flow must be dismissed or completed before the user can return to the primary flow.

Code component(s): Modal

Modals should be used sparingly because they restrict access to information and controls on the primary screen. Try to use the primary screen for flows and interactions whenever possible. Modals consist of a dialog (for secondary flow) and a backdrop (which covers and prevents the user from interacting with the primary flow). Use them for short flows that wouldn’t warrant a whole new screen and relate strongly to the content on the screens they appear above.

Anatomy

Options

The following options apply specifically to the dialog (the backdrop is not configurable and always fills the entire screen), but it’s recommended to use the existing dialog layout patterns below when possible. The dialog is always positioned in the center of the screen.

Click/tap outside to dismiss

If this is enabled, clicking or tapping outside the dialog (ie, on the backdrop) will dismiss the dialog

Background

The background color of the dialog can be adjusted, but we recommend using white

Content

You can provide any content you’d like, including interactive elements

Size

Specify if/how this component resizes horizontally and vertically. See the guidelines below for more details.

Patterns

While you can lay out your dialogs however you’d like, we recommend using one of the following layout patterns if possible. The dismiss button on the top right of these patterns can be optionally omitted if you provide an alternate way of completing or dismissing the modal.

One-Pane Dialog

A simple layout for modal experiences where you need to collect information from the user. You can swap out the header and footer for alternate versions (see Sub-components below), and you can customize the content. The width is fixed (ie, based on the viewport width), so plan for two columns of content that reflow to a single column on narrower screens. The default height is 674 px, but it can be overridden.

Sub-components

These components are designed to work with the patterns above, but can be used piecemeal if need be in your custom dialog designs.

Dialog Header

The header is meant to serve as a wayfinding and navigational element in your dialogs. There are four elements within the header: Dismiss button (optional as long as you provide another way of dismissing or completing the modal), title (required), subtitle (optional), and breadcrumb (optional). You may not simultaneously show a subtitle and breadcrumb. Each of these come with variants for small screen sizes (see the Figma library for details).

Dialog Footer

The footer is meant to be the primary navigational element between steps within your modal flow. Align elements to the end (for primary controls) and beginning (secondary controls)

Guidelines

Give your dialog margins

Always leave at least 16 px of space between each edge of the screen and the dialog

Content should be scrollable

When the content of your dialog is taller than the amount of vertical space available, allow the user to scroll the contents of your dialog

Related components