---
title: ConfirmDialog
description: ConfirmDialog
element: vaadin-confirm-dialog
---

## Description

`<vaadin-confirm-dialog>` is a Web Component for showing alerts and asking for user confirmation.

```html
<vaadin-confirm-dialog cancel-button-visible>
  There are unsaved changes. Do you really want to leave?
</vaadin-confirm-dialog>
```

### Styling

The following shadow DOM parts are available for styling:

Part name        | Description
-----------------|-------------------------------------------
`backdrop`       | Backdrop of the overlay
`overlay`        | The overlay container
`content`        | The overlay content
`header`         | The header element wrapper
`message`        | The message element wrapper
`footer`         | The footer element that wraps the buttons
`cancel-button`  | The "Cancel" button wrapper
`confirm-button` | The "Confirm" button wrapper
`reject-button`  | The "Reject" button wrapper

The following custom CSS properties are available for styling:

Custom CSS property                      |
:----------------------------------------|
|`--vaadin-confirm-dialog-max-width`     |
|`--vaadin-confirm-dialog-min-width`     |
|`--vaadin-dialog-background`            |
|`--vaadin-dialog-border-color`          |
|`--vaadin-dialog-border-radius`         |
|`--vaadin-dialog-border-width`          |
|`--vaadin-dialog-padding`               |
|`--vaadin-dialog-shadow`                |
|`--vaadin-dialog-title-color`           |
|`--vaadin-dialog-title-font-size`       |
|`--vaadin-dialog-title-font-weight`     |
|`--vaadin-dialog-title-line-height`     |
|`--vaadin-overlay-backdrop-background`  |

Use `confirmTheme`, `cancelTheme` and `rejectTheme` properties to customize buttons theme.

See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.

### Custom content

The following slots are available for providing custom content:

Slot name         | Description
------------------|---------------------------
`header`          | Slot for header element
`cancel-button`   | Slot for "Cancel" button
`confirm-button`  | Slot for "Confirm" button
`reject-button`   | Slot for "Reject" button

## Properties

### accessibleDescriptionRef

**Type:** `string | null | undefined`

Sets the `aria-describedby` attribute of the dialog.

By default, the text contents of all elements inside the message area
are combined into the `aria-description` attribute. However, there are
cases where this can confuse screen reader users (e.g. the dialog
may present a password confirmation form). For these cases,
it's better to associate only the elements that will help describe
the confirmation dialog through this API.

### cancelButtonVisible

**Type:** `boolean`

Whether to show cancel button or not.

### cancelText

**Type:** `string`

Text displayed on cancel-button.
This only affects the default button, custom slotted buttons will not be altered.

### cancelTheme

**Type:** `string`

Theme for a cancel-button.
This only affects the default button, custom slotted buttons will not be altered.

### confirmText

**Type:** `string`

Text displayed on confirm-button.
This only affects the default button, custom slotted buttons will not be altered.

### confirmTheme

**Type:** `string`

Theme for a confirm-button.
This only affects the default button, custom slotted buttons will not be altered.

### header

**Type:** `string`

Set the confirmation dialog title.

### height

**Type:** `string | null`

Set the height of the dialog.
If a unitless number is provided, pixels are assumed.

### message

**Type:** `string | null | undefined`

Set the message or confirmation question.

### noCloseOnEsc

**Type:** `boolean`

Set to true to disable closing dialog on Escape press

### opened

**Type:** `boolean`

True if the dialog is visible and available for interaction.

### rejectButtonVisible

**Type:** `boolean`

Whether to show reject button or not.

### rejectText

**Type:** `string`

Text displayed on reject-button.
This only affects the default button, custom slotted buttons will not be altered.

### rejectTheme

**Type:** `string`

Theme for a reject-button.
This only affects the default button, custom slotted buttons will not be altered.

### width

**Type:** `string | null`

Set the width of the dialog.
If a unitless number is provided, pixels are assumed.

## Events

### cancel

**Type:** `CustomEvent`

cancel
fired when Cancel button or Escape key was pressed.

### closed

**Type:** [ConfirmDialogClosedEvent](#confirmdialogclosedevent)

Fired when the confirm dialog is closed.

### confirm

**Type:** `CustomEvent`

confirm
fired when Confirm button was pressed.

### opened-changed

**Type:** [ConfirmDialogOpenedChangedEvent](#confirmdialogopenedchangedevent)

Fired when the `opened` property changes.

### reject

**Type:** `CustomEvent`

reject
fired when Reject button was pressed.

## Types

### ConfirmDialogClosedEvent

```ts
/**
 * Fired when the confirm dialog is closed.
 */
export type ConfirmDialogClosedEvent = CustomEvent;
```

### ConfirmDialogOpenedChangedEvent

```ts
/*
 * Fired when the `opened` property changes.
 */
export type ConfirmDialogOpenedChangedEvent = CustomEvent<{ value: boolean }>;
```