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.

Interactive demo

This demo lets you preview the dialog component and its variations. Each tab displays a different type of dialog.

Usage

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

Principles

Focused

Dialogs focus user attention to ensure their content is addressed.

Direct

Dialogs should be direct in communicating information and dedicated to completing a task.

Helpful

Dialogs should appear in response to a user task or an action, with relevant or contextual information.

When to use what

Dialogs should be used to convey critical information that requires a user to make a specific decision or acknowledgement. Dialogs can also be used to inform the user about an error that blocks the site's normal operation.

Dialog

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

Dialogs have the highest priority.

Toast

A toast remains visible until dismissed by the user or if certain conditions are met for the information to be displayed as a dialog.

Toasters have prominent, medium priority and are shown at the bottom of the screen.

Context dialog

Contextual dialogs exist in a simple and an advanced version. The advanced version requires a user to take action to disappear but do not block interactions on the rest of the site. The simple version disappears if the user interacts with another part of the page and does not require a choice to be made.

Advanced contextual dialogs has prominent, medium, priority while the simple version has low priority.

Dialog types

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

The dialogs are themed depending on the business area and on the information being conveyed. Follow the guidelines for theming under the “Modify” section.

Alert

Alert dialogs have a single button for acknowledgement.

Error messages are displayed as alerts and are themed according to the modify section.

Confirmation

Confirmation dialogs have two buttons.One button for confirmation and one for dismission.

Buttons can be side-by-side (recommended) or stacked.

Formatting

Anatomy

Dialogs contain several required elements and one optional element.

1. Alert
   a. Icon
   b. Title
   c. Message (optional)
   d. Button
   

2. Confirmation (buttons side-by-side)
   a. Icon
   b. Title
   c. Message (optional)
   d. Low-emphasis button
   e. High-emphasis button
   

3. Confirmation (buttons stacked)
   a. Icon
   b. Title
   c. Message (optional)
   d. Low-emphasis button
   e. High-emphasis button
   

Title

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

Titles should:

• Contain a brief, clear statement or question
• Avoid apologies (“Sorry for the interruption”), alarm (“Warning!”), or ambiguity (“Are you sure?”)

Do

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

Don't

Don't use dialog titles that pose an ambiguous question.

Buttons

Confirmation dialogs have two buttons that can be arranged in two different ways depending on the length of the button labels. Alert dialogs only have a single button.

Side-by-side

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

Confirming actions appear to the right of dismissive actions.

Stacked

Stacked buttons accommodate longer button labels.

Confirming actions appear below dismissive actions.

Solo

Alert dialogs only have a single button.

Button labels

To close a dialog, one of its actions must be selected. Make sure that the actions indicate the outcome of the decision.

Do

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

Don't

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 the users.

Do

Make sure to present choices are clear to the user.

Don't

Avoid presenting users with unclear choices. “Cancel” doesn't make sense in this context and in relation to the high-emphasis button.

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 on top of the confirming action.

Do

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

When scaling layouts for larger screens, a dialog’s visual presentation is adjusted.

The width of the dialog should not exceed 560 px. Dialogs should always maintain a distance of24 px to each side of the screen (top, bottom, left and right).

If the content of a dialog exceeds available space, the content becomes scrollable .

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

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

Scrollable content

Most dialog content should avoid scrolling. When scrolling is required a button appears that scrolls the user to the end of the dialog. The “Scroll to end” button is replaced with standard buttons when the user reaches the end of the dialog. Users also have the option to scroll to the end themselves.

Dialogs don’t scroll with elements outside of the dialog, such as the background.

Start

The “scroll to the end” button takes the user to the end of the content.

End

When the user clicks the “Scroll to the end” button, or scrolls by himself/herself, the button is replaced with a standard button setup.

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 resolve what triggered the dialog by confirming, dismissing or acknowledging something.

There are three types of dialog actions:

1Confirming 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 bottom, if they are stacked.

2Dismissive 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 top, if they are stacked.

3Acknowledgement 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

Color theme

Confirmation dialogs are themed as they appear in a context of each business area, Sport & Casino and Tur.

1. Sport & Casino
2. Tur

Error message

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