# journey.dialog
{% hint style="info" %}
**Version compatibility**
`journey.dialog` was introduced with version **4.80.0** of the JourneyApps Runtime.
{% endhint %}
Dialogs appear as blocking overlays that provides information or confirms destructive behavior. They often prompt users to make a decision.
{% hint style="success" %}
These docs describe dialogs called from JavaScript/TypeScript. For more fully featured, dynamic dialogs, please refer to the [`dialog` UI component docs](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/dialog). These dialogs are specified from the view XML and can include nested components.
{% endhint %}
## Simple Dialog
Display a dialog with a message and one button.
| Property | Description | Example |
| ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
| `title` | Heading displayed on the dialog | |
| `message` | Main message displayed in the dialog | |
| `okButton` | Dialog's OK button. This can either be a string or an object with text and color as fields.
Returns true when clicked.
| okButton: "Done"
or
okButton: { text: "Done", color: "positive" }
|
Example:
{% code title="main.js" %}
```javascript
journey.dialog.simple({
title: "Success",
message: "You have successfully submitted the form.",
okButton: "Done"
});
```
{% endcode %}
## Confirm Dialog
Display a dialog with a message prompting the user to accept or cancel.
| Property | Description | Example |
| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
| `title` | Heading displayed on the dialog | |
| `message` | Main message displayed in the dialog | |
| `okButton` | Dialog's OK button. This can either be a string or an object with text and color as fields.
Returns true when clicked.
| okButton: "Confirm"
or
okButton: { text: "Confirm", color: "positive" }
|
| `cancelButton` | Dialog's Cancel button. This can either be a string or an object with text and color as fields.
Returns false when clicked.
| cancelButton: "Cancel"
or
cancelButton: { text: "Cancel", color: "negative" }
|
Example:
{% code title="main.js" %}
```javascript
journey.dialog.confirm({
title: "Confirm your submission",
message: "Are you sure you want to submit this form?",
okButton: { text: "Confirm", color: "positive" },
cancelButton: "Cancel"
});
```
{% endcode %}
## Input Dialog
Display a dialog with a message and a `text-input` for simple data entry.
{% hint style="info" %}
For more advanced composition dialogs, see the [dialog component](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/dialog) documentation.
{% endhint %}
| Property | Description | Example |
| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
| `title` | Heading displayed on the dialog | |
| `message` | Main message displayed in the dialog | |
| `saveButton` | Dialog's Save button. This can either be a string or an object with text and color as fields.
Returns the entered value as a string when clicked.
| saveButton: "Save"
or
saveButton: { text: "Save", color: "positive" }
|
| `cancelButton` | Dialog's Cancel button. This can either be a string or an object with text and color as fields.
Returns undefined when clicked.
| cancelButton: "Cancel"
or
cancelButton: { text: "Cancel", color: "negative" }
|
| `inputLabel` | Label for the input component | |
| `inputType` | Type of input required from the user. Can be one of the following types (reference: HTML Input Types):
emailnumberparagraphpasswordteltext
| `text` |
| `inputValue` | Current value set for the input component | |
Example:
journey.dialog.input({
title: "Please enter your name",
message: "Enter your first and last names",
inputLabel: "Answer",
inputType: "text",
inputValue: "",
saveButton: "Save",
cancelButton: "Cancel"
});
## Error Dialog
Display a dialog with only a message and one button to indicate an error state.
| Property | Description | Example |
| ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
| `title` | Heading displayed on the dialog | |
| `message` | Main message displayed in the dialog | |
| `okButton` | Dialog's OK button. This can either be a string or an object with text and color as fields.
Returns true when clicked.
| okButton: "Close"
or
okButton: { text: "Close", color: "negative" }
|
Example:
{% code title="main.js" %}
```javascript
journey.dialog.error({
title: "Submit Failed",
message: "Failed to submit the form, please check validations and retry",
okButton: "OK"
});
```
{% endcode %}
## Styling Options
{% hint style="info" %}
**Version compatibility**
Styling options were introduced in version **4.89.17** of the JourneyApps Runtime.
{% endhint %}
The style of buttons within these dialogs can be customized as follows.
Example:
await journey.dialog.error({
title: 'Alert',
message:'My message',
okButton: {
text: 'OK',
color: 'cyan',
textColor: "black",
icon: 'fa-cube',
iconColor: 'orange',
labelCapitalization: 'uppercase'
}
})