alert

The alert function, a wrapper for the <mdui-dialog> component, supersedes the native window.alert function, enabling the creation of alert dialogs without HTML code.

Usage

Import the function:

import { alert } from 'mdui/functions/alert.js';

Example:

open
<mdui-button class="example-button">open</mdui-button>

<script type="module">
  import { alert } from "mdui/functions/alert.js";

  const button = document.querySelector(".example-button");

  button.addEventListener("click", () => {
    alert({
      headline: "Alert Title",
      description: "Alert description",
      confirmText: "OK",
      onConfirm: () => console.log("confirmed"),
    });
  });
</script>

API

alert(options: Options): Promise<void>

The alert function takes an Options object and returns a Promise. The Promise resolves if the dialog is closed by clicking the confirm button, and rejects if closed by other means.

Options

Property Type Default
headline string -
The title of the dialog.
description string -
The description of the dialog.
icon string -
The Material Icons name displayed at the top of the dialog.
closeOnEsc boolean false
Whether the dialog can be closed by pressing the Esc key. If set to true, the dialog closes when the Esc key is pressed.
closeOnOverlayClick boolean false
Whether the dialog can be closed by clicking on the overlay.
confirmText string OK
The text for the confirm button.
queue string -

The queue name.

By default, the queue is disabled. If this function is invoked multiple times, multiple dialogs will appear simultaneously.

If a queue name is provided, dialogs with the same queue name will open sequentially, each one after the previous one closes.

The dialog(), alert(), confirm(), and prompt() functions share the same queue if their queue names match.

onConfirm (dialog: Dialog) => void | boolean | Promise<void> -

A callback function that is triggered when the confirm button is clicked.

The function receives the dialog instance as a parameter, and this also refers to the dialog instance.

By default, clicking the confirm button closes the dialog. If the return value is false, the dialog remains open. If the return value is a promise, the dialog closes after the promise resolves.

onOpen (dialog: Dialog) => void -

A callback function that is triggered when the dialog starts to open.

The function receives the dialog instance as a parameter, and this also refers to the dialog instance.

onOpened (dialog: Dialog) => void -

A callback function that is triggered when the dialog's opening animation completes.

The function receives the dialog instance as a parameter, and this also refers to the dialog instance.

onClose (dialog: Dialog) => void -

A callback function that is triggered when the dialog starts to close.

The function receives the dialog instance as a parameter, and this also refers to the dialog instance.

onClosed (dialog: Dialog) => void -

A callback function that is triggered when the dialog's closing animation completes.

The function receives the dialog instance as a parameter, and this also refers to the dialog instance.

onOverlayClick (dialog: Dialog) => void -

A callback function that is triggered when the overlay is clicked.

The function receives the dialog instance as a parameter, and this also refers to the dialog instance.

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