styling.adoc

title	Styling
page-title	How to style the Dialog component | Vaadin components
description	Styling API reference for the Dialog component.
meta-description	Customize the Vaadin Dialog component to match your application's style and improve user experience.
order	50

Dialog Styling

Style Variants

The following variants are supported:

Variant	Description	Supported by
no-padding	Used to remove the content area’s built-in padding	Aura, Lumo

../_styling-section-theming-props.adoc

Property	Supported by
--vaadin-dialog-background	Aura
--vaadin-dialog-border-color	Aura
--vaadin-dialog-border-radius	Aura
--vaadin-dialog-border-width	Aura
--vaadin-dialog-max-width	Aura
--vaadin-dialog-min-width	Aura
--vaadin-dialog-padding	Aura
--vaadin-dialog-shadow	Aura
--vaadin-dialog-text-color	Aura
--vaadin-dialog-title-color	Aura
--vaadin-dialog-title-font-size	Aura
--vaadin-dialog-title-font-weight	Aura
--vaadin-dialog-title-line-height	Aura
--vaadin-overlay-backdrop-background	Aura
--vaadin-overlay-viewport-inset	Aura, Lumo

../_styling-section-intros.adoc

Root element

vaadin-dialog

States

Non-modal

vaadin-dialog[modeless]

Dialog with header

vaadin-dialog[has-header]

Dialog with footer

vaadin-dialog[has-footer]

Resizable

vaadin-dialog[resizable]

Draggable

vaadin-dialog[draggable]

Parts

Modality curtain (backdrop)

vaadin-dialog::part(backdrop)

Dialog surface

vaadin-dialog::part(overlay)

Header

vaadin-dialog::part(header)

Title wrapper

vaadin-dialog::part(title)

Title element

vaadin-dialog > [slot="title"]

Header custom content wrapper

vaadin-dialog::part(header-content)

Content area

vaadin-dialog::part(content)

Footer

vaadin-dialog::part(footer)