# Dialog

⁠A dialog appears in front of content to provide critical information or ask for a decision.


## Overview

### Features

Dialogs are modal, meaning they block interaction with the rest of the application or interface until the user addresses the dialog (e.g., by clicking a button, entering input, or closing it). This ensures the user focuses on the dialog's content before returning to the main workflow, and also ensures that keyboard and screen reader focus is kept within the dialog.

By default, the dialog will close when the user clicks the backdrop, but this behavior can be opted out from if the dialog needs to stay open until a flow is completed, for example.

### Variants

The dialog can be shown either as a regular dialog window or as a slide-out.

#### Regular

The regular window is positioned in the center of the screen.

#### Slide-out

The slide-out is positioned on the right-hand side and always takes up the full height of the viewport (minus padding). Width can be customized to suite various needs.

### Usage

Dialogs are powerful tools for focusing user attention, but their use should be deliberate to avoid disrupting the user experience.

### Do's and don'ts


## UX Guidelines

### Writing UX text for dialogs