Standard dialog

The header contains the dialog toolbar. In the default layout, the toolbar is opaque and displays the title. In the layouts with a hero image or multiple columns, the toolbar is transparent and the title and subtitle move into the content area instead.

Required. The title orients the user to the purpose of the dialog, such as what they need to decide, learn, or acknowledge.

• Use sentence case
• No ending punctuation
• Keep to 1 line
• End with a question mark when the title is phrased as a question

Optional. The subtitle adds context that helps users understand what's happening and what to do next. For educational and informational dialogs, focus on the key benefit or outcome instead of the mechanics.

• Use sentence case
• Use ending punctuation
• Keep to 1–3 sentences
• Don't repeat the title

A consistent, fixed container for the dialog's actions. The primary action is aligned along the trailing edge of the container followed by any secondary or tertiary actions.

The primary action completes the task or advances to the next step. The secondary action provides an alternative action or cancels it. The tertiary action provides an additional action. Strong button labels clearly indicate each action and outcome.

Note: Consider using a text link within the body copy before adding a third button.

• Use sentence case
• Keep to 1-3 words
• Start with an action verb

See Buttons for more details on visual hierarchy and writing guidance.

The dialog container is an elevated, modal surface bounding all of its content and actions.

The scrim is a semi-transparent overlay that blocks interactions with the primary surface and visually separates the dialog from the page content below.

All standard dialogs are modal, so the scrim is automatically applied. Learn more about scrim tokens.

Dialogs use a scale and fade transition when entering and exiting. The dialog rests in the center on large screens and along the bottom on smaller screens.

Content that flows beyond the container’s bounds will scroll within the content area. The header and footer are pinned above the content area and all content scrolls beneath.

Keep scrolling within dialogs to a minimum. Navigate to a new page if content extends far beyond the bounds of the dialog container.

Dialogs are either completed, canceled, or closed. Pressing the escape key on a keyboard or interacting with the scrim registers as a cancel or close button.

Dialog footer buttons stack vertically when the footer is too narrow.

Keep button titles short and only show buttons that aid in completing the action or canceling the task. Don’t add links to the footer. Instead, add links to the body content or provide the links on the primary page surface.

The title and subtitle wrap to a new line when wider than the available space. The width of the text box leaves room for the close button and text doesn’t extend below the button.

The close button aligns in the center to the top line of the title.

The content within the dialog is replaced when transitioning to a new view. This also applies when navigating back.

If additional content renders into a view, like an error message, the container can animate to adjust for the additional height up to its maximum relative height.

Standard dialogs are aligned to the bottom on smaller screens to improve ergonomics of the footer buttons. They extend to the maximum screen height when the content requires it.