Dialog
Styling API reference for the Dialog component.
- Usage
- Styling
CSS Selectors
The following CSS selectors can be used in stylesheets to target the various parts and states of the component. See the Styling documentation for more details on how to style components.
- Root element
-
vaadin-dialog-overlay
States
- Non-modal
-
vaadin-dialog-overlay
[modeless] - Dialog with header
-
vaadin-dialog-overlay
[has-header] - Dialog with footer
-
vaadin-dialog-overlay
[has-footer] - Resizable
-
vaadin-dialog-overlay
[resizable]
Parts
- Modality curtain (backdrop)
-
vaadin-dialog-overlay
::part(backdrop) - Dialog surface
-
vaadin-dialog-overlay
::part(overlay) - Header
-
vaadin-dialog-overlay
::part(header) - Title wrapper
-
vaadin-dialog-overlay
::part(title) - Title element
-
vaadin-dialog-overlay
> [slot="title"] - Header custom content wrapper
-
vaadin-dialog-overlay
::part(header-content) - Content area
-
vaadin-dialog-overlay
::part(content) - Footer
-
vaadin-dialog-overlay
::part(footer)