Component Dialog

cancel-text

string

'Cancel'

This property is used to customize the text of the cancel option in a confirmation dialog.

confirm-text

string

'Confirm'

This property is used to customize the text of the confirm option in a confirmation dialog.

description

string

This property will be used to further describe the dialog to users with screen readers. It won’t be displayed on the screen.

dialog-aria-label

string

This property sets the aria label of the dialog.

enable-keyboard-close

boolean

false

This boolean property is used to enable closing the dialog with keyboard's ESC key.

enable-overlay-close

boolean

false

This boolean property is used to enable closing the dialog when clicking on the overlay outside of the dialog.

headline

string

This property will be displayed in the header of your dialog.

hide-close-button

boolean

true

This boolean property is used to hide the header's close button.

is-destructive

boolean

false

This boolean property is used to determine what color the confirm action button will be in a confirmation dialog.

size

"lg" | "md" | "sm"

'md'

This property is used to control the width of the dialog.

close

This method will close the dialog.

open

This method will open the dialog.

refresh

This method will refresh the dialog. This is useful when dialog data is loaded asynchronously, which allows the component to find elements to focus on and provide accessibility support.

dialogClose

any

This event is emitted after the dialog closes.

dialogConfirm

any

This event is emitted when a confirmation button is clicked. The boolean event.detail.confirmation is returned, where confirm is equal to true and cancel is equal to false.

dialogOpen

any

This event is emitted before the dialog opens.