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

☝️ Prompt dialog

💁‍♀️ Share dialog

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

Polaris by Shopify