Dialog

Dialogs are used to present information and prompt user to input data or make a decision. They usually contain text, form fields, select controls, and buttons.

Characteristics

In many cases, we see modal dialogs that interrupt the flow, but dialogs can be both modal and non-modal. If it’s a modal dialog, usually, a backdrop is displayed behind it to lock the user in the context visually.

For non-modal dialogs, the backdrop is not needed. Dialogs usually have ‘explicit dismiss’, via a close button (x icon), a ‘cancel’ button.

Categorization

Dialogs are a type of popup.

Examples

Dialogs are really versatile. There is a long list of use cases. I’ve selected the most common ones to share with you:

🚨 Alert dialog

🚨 Alert dialogs display critical messages or notifications to the user. They typically require the user to acknowledge the message by pressing a button like an ‘OK’, ‘Close’, or ‘I understand’ button.

✅ Confirmation dialog

✅ Confirmation dialogs are used to prompt the user to confirm or cancel an action before proceeding. Typically users can choose between affirmative action (such as ‘Save changes’) and negative action (such as ‘Don’t save’).

☝️ Prompt dialog

☝️ Prompt dialogs are used to request user input by presenting a message and providing an input field or options to select.

💁‍♀️ Share dialog

💁‍♀️ Share dialogs allow users to share content or collaborate with others by inputting email addresses or selecting contacts.

In addition to the examples we've analyzed, other popular patterns exist. From simple, like a login dialog, a signup dialog, or save and save as dialogs, to more complex, like an export dialog for a spreadsheet or a print dialog with all the necessary settings.

---

Dialogs in design systems

Material Design

Dialog is a modal (💡 no non-modal dialogs according to this DS) window that appears in front of app content to provide critical information or ask for a decision. There are two types of dialogs: basic and full-screen.

Material Design — Dialogs — 1. basic and 2. full-screen (Source: https://m3.material.io/)

🍎 Human Interface Guidelines

There is no strong differenciation of a ‘dialog’ element in Apple’s guidelines.

The assumption is that a Designer would select a correct layout from the ‘layouts and organization’ section and then include needed components from ‘selection and input’.

💡 In addition to components, we also can read the Modality page in the ‘patterns’ section. It talks about good practices of presenting content in a focused state.

HIG — Modality (Source: https://developer.apple.com/)

Polaris by Shopify

Modal requires a user to take action before they continue. According to our naming, 👉 we would call them modal dialogs.

Polaris by Shopify — Modal (Source: https://polaris.shopify.com/)