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.

Close on ESC

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

Fullscreen

Add the fullscreen attribute to make the dialog fullscreen.

Icon

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

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

Title and Description

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

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

Action Buttons at the Bottom

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

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

Top Content

Use the header slot to set the top content of the dialog.

API

Properties

AttributePropertyReflectTypeDefault
iconiconstring-

Sets the Material Icons name for the top icon. Alternatively, use slot="icon".

headlineheadlinestring-

Sets the dialog title. Alternatively, use slot="headline".

descriptiondescriptionstring-

Sets the text below the title. Alternatively, use slot="description".

openopenbooleanfalse

Opens the dialog.

fullscreenfullscreenbooleanfalse

Sets the dialog to full-screen.

close-on-esccloseOnEscbooleanfalse

Closes the dialog when the ESC key is pressed.

close-on-overlay-clickcloseOnOverlayClickbooleanfalse

Closes the dialog when the overlay is clicked.

stacked-actionsstackedActionsbooleanfalse

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.

MDUIDocsEnglish简体中文LightDarkSystem
Preset Colors
Custom Color
Extract Color from Wallpaper
Select a Wallpaper
Getting Started
Introduction Installation Usage TypeScript Support IDE Support Localization Frequently Asked Questions
Styles
Dark Theme Dynamic Theme Typography Design Tokens
Frameworks
React Vue Angular
Components
Button ButtonIcon Fab SegmentedButton Chip Card Checkbox Radio Switch Slider RangeSlider List Collapse Tabs Dropdown Menu Select TextField LinearProgress CircularProgress Dialog Divider Avatar Badge Icon Tooltip Snackbar NavigationBar NavigationDrawer NavigationRail BottomAppBar TopAppBar Layout
Functions
JavaScript Library dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint
Libraries
@mdui/icons