# Dialog

<flow-dialog>

Stable

The dialog component displays a modal dialog covering your application's main UI.

The dialog component remains hidden until the open method is called. When open, the dialog is shown centered over a translucent scrim.

# Dialog Layout

The default slot of theflow-dialog element is used to specify the main body of the dialog. You can include any HTML here including text or form controls.

To specify a heading or title for the dialog add content to the title slot. This will typically be a simple div element containing the title text.

To specify dialog action buttons add flow-button elements to the actions slot. You should specify the dialog-action attribute on each button to set the dialog action string returned by dialog close events.

# Dialog Actions

The dialog can be closed by clicking a dialog action button, clicking on the scrim, or pressing escape. To determine the reason for the close event, associate an action with a dialog action button by setting the dialog-action attribute. An 'action' can also be associated with a scrim click or escape key press using the escape-key-action and scrim-click-action attributes. The default action for any close event if not explicitly set is 'close'.

Following Material Design conventions, the primary dialog action button should be the last button specified and should use the primary color.

# Examples

# Setting Initial Focus

By default, focus is set to the last dialog action button. This allows the primary action to be taken by pressing return.

To set the initial focus to another element, such as an input control, add the dialog-initial-focus attribute to that control.

# Properties

Property	Description	Type	Default
`escapeKeyAction` `escape-key-action`	Specifies the dialog action to emit when closing the dialog via the `escape` key. Set to the empty string to disable closing by this method.	`string`	`'close'`
`scrimClickAction` `scrim-click-action`	Specifies the dialog action to emit when closing the dialog by clicking on the scrim. Set to the empty string to disable closing by this method.	`string`	`'close'`

# Events

Event	Description	Type
`flowDialogClosed`	Emitted after the dialog has been closed. The dialog action is specified in the event detail.	`any`
`flowDialogClosing`	Emitted when the dialog has been closing. The dialog action is specified in the event detail.	`any`
`flowDialogOpened`	Emitted after the dialog has been opened and is visible.	`any`
`flowDialogOpening`	Emitted when the dialog is opening.	`any`

# Methods

Method	Description
`close`	`close(action?: string) => Promise<void>` Close the dialog.
`open`	`open() => Promise<void>` Open the dialog.
`waitUntilClosed`	`waitUntilClosed() => Promise<string>` Returns a promise that resolves with the dialog `action` when the dialog is closed.

# Slots

Slot	Description
`(default)`	The main dialog body content.
`actions`	The dialog footer content. Used for dialog action buttons.
`title`	The dialog heading content.

# CSS Custom Properties

Name	Description
`--background-color`	The background color of the dialog. (Default: surface)
`--color`	The color of the dialog. (Default: text)

# CSS Parts

Name	Description
`content`	The dialog content container (excluding header and actions).
`dialog`	The full-screen dialog container (including scrim).
`surface`	The visible dialog box container.

← Date Time Picker Drawer →