Dialog

Dialog is a Level 3 container. Follow the elevation budget: the dialog owns the shadow, and the inner controls should use flat/inset variants.

Basic Usage

Three elevation levels for different contexts. Dialog is always a modal overlay, so flat variant doesn't apply.

Strong shadow for important dialogs and hero moments.

Medium shadow for general dialogs.

Border only, no shadow. Lightweight for frequent interactions.

Different overlays for different levels of background emphasis.

Inputs should look inset inside a dialog; buttons should use the flat variants.

Use DialogScrollArea to keep the dialog height stable.

Don't stack elevated actions inside an elevated dialog. Use flat buttons inside the dialog.

Noisy

Security check

Elevated actions add extra shadows on top of the dialog shadow.

Correct

Security check

The dialog owns elevation; the buttons stay flat.

Dialog component with 3-level elevation system.

PropTypeDescription

elevation"elevated" | "default" | "outlined"Shadow level (default: default)

overlayVariant"default" | "blur" | "dark" | "light" | "none"Background overlay style

showCloseButtonbooleanShow close button (default: true)

ElevationShadowUse Case

elevatedStrongHero moments, critical decisions

defaultMediumGeneral dialogs (default)

outlinedNone (border)Frequent interactions