---
title: Dialog boxes
slug: cms-13/docs/dialog-boxes
docTags: 
createdAt: 2026-07-30T20:22:10.689Z
---

The Optimizely Content Management System (CMS) user interface uses dialog boxes in many places to communicate information or perform tasks within the current view.

The following examples are on [Optimizely GitHub](https://github.com/episerver/alloy-mvc-template/compare/doc/how-to-create-a-component...doc/how-to-use-dialogs?expand=1). Clone the CMS repository, check out the `doc/how-to-use-dialogs` branch, and run the site to see working examples.

### Alert dialog box

The **Alert** dialog box displays information that a user acknowledges but does not require any action.

```javascript
require(["epi/shell/DialogService"], function (dialogService) {
  dialogService.alert({
    heading: "heading",
    content: "content",
    description: "description",
    iconClass: "epi-iconDownload"
  });
});
```

### Confirmation dialog box

The **Confirmation** dialog displays information for which a user must decide. It returns a promise that is resolved after clicking **OK** or rejected after clicking **Cancel**.

```javascript
require(["epi/shell/DialogService"], function (dialogService) {
  dialogService.confirmation({
    title: "confirmation title",
    heading: "heading",
    content: "content",
    description: "description",
    iconClass: "epi-iconDownload"
  }).then(function () {
    alert("clicked OK");
  }).otherwise(function () {
    alert("clicked cancel");
  });
});
```

### Standard dialog box

The standard **Dialog** displays custom content. Create a widget that displays and manages the business logic, and use the standard dialog as a display container.

Create a **Dialog** widget instance manually:

```javascript
require([
  "epi/shell/widget/dialog/Dialog",
  "dijit/form/TextBox"
], function (Dialog, TextBox) {
  var dialog = new Dialog({
    heading: "heading",
    content: new TextBox({
      label: "Text 1",
      _type: "field"
    }),
    description: "description",
    iconClass: "epi-iconDownload"
  });
  dialog.on("execute", function () {
    // run custom needed logic
    dialog.hide();
  });
  dialog.show();
});
```

Or use another `dialogService` method:

```javascript
require([
  "epi/shell/widget/dialog/Dialog",
  "dijit/form/TextBox"
], function (Dialog, TextBox) {
  dialogService.dialog({
      title: "dialog title",
    heading: "heading",
    content: new TextBox({
      label: "Text 1",
      _type: "field"
    }),
    description: "description",
    iconClass: "epi-iconDownload"
  }).then(function () {
    alert("clicked OK");
  }).otherwise(function () {
    alert("clicked cancel");
  });
});
```

## Callbacks

CMS dialog boxes are based on [Dojo Dialog](https://dojotoolkit.org/reference-guide/1.10/dijit/Dialog.html#usage). See the [Dojo dialog box documentation](https://dojotoolkit.org/reference-guide/1.10/dijit/Dialog.html#usage) for further information about events or other properties that are passed as dialog parameters.

## Action labels

Each dialog box has properties that define the labels to display. Customize the default labels for actions when constructing the dialog box using `acknowledgeActionText` for the alert dialog box and `confirmActionText` and `cancelActionText` for the confirmation and standard dialogs. Common action labels are localized in `epi.resources.action`.