# dialog
## Overview
The `dialog` UI component appears as a blocking overlay that provides information or confirms destructive behavior. They often prompt users to make a decision.
{% hint style="info" %}
Version compatibility
`dialog` was introduced in version **4.58.0** of the JourneyApps Runtime.
{% endhint %}
{% hint style="success" %}
This `dialog` component is generated from the view's XML. For dialogs triggered from JavaScript/TypeScript, see [the journey.dialog documentation](https://docs.journeyapps.com/reference/build/js-ts-apis/journey/journey.dialog).
{% endhint %}
{% hint style="warning" %}
**Known limitation**
A `dialog` can currently not be shown upon entering a view (e.g. by calling it from the `init()` or `resume()` function).
{% endhint %}
### `dialog` use cases
There are 3 main use cases for `dialog`. These are described in more detail below.
1. [Simple](#simple) dialogs
2. [Confirmation](#confirmation) dialogs
3. [Composition](#composition) dialogs
#### Simple
A simple `dialog` displays information to the user and does not require the user to make a decision, thus can be dismissed by selecting the primary button, hitting the `Esc` key or back button.
{% hint style="info" %}
**Tip**
Use simple dialogs sparingly as they are interruptive. Rather, less obtrusive [notifications](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/notification) can be used.
{% endhint %}
**Example**
{% code title="main.view\.xml" %}
```xml
```
{% endcode %}
{% code title="main.js" %}
```javascript
function onEnrollment() {
component.dialog({id: "success-dialog"}).show();
}
```
{% endcode %}
#### Confirmation
A confirmation `dialog` gives the user the ability to provide final confirmation of a decision before committing to it. If the user confirms a choice, it’s carried out. Otherwise, the user can dismiss the dialog by selecting the secondary button.
**Example**
{% code title="main.view\.xml" %}
```xml
```
{% endcode %}
{% code title="main.js" %}
```javascript
function showResetSettings() {
component.dialog({id: "reset-settings"}).show();
}
function resetSettings(ok){
if (ok) {
// Logic here
} else {
// Other logic here
}
}
```
{% endcode %}
#### Composition
A composition dialogs allows developers to embed other UI components inside it, therefore offering a wide range of input options.
To embed a UI component to the `dialog`, add it inside a `body` tag. Refer to the syntax for more detail.
**Example**:
{% code title="main.view\.xml" %}
```xml
```
{% endcode %}
{% code title="main.js" %}
```javascript
// JS
function getStockTitle(){
return view.cur_item.name;
}
function onCancel() {
// Logic for when the user selects Cancel
}
function onSubmit() {
// Logic for when the user selects Save
}
```
{% endcode %}
## Standard Attributes
### `id`
**Required**
```xml
```
The `id` attribute is required to target a particular dialog to call `show()` or `hide()` on it.
```xml
```
```javascript
function onTaskComplete() {
component.dialog({id: "task-complete"}).show();
}
function onTaskUploadFail() {
component.dialog({id: "task-complete"}).hide();
}
```
See also:
{% content-ref url="../xml-fields/id" %}
[id](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/id)
{% endcontent-ref %}
### `title`
**Optional**
**Type**: `string` (static text, a [format string](https://docs.journeyapps.com/reference/app-features/xml-format-strings) or the return value of a [JS/TS function](https://docs.journeyapps.com/reference/app-features/calling-js-functions-from-xml))
**Default**: unset
```xml
```
A `dialog`'s `title` communicates its purpose to the user.
Titles should:
* Contain a brief, clear statement or question
* Summarize the dialog's content
* Avoid the following:
* apologies (“Sorry for the interruption”)
* alarm (“Warning!”)
* ambiguity (“Are you sure?”)
```xml
```
```javascript
function onTaskComplete() {
component.dialog({id: "task-complete"}).show();
}
```
## Advanced Attributes
### `auto-hide`
**Optional**
**Type**: `boolean`
**Default**: `true`
```xml