Dialog

A dialog serves as a container for in-page contextual information or actions, allowing users to confirm or cancel tasks without navigating away from the current page.

Usage

Code

Accessibility

Keyboard interactions

Command	Description
Tab	Moves focus to the next tabbable element inside the dialog. If focus is on the last tabbable element, it wraps back to the first. When the dialog is opened, focus is trapped within the dialog.
Shift + Tab	Moves focus to the previous tabbable element inside the dialog. If focus is on the first, it wraps to the last. When the dialog is opened, focus is trapped within the dialog.
Escape (ESC)	Closes the dialog, but only when `disableCancel` is set to `false` (default)

WAI-ARIA

Attribute	Value	Description	User suppliedSpecifies whether the attribute is always set in the component (no) or it needs to be provided by the developer (yes)
`ariaLabelledby`	string	Defines the aria-label of the dialog, taken from the contents of the `title` slot.	no
`ariaDescribedby`	string	Describes the purpose of the dialog	yes
`ariaModal`	boolean	Defines the type of dialog; whether it is modal or not	no
`ariaRole`	`'dialog', 'alertdialog'`	Defines the type of dialog; set by the `role` property, default is `dialog`	no

Interactive example