Dialog
Dialog is a container to display content in an overlay window.
Dialog is used as a container and visibility is controlled with visible property.
Usage #
Examples #
Basic #
Dialog is used as a container and visibility is controlled with visible property.
Template #
Dialog can be customized using header and footer templates.
Position #
The position property is used to display a Dialog at all edges and corners of the screen.
Maximizable #
Setting maximizable property to true enables the full screen mode.
Long Content #
Dialog automatically displays a scroller when content exceeds viewport.
Without Modal #
Mask layer behind the Dialog is configured with the modal property. By default, no modal layer is added.
Responsive #
Dialog width can be adjusted per screen size with the breakpoints option where a key defines the max-width for the breakpoint and value for the corresponding width. When no breakpoint matches width defined in style property is used.
Headless #
Headless mode allows you to customize the entire user interface 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. |
| shift + tab | Moves focus to the previous the focusable element within the dialog. |
| escape | Closes the dialog if closeOnEscape is true. |
Close Button Keyboard Support
| Key | Function |
|---|---|
| enter | Closes the dialog. |
| space | Closes the dialog. |
