DuneUI

The alertDialog() function is a confirmation-focused wrapper around the dialog() helper for use with the Alert Dialog component. Since an alert dialog's whole purpose is "await a confirmation before doing something", the wrapper exposes a boolean-returning confirmAsync() method: it resolves true when the user activates the action button, and false when the dialog is cancelled or dismissed with the Esc key.

Usage

const alertDialog = window.duneui.alertDialog(document.getElementById("myAlertDialog"));
if (await alertDialog.confirmAsync()) {
  // perform the confirmed action
}

Examples

Basic Usage

Open the alert dialog with confirmAsync() and await the boolean result. The <dui-alert-dialog-action> button confirms the dialog, while <dui-alert-dialog-cancel> or the Esc key cancels it.

<dui-stack align="StackAlign.Start" class="min-w-md">
    <dui-button variant="ButtonVariant.Destructive" id="--js-alert-dialog-intro-button">
        Cancel Booking
    </dui-button>
    <label class="text-sm font-bold">Result:</label>
    <div class="font-mono w-full bg-gray-50 p-2" id="--js-alert-dialog-intro-result">-</div>
</dui-stack>
<dui-alert-dialog id="--js-alert-dialog-intro-dialog">
    <dui-alert-dialog-header>
        <dui-alert-dialog-title>Cancel this booking?</dui-alert-dialog-title>
        <dui-alert-dialog-description>
            Your reservation for the Marrakech Desert Escape will be cancelled. Cancellation fees may apply.
        </dui-alert-dialog-description>
    </dui-alert-dialog-header>
    <form method="dialog">
        <dui-alert-dialog-footer>
            <dui-alert-dialog-cancel>Keep Booking</dui-alert-dialog-cancel>
            <dui-alert-dialog-action variant="ButtonVariant.Destructive">Cancel Booking</dui-alert-dialog-action>
        </dui-alert-dialog-footer>
    </form>
</dui-alert-dialog>
<script type="module">
    (function () {
        const alertDialog = window.duneui.alertDialog(document.getElementById("--js-alert-dialog-intro-dialog"));
        const triggerButton = document.getElementById("--js-alert-dialog-intro-button");
        const resultDisplay = document.getElementById("--js-alert-dialog-intro-result");

        triggerButton.addEventListener("click", async () => {
            const confirmed = await alertDialog.confirmAsync();
            resultDisplay.innerHTML = confirmed ? "Booking cancelled" : "Booking kept";
        });
    })();
</script>

Manual Result

You can resolve the confirmation programmatically using the confirm() and cancel() methods. This closes the dialog and resolves the pending promise with true or false respectively.

<dui-stack align="StackAlign.Start" class="min-w-md">
    <dui-button variant="ButtonVariant.Outline" id="--js-alert-dialog-manual-button">
        Open Alert Dialog
    </dui-button>
    <label class="text-sm font-bold">Result:</label>
    <div class="font-mono w-full bg-gray-50 p-2" id="--js-alert-dialog-manual-result">-</div>
</dui-stack>
<dui-alert-dialog id="--js-alert-dialog-manual-dialog">
    <dui-alert-dialog-header>
        <dui-alert-dialog-title>Manual Result</dui-alert-dialog-title>
        <dui-alert-dialog-description>
            Demonstrates how you can manually resolve the confirmation.
        </dui-alert-dialog-description>
    </dui-alert-dialog-header>
    <dui-alert-dialog-footer>
        <dui-button id="--js-alert-dialog-manual-button-cancel" variant="ButtonVariant.Outline">
            Cancel
        </dui-button>
        <dui-button id="--js-alert-dialog-manual-button-confirm" variant="ButtonVariant.Outline">
            Confirm
        </dui-button>
    </dui-alert-dialog-footer>
</dui-alert-dialog>
<script type="module">
    (function () {
        const alertDialog = window.duneui.alertDialog(document.getElementById("--js-alert-dialog-manual-dialog"));
        const resultDisplay = document.getElementById("--js-alert-dialog-manual-result");
        const triggerButton = document.getElementById("--js-alert-dialog-manual-button");
        const cancelButton = document.getElementById("--js-alert-dialog-manual-button-cancel");
        const confirmButton = document.getElementById("--js-alert-dialog-manual-button-confirm");

        triggerButton.addEventListener("click", async () => {
            const confirmed = await alertDialog.confirmAsync();
            resultDisplay.innerHTML = confirmed ? "Confirmed" : "Cancelled";
        });
        cancelButton.addEventListener("click", () => {
            alertDialog.cancel();
        });
        confirmButton.addEventListener("click", () => {
            alertDialog.confirm();
        });
    })();
</script>

API Reference

`alertDialog(selector)`

The alertDialog() factory function, exposed as window.duneui.alertDialog, wraps an existing <dialog> element (such as the one rendered by <dui-alert-dialog>) and returns a wrapper object with the methods below. It throws if the element cannot be found or is not a HTMLDialogElement.

Prop

Type

Wrapper methods