Docs

Documentation versions (currently viewingVaadin 24)

Dialog

Styling API reference for the Dialog component.

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)