> For the complete documentation index, see [llms.txt](https://outdraw-academy.gitbook.io/ux-patterns/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://outdraw-academy.gitbook.io/ux-patterns/dialog.md).

# Dialog

{% embed url="<https://youtu.be/EWp65UQpB5g>" %}

## Characteristics

In many cases, we see modal dialogs that interrupt the flow, but dialogs can be both [modal and non-modal](/ux-patterns/popup.md#characteristics). 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](/ux-patterns/backdrop.md) is not needed. Dialogs usually have ‘[explicit dismiss](/ux-patterns/popup.md#characteristics)’, via a close button (x icon), a ‘cancel’ button.

## Categorization

Dialogs are a type of popup.

<figure><img src="/files/damBM3xIeBPUNlOV8T5f" alt=""><figcaption></figcaption></figure>

## Examples

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

{% tabs %}
{% tab title="🚨 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.

<figure><img src="/files/WrShIhJKGHQWopq5rKVy" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="✅ 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’).

<figure><img src="/files/LNKD4y0dQ4azYqHKOL1s" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="☝️ Prompt dialog" %}
☝️ **Prompt dialogs** are used to request user input by presenting a message and providing an input field or options to select.

<figure><img src="/files/O7r6tRnwTC3sdRxa6eaR" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="💁‍♀️ Share dialog" %}
💁‍♀️ **Share dialogs** allow users to share content or collaborate with others by inputting email addresses or selecting contacts.

<figure><img src="/files/8AHujovrm3xbUrkI3Rfg" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

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

{% tabs %}
{% tab title="Material Design" %}
[Dialog](https://m3.material.io/components/dialogs/overview) 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.

<figure><img src="/files/KwIAXQwaGE33kKHAEgMd" alt=""><figcaption><p>Material Design — Dialogs — 1. basic and 2. full-screen (Source: <a href="https://m3.material.io/">https://m3.material.io/</a>)</p></figcaption></figure>
{% endtab %}

{% tab title="🍎 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***](https://developer.apple.com/design/human-interface-guidelines/modality) page in the ‘patterns’ section. It talks about good practices of presenting content in a focused state.

<figure><img src="/files/0Yi7ae3tB8GzfyZ5LV2v" alt=""><figcaption><p>HIG — Modality (Source: <a href="https://developer.apple.com/">https://developer.apple.com/</a>)</p></figcaption></figure>
{% endtab %}

{% tab title="Polaris by Shopify" %}
[**Modal**](https://polaris.shopify.com/components/overlays/modal) requires a user to take action before they continue. According to our naming, 👉 we would call them **modal dialogs**.

<figure><img src="/files/IiyWJSfs6DjwEHso13Eh" alt=""><figcaption><p>Polaris by Shopify — Modal (Source: <a href="https://polaris.shopify.com/">https://polaris.shopify.com/</a>)</p></figcaption></figure>
{% endtab %}
{% endtabs %}