confirm

The confirm function, a wrapper for the the <mdui-dialog> component. It offers a more user-friendly alternative to the native window.confirm function. This function allows you to open a confirmation dialog without the need to write HTML code for the component.

Usage

Import the function:

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

Example:

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

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

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

  button.addEventListener("click", () => {
    confirm({
      headline: "Confirm Title",
      description: "Confirm description",
      confirmText: "OK",
      cancelText: "Cancel",
      onConfirm: () => console.log("confirmed"),
      onCancel: () => console.log("canceled"),
    });
  });
</script>

API

confirm(options: Options): Promise<void>

The function accepts an Options object as a parameter and returns a Promise. If the dialog is closed by clicking the confirm button, the Promise is resolved. If the dialog is closed in any other way, the Promise is rejected.

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.
cancelText string Cancel
The text for the cancel button.
stackedActions boolean false
Whether to stack the bottom action buttons vertically.
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.

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

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

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

By default, clicking the cancel 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