---
title: "journey.dialog"
description: "Version compatibility"
permalink: /docs/build/js-ts-apis/journey/journey.dialog/
---
# journey.dialog

<Info title={"Version compatibility"}>

`journey.dialog` was introduced with version **4.80.0** of the JourneyApps Runtime.

</Info>

Dialogs appear as blocking overlays that provides information or confirms destructive behavior. They often prompt users to make a decision.

<Info>

These docs describe dialogs called from JavaScript/TypeScript. For more fully featured, dynamic dialogs, please refer to the [`dialog` UI component docs](/docs/build/ui-components/all-ui-components/dialog/). These dialogs are specified from the view XML and can include nested components.

</Info>

## 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:

![](./media/spaces-2f9tchlr67elhbojpvhhud-2fuploads-2fsseuq8ijopcm5oeymd7x-2fscreen-20shot-202022-10-07-20at-209.50.28-20am-e6ec1746.png)

**main.js**

```javascript
journey.dialog.simple({
    title: "Success",
    message: "You have successfully submitted the form.",
    okButton: "Done"
});
```

## 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:

![](./media/spaces-2f9tchlr67elhbojpvhhud-2fuploads-2f5uexjiq5mflpsulg608u-2fscreen-20shot-202022-10-07-20at-209.51.21-20am-2bd91fd8.png)

**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"
});
```

## Input Dialog

Display a dialog with a message and a `text-input` for simple data entry.

<Info>

For more advanced composition dialogs, see the [dialog component](/docs/build/ui-components/all-ui-components/dialog/) documentation.

</Info>

| 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](https://www.w3schools.com/html/html_form_input_types.asp)): - `email` - `number` - `paragraph` - `password` - `tel` - `text` | `text` |
| `inputValue` | Current value set for the input component | |

Example:

![](./media/spaces-2f9tchlr67elhbojpvhhud-2fuploads-2fvjekfhpxjenrifgcp7mw-2fscreen-20shot-202022-10-07-20at-209.46.01-20am-144bee48.png)

**main.js**

```javascript
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:

![](./media/spaces-2f9tchlr67elhbojpvhhud-2fuploads-2f3g6s0pwa5x9zrfbxy2wq-2fscreen-20shot-202022-10-07-20at-209.47.51-20am-03c5ffd6.png)

**main.js**

```javascript
journey.dialog.error({
    title: "Submit Failed",
    message: "Failed to submit the form, please check validations and retry",
    okButton: "OK"
});
```

## Styling Options

<Info title={"Version compatibility"}>

Styling options were introduced in version **4.89.17** of the JourneyApps Runtime.

</Info>

The style of buttons within these dialogs can be customized as follows.

Example:

**main.js**

```javascript

await journey.dialog.error({
      title: 'Alert', 
      message:'My message', 
      okButton: {
            text: 'OK',
            color: 'cyan',
            textColor: "black",
            icon: 'fa-cube',
            iconColor: 'orange',
            labelCapitalization: 'uppercase'
     }
})
```