ConfirmDialog

Description #

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

<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

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

See 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

Fired when the confirm dialog is closed.

confirm #

Type: CustomEvent

confirm fired when Confirm button was pressed.

opened-changed #

Type: ConfirmDialogOpenedChangedEvent

Fired when the opened property changes.

reject #

Type: CustomEvent

reject fired when Reject button was pressed.

Types #

ConfirmDialogClosedEvent #

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

ConfirmDialogOpenedChangedEvent #

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