# DialogDefinition

interface

The definition that describes a dialog window and its content. Passed to the [`show`](module_ui_dialog_dialog-Dialog.md#function-show) method.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-ui/src/dialog/dialog.ts#L428)

<a id="properties">

## Properties

<a id="member-actionButtons">

### `actionButtons?: Array<DialogActionButtonDefinition>`

The action buttons displayed in the dialog's footer.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-ui/src/dialog/dialog.ts#L470)

<a id="member-className">

### `className?: string`

An additional CSS class set on the outermost (`.ck.ck-dialog`) container element allowing for visual customization.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-ui/src/dialog/dialog.ts#L475)

<a id="member-content">

### `content?: View<HTMLElement> | Array<View<HTMLElement>>`

The content of the dialog. It can be a single [`View`](module_ui_view-View.md) or an array of views.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-ui/src/dialog/dialog.ts#L465)

<a id="member-getRootName">

### `getRootName?: () => ( string | null )`

A callback executed whenever the dialog is about to show up that returns the DOM root name that the dialog should be [positioned](#member-position) relative to.

If not set, the dialog will be positioned relative to the DOM root the model selection is anchored to.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-ui/src/dialog/dialog.ts#L501)

<a id="member-hasCloseButton">

### `hasCloseButton?: boolean`

A flag indicating whether the dialog should have a close button in the header. `true` by default. Works when [`title`](#member-title) is also set and the header is displayed.

**Note**: If you hide the close button, make sure that the dialog can be closed in another way.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-ui/src/dialog/dialog.ts#L460)

<a id="member-icon">

### `icon?: string`

The SVG string of an icon displayed in dialogs's header. Used only when [`title`](#member-title) is also set and the header is displayed.

See more in [`content`](module_ui_icon_iconview-IconView.md#member-content).

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-ui/src/dialog/dialog.ts#L445)

<a id="member-id">

### `id: string`

A unique identifier of the dialog. It allows for distinguishing between different dialogs and their visibility. For instance, when open, the ID of the currently visible dialog is stored in [`id`](module_ui_dialog_dialog-Dialog.md#member-id).

The `id` is also passed along the [`DialogShowEvent`](module_ui_dialog_dialog-DialogShowEvent.md) and [`DialogHideEvent`](module_ui_dialog_dialog-DialogHideEvent.md) events.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-ui/src/dialog/dialog.ts#L437)

<a id="member-isModal">

### `isModal?: boolean`

When set to `true`, the dialog will become a modal, that is, it will block the UI until it is closed.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-ui/src/dialog/dialog.ts#L480)

<a id="member-keystrokeHandlerOptions">

### `keystrokeHandlerOptions?: KeystrokeHandlerOptions`

Options that will be passed to the [keystroke handler](module_utils_keystrokehandler-KeystrokeHandler.md) of the dialog view.

See [KeystrokeHandlerOptions](module_utils_keystrokehandler-KeystrokeHandlerOptions.md) to learn more about the available options.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-ui/src/dialog/dialog.ts#L519)

<a id="member-onHide">

### `onHide?: ( dialog: Dialog ) => void`

A callback called when the dialog hides with a `low` priority. It allows for cleaning up (for example, resetting) the dialog's [`content`](#member-content).

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-ui/src/dialog/dialog.ts#L512)

<a id="member-onShow">

### `onShow?: ( dialog: Dialog ) => void`

A callback called when the dialog shows up with a `low` priority. It allows for setting up the dialog's [`content`](#member-content).

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-ui/src/dialog/dialog.ts#L506)

<a id="member-position">

### `position?: 'screen-center' | 'editor-center' | 'editor-top-side' | 'editor-top-center' | 'editor-bottom-center' | 'editor-above-center' | 'editor-below-center' | DialogPositionCallback | null`

Available dialog positions. By default `DialogViewPosition.EDITOR_CENTER` is used for [non-modals](#member-isModal) and `DialogViewPosition.SCREEN_CENTER` for modals.

If set to a function, it will be fed dialog and DOM root geometry as arguments and should return the coordinates of the dialog's position.

* Learn more about [available positions](module_ui_dialog_dialogview.md#constant-DialogViewPosition).
* Learn more about which editor root the dialog is positioned relative to in the [`getRootName`](#member-getRootName) section.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-ui/src/dialog/dialog.ts#L493)

<a id="member-title">

### `title?: string`

A title displayed in the dialogs's header. It also works as an accessible name of the dialog used by assistive technologies.

When not set, the header is not displayed. Affects [`icon`](#member-icon) and [`hasCloseButton`](#member-hasCloseButton).

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-ui/src/dialog/dialog.ts#L452)

---

Full index of the CKEditor 5 API reference: [llms.txt](llms.txt)