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.
- 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)