Docs

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.

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)