Dialog

Dialogs are used to display crucial information during a user's workflow.

In addition to directly using this component, mdui also provides four functions: mdui.dialog, mdui.alert, mdui.confirm, mdui.prompt. These functions simplify the use of the Dialog component.

Usage

Import the component:

import 'mdui/components/dialog.js';

Import the TypeScript type:

import type { Dialog } from 'mdui/components/dialog.js';

Example:

Dialog Close

Open Dialog

<mdui-dialog class="example-dialog">
  Dialog
  <mdui-button>Close</mdui-button>
</mdui-dialog>

<mdui-button>Open Dialog</mdui-button>

<script>
  const dialog = document.querySelector(".example-dialog");
  const openButton = dialog.nextElementSibling;
  const closeButton = dialog.querySelector("mdui-button");

  openButton.addEventListener("click", () => dialog.open = true);
  closeButton.addEventListener("click", () => dialog.open = false);
</script>

Examples

Close on Overlay Click

Add the close-on-overlay-click attribute to close the dialog when the overlay is clicked.

Dialog

Open Dialog

<mdui-dialog close-on-overlay-click class="example-overlay">Dialog</mdui-dialog>

<mdui-button>Open Dialog</mdui-button>

<script>
  const dialog = document.querySelector(".example-overlay");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Code

Close on ESC

Add the close-on-esc attribute to enable closing the dialog when the ESC key is pressed.

Dialog

Open Dialog

<mdui-dialog
  close-on-esc
  close-on-overlay-click
  class="example-ecs"
>Dialog</mdui-dialog>

<mdui-button>Open Dialog</mdui-button>

<script>
  const dialog = document.querySelector(".example-ecs");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Code

Fullscreen

Add the fullscreen attribute to make the dialog fullscreen.

Dialog Close

Open Dialog

<mdui-dialog fullscreen class="example-fullscreen">
  Dialog
  <mdui-button>Close</mdui-button>
</mdui-dialog>

<mdui-button>Open Dialog</mdui-button>

<script>
  const dialog = document.querySelector(".example-fullscreen");
  const openButton = dialog.nextElementSibling;
  const closeButton = dialog.querySelector("mdui-button");

  openButton.addEventListener("click", () => dialog.open = true);
  closeButton.addEventListener("click", () => dialog.open = false);
</script>

Code

Icon

Set the icon attribute to add a Material Icon above the dialog.

Dialog

Open Dialog

<mdui-dialog
  icon="restart_alt"
  close-on-overlay-click
  class="example-icon"
>Dialog</mdui-dialog>

<mdui-button>Open Dialog</mdui-button>

<script>
  const dialog = document.querySelector(".example-icon");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Code

Alternatively, add an icon element above the dialog using the icon slot.

Dialog

Open Dialog

<mdui-dialog close-on-overlay-click class="example-icon-slot">
  Dialog
  <mdui-icon slot="icon" name="restart_alt"></mdui-icon>
</mdui-dialog>

<mdui-button>Open Dialog</mdui-button>

<script>
  const dialog = document.querySelector(".example-icon-slot");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Code

Title and Description

Use the headline and description attributes to set the dialog's title and description.

Open Dialog

<mdui-dialog
  headline="Delete selected images?"
  description="Images will be permenantly removed from you account and all synced devices."
  close-on-overlay-click
  class="example-headline"
></mdui-dialog>

<mdui-button>Open Dialog</mdui-button>

<script>
  const dialog = document.querySelector(".example-headline");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Code

Alternatively, use the headline and description slots to set the title and description elements.

Delete selected images? Images will be permenantly removed from you account and all synced devices.

Open Dialog

<mdui-dialog close-on-overlay-click class="example-headline-slot">
  <span slot="headline">Delete selected images?</span>
  <span slot="description">Images will be permenantly removed from you account and all synced devices.</span>
</mdui-dialog>

<mdui-button>Open Dialog</mdui-button>

<script>
  const dialog = document.querySelector(".example-headline-slot");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Code

Action Buttons at the Bottom

Use the action slot to add action buttons at the bottom of the dialog.

Cancel

Delete

Open Dialog

<mdui-dialog
  close-on-overlay-click
  headline="Delete selected images?"
  class="example-action"
>
  <mdui-button slot="action" variant="text">Cancel</mdui-button>
  <mdui-button slot="action" variant="tonal">Delete</mdui-button>
</mdui-dialog>

<mdui-button>Open Dialog</mdui-button>

<script>
  const dialog = document.querySelector(".example-action");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Code

Add the stacked-actions attribute to stack the action buttons vertically.

Turn on speed boost

No thanks

Open Dialog

<mdui-dialog
  stacked-actions
  close-on-overlay-click
  headline="Use location service?"
  class="example-stacked-actions"
>
  <mdui-button slot="action" variant="text">Turn on speed boost</mdui-button>
  <mdui-button slot="action" variant="text">No thanks</mdui-button>
</mdui-dialog>

<mdui-button>Open Dialog</mdui-button>

<script>
  const dialog = document.querySelector(".example-stacked-actions");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Code

API

Properties

Attribute	Property	Type	Default
`icon`	`icon`	`string`	-
Sets the Material Icons name for the top icon. Alternatively, use `slot="icon"`.
`headline`	`headline`	`string`	-
Sets the dialog title. Alternatively, use `slot="headline"`.
`description`	`description`	`string`	-
Sets the text below the title. Alternatively, use `slot="description"`.
`open`	`open`	`boolean`	`false`
Opens the dialog.
`fullscreen`	`fullscreen`	`boolean`	`false`
Sets the dialog to full-screen.
`close-on-esc`	`closeOnEsc`	`boolean`	`false`
Closes the dialog when the ESC key is pressed.
`close-on-overlay-click`	`closeOnOverlayClick`	`boolean`	`false`
Closes the dialog when the overlay is clicked.
`stacked-actions`	`stackedActions`	`boolean`	`false`
Stacks the bottom action buttons vertically.

Events

Name
`open`
Emitted when the dialog starts to open. Can be prevented with `event.preventDefault()`.
`opened`
Emitted after the dialog has opened and the animations are completed.
`close`
Emitted when the dialog starts to close. Can be prevented with `event.preventDefault().`.
`closed`
Emitted after the dialog has closed and the animations are completed.
`overlay-click`
Emitted when the overlay is clicked.

Slots

Name
`header`
Top element, contains the `icon` slot and `headline` slot by default.
`icon`
Top icon.
`headline`
Top headline.
`description`
Text below the title.
(default)
Main content of the dialog.
`action`
Elements in the bottom action bar.

CSS Parts

Name
`overlay`
Overlay layer.
`panel`
Dialog container.
`header`
Dialog header, includes icon and headline.
`icon`
Top icon in header.
`headline`
Top headline in header.
`body`
Dialog body.
`description`
Subtext in body.
`action`
Bottom action buttons.

CSS Custom Properties

Name
`--shape-corner`
The size of the component corner. You can use a specific pixel value, but it's recommended to reference design tokens.
`--z-index`
The CSS `z-index` value of the component.

Collapse

Up Next

Divider