Dialogs

What They Are

Like interactive pop-ups, dialogs are modal UI components. When a dialog is displayed, the user cannot interact with the view below and a scrim is displayed beneath the dialog.

Unlike interactive pop-ups, however, dialogs do not generally contain an interactive content area. Dialogs consist of a title, some body text and buttons. Navigation between different levels of content is not possible with dialogs. The title is shown using large text and the body text is shown using smaller text.

As with interactive pop-ups, the buttons may appear side-by-side or may be stacked vertically. Buttons handling navigation are shown side-by-side, while action buttons should be stacked vertically.

1. Title
2. Body text
3. Buttons

When To Use

Use dialogs to prompt the user to perform simple and quick interactions, such as to confirm an action or to inform the user. Use dialogs when your app requires confirmation or disambiguation from the user. For more complex interaction, or to display interactive content, consider using an interactive pop-up.

As dialog components are modal elements, they are disruptive to the user's flow, and so should only be used when it is important to interrupt the user's attention. To notify the user in a more discrete fashion, consider using a notification.