Usage #
Examples #
Basic #
Dialog is used as a container and visibility is controlled with a binding to visible property.
Template #
Header and Footer sections allow customization via templating.
Draggable #
Enabling the draggable property lets the user reposition the Dialog by dragging it from its header.
Position #
The position property is used to display a Dialog at all edges and corners of the screen.
Maximizable #
Adding maximizable property enables the full screen mode.
Full Screen #
A full screen Dialog can be achieved by sizing the component to the viewport with utility classes such as w-screen and h-screen.
Modal #
Mask layer behind the Dialog is enabled with the modal property, and dismissableMask allows closing it by clicking outside.
Without Modal #
Mask layer behind the Dialog is configured with the modal property. By default, no modal layer is added.
Confirmation #
A confirmation dialog can be built by disabling the header close button with closable and providing explicit actions in the content.
Long Content #
When content exceeds the available space, the content area scrolls while the header and footer stay fixed.
Responsive #
Dialog dimensions can be made responsive with breakpoint-based utility classes applied directly to the component.
Headless #
Headless mode is enabled by defining a container slot that lets you implement entire UI instead of the default elements.
Accessibility #
Screen Reader
Dialog component uses dialog role along with aria-labelledby referring to the header element however any attribute is passed to the root element so you may use aria-labelledby to override this default behavior. In addition aria-modal is added since focus is kept within the popup.
It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding tabIndex would be necessary.
Trigger element also requires aria-expanded and aria-controls to be handled explicitly.
Close element is a button with an aria-label that refers to the aria.close property of the locale API by default, you may use closeButtonProps to customize the element and override the default aria-label.
Maximize element is a button with an aria-label that refers to the aria.maximizeLabel and aria.minimizeLabel property of the locale API. It cannot be customized using the maximizeButtonProps.
Overlay Keyboard Support
| Key | Function |
|---|---|
| tab | Moves focus to the next the focusable element within the dialog if modal is true. Otherwise, the focusable element in the page tab sequence. |
| shift + tab | Moves focus to the previous the focusable element within the dialog if modal is true. Otherwise, the focusable element in the page tab sequence. |
| escape | Closes the dialog if closeOnEscape is true. |
Close Button Keyboard Support
| Key | Function |
|---|---|
| enter | Closes the dialog. |
| space | Closes the dialog. |