# Dialog

A dialog is a customizable [view](https://docs.appfarm.io/reference/apps/ui/views) that is placed over a standard view and often used for user confirmation or data entry. Dialogs can be opened and closed using the Open dialog and Close dialog action nodes respectively.

{% hint style="info" %}
**Example**

A dialog example is available in our [Showroom.](https://showroom.appfarm.app/ui-components/dialog) You can view the demo, as well as access the setup in Appfarm Create. Don't have access? [Register](https://showroom.appfarm.app/sign-up).
{% endhint %}

## General properties

<table><thead><tr><th width="240">Property</th><th>Description</th></tr></thead><tbody><tr><td><strong>Dialog Type</strong></td><td><p>The way the dialog should be displayed. The options are:</p><ul><li><code>Modal</code>: Display a modal window in the middle of the screen. The rest of the app is covered by a backdrop and interactions outside of the dialog are blocked.</li><li><code>Fullscreen</code>: Fill the entire screen. The height and width properties of the dialog are ignored. Usually only recommended for Small and Extra Small devices. </li><li><code>Responsive</code>: Adapt according to the client screen size. Modal will be applied by Large and Medium devices, while Fullscreen will be applied on Small and Extra Small devices.</li></ul></td></tr><tr><td><strong>Close on Click Outside</strong></td><td>When selected the user can click on the backdrop outside of the dialog, or press the <code>Esc</code> key on their keyboard, to close the dialog.</td></tr></tbody></table>

## App bar

App bar properties for dialogs are the same as for [views](https://docs.appfarm.io/reference/apps/ui/views/..#app-bar).

## Event handlers

<table><thead><tr><th width="244">Property</th><th>Description</th></tr></thead><tbody><tr><td><strong>On Dialog Open</strong></td><td>Triggered once the dialog has been opened and is visible.</td></tr><tr><td><strong>On Dialog Close</strong></td><td>Triggered after the dialog has been closed and is no longer visible. This will be triggered if <strong>Close on Click Outside</strong> is selected and user clicks on the backdrop.</td></tr><tr><td><strong>On Backdrop Click</strong></td><td><em>Available when Close on Click Outside is selected</em><br>Triggered when the user clicks on the backdrop outside of the dialog. This is useful when a user clicks the backdrop to close instead of using a cancel/close button. This will also be triggered when the user presses the <code>Esc</code> key on their keyboard.<br><br>If both <strong>On Dialog Close</strong> and <strong>On Backdrop Click</strong> are configured, <strong>On Backdrop Click</strong> will be triggered first.</td></tr></tbody></table>