Components

Dialog

A dialog is a “conversation” between the system and the user. It is prompted when the system needs input from the user or to give the user urgent information concerning their current workflow.

Usage

A dialog is purposefully interruptive, as it disables all functionality on the site while waiting for the user to take action. With this in mind, dialogs should be used sparingly.

When to use what

Use dialogs to present critical information that requires a clear decision or acknowledgement. They can also be used to inform users about errors that block normal site functionality.

Dialog

Dialogs block app usage until the user takes a dialog action or exits the dialog (if available).

Dialogs have the highest priority.

Snackbar

A snackbar stays visible briefly or until dismissed, depending on the context. It appears at the bottom of the screen and is used for prominent or medium-priority messaging that doesn’t require a dialog.

Tooltip

Simple tooltips disappear automatically — on hover out for desktop, or tapping outside on mobile — and are intended for low-priority, supplementary information.

Dialog types

There are two different types of dialogs. The sizes of dialogs adapt to different screen sizes.

Dialogs are themed depending on business area and on the information being conveyed.
Follow the guidelines for theming.

Alert

Alert dialogs have a single button for acknowledgement. Error messages are displayed as alerts.

Confirmation

Confirmation dialogs have two buttons: one to confirm and one to dismiss.

Formatting

Anatomy

Dialogs contain some required elements and some optional elements.

A. Icon (optional)
B. Title
C. Message (optional)
D. Container
E. Dismissive action (optional)
F. Supportive action (optional)
G. Primary action

Title

A dialog’s purpose should be communicated by its title and button label.

Titles should:

This dialog title poses a specific question, concisely explains what’s involved in the request, and provides clear actions.

Don’t use dialog titles that pose an unclear question.

Buttons

Confirmation dialogs use two buttons, arranged differently depending on screen size.
Alert dialogs use a single button for acknowledgement.

Side-by-side

The recommended arrangement of buttons in dialogs is to place them side-by-side.

Confirming actions appear to the far right.

Stacked

Stacked buttons accommodate longer button labels.

Confirming actions appear above dismissive actions.

Solo

Alert dialogs only have a single button.

Button labels

Dialogs should be closed through a clear user action. Each action should clearly communicate the outcome.

The action “Place bet” indicates the outcome of the decision.

Don’t use action text that fails to indicate what the selection will do. “Cancel” and “Place bet” better indicate what will occur in this dialog.

Button choices

To minimize confusion, make sure to only present choices that are clear to users.

Make sure to present choices that are clear to the user.

Avoid unclear choices. "Close" is not meaningful here and conflicts with the dismissive action. Use a single dismissive action like "Ok" instead in this example.

Button placement

To avoid frustration and confusion, always place dismissive actions to the left of confirming actions (if the buttons are placed side-by-side). If buttons are stacked, always place the dismissive action below.

Place dismissive actions to the left of confirming actions.

Don’t place dismissive actions to the right of confirming actions.

Elevation

Dialogs are displayed at 24dp elevation and display a shadow. They appear above other content and typically have a scrim below them that covers all content.

Behavior

Scaling and adaptation

Dialogs adapt their layout based on screen size.

On smaller screens, actions are stacked vertically. On larger screens, they are arranged horizontally.
Dialogs should not exceed 560 px in width on smaller screens and 640 px on larger screens.

If the content exceeds the available space, the content area becomes scrollable while the header and footer remain fixed.

Smaller screens

Dialogs can reach a maximum width of 560 px on smaller screens.

Dialogs maintain a minimum distance of 24 px to each side of the screen.

Larger screens

Desktop dialogs can reach a maximum width of 640 px on large screens.

Scrollable content

Dialogs should avoid excessive scrolling whenever possible.

If the content exceeds the available space, only the content area becomes scrollable, while the header and footer remain fixed to preserve context and access to actions. Dialogs scroll independently of the background, which remains static.

Scrollable body with fixed header/footer

Actions

Types of actions

Dialogs present a distinct choice to users through their title, content, and available actions. Dialog actions are represented as buttons and allow users to resolve what triggered the dialog by confirming, dismissing, or acknowledging something.

There are three types of dialog actions:

Confirming actions

Confirming actions confirm a proposed action. These actions can involve removing something, such as “Delete” or “Remove,” if it suits the context. They are placed to the right of dismissive actions, if the actions are placed side by side, or at the top, if they are stacked.

Dismissive actions

Dismissive actions dismiss a proposed action and return the user to the originating screen or step. They are placed to the left of confirming actions, if the actions are placed side by side, or at the bottom, if they are stacked.

Acknowledgement actions

When user acknowledgement is required to proceed, a single action may be presented, such as “OK”.

Number of actions

Dialogs should contain a maximum of two actions.

If a single action is provided, it must be an acknowledgement action. If two actions are provided, one should be a confirming action, and the other a dismissing action. Providing a third action such as “Learn more” is not recommended as it navigates the user away from the dialog, leaving the dialog task unfinished.

If more extensive information is needed, provide it prior to entering the dialog or after the dialog has been resolved.

Modify

Error message

When an error message needs to be communicated to the user, an alert is used together with an icon in red.