Alert Dialog
A modal dialog that interrupts the user with important content and expects a confirm or cancel response.
<div class="flex justify-center">
<dui-button variant="ButtonVariant.Outline" commandfor="--alert-dialog-intro" command="show-modal">
Show Dialog
</dui-button>
</div>
<dui-alert-dialog id="--alert-dialog-intro">
<dui-alert-dialog-header>
<dui-alert-dialog-title>Discard unsaved changes?</dui-alert-dialog-title>
<dui-alert-dialog-description>
You have unsaved changes to your itinerary for Trip #TRV-987. If you continue, your edits will be lost.
</dui-alert-dialog-description>
</dui-alert-dialog-header>
<form method="dialog">
<dui-alert-dialog-footer>
<dui-alert-dialog-cancel>Keep editing</dui-alert-dialog-cancel>
<dui-alert-dialog-action>Continue</dui-alert-dialog-action>
</dui-alert-dialog-footer>
</form>
</dui-alert-dialog>Usage
<dui-alert-dialog> renders a standard HTML dialog element, styled as a centered confirmation modal. Open it with the Invoker Commands API by adding commandfor and command="show-modal" to a <dui-button>.
Unlike <dui-dialog>, an alert dialog is not light-dismissable: pressing Esc cancels it, but clicking the backdrop does nothing (closedby="closerequest" by default). Wrap the footer in a <form method="dialog"> and use <dui-alert-dialog-action> / <dui-alert-dialog-cancel> so the dialog closes with the correct returnValue.
<dui-button commandfor="--confirm" command="show-modal">
Show Dialog
</dui-button>
<dui-alert-dialog id="--confirm">
<dui-alert-dialog-header>
<dui-alert-dialog-title>Cancel this booking?</dui-alert-dialog-title>
<dui-alert-dialog-description>
This action cannot be undone.
</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>Continue</dui-alert-dialog-action>
</dui-alert-dialog-footer>
</form>
</dui-alert-dialog><dui-alert-dialog-cancel> renders a submit button with value="cancel" and <dui-alert-dialog-action> one with value="confirm", so the wrapping method="dialog" form closes the dialog and sets returnValue accordingly.
Examples
Destructive action
Pass variant="ButtonVariant.Destructive" to <dui-alert-dialog-action> for irreversible operations such as deleting data.
<div class="flex justify-center">
<dui-button variant="ButtonVariant.Destructive" commandfor="--alert-dialog-destructive" command="show-modal">
Cancel Booking
</dui-button>
</div>
<dui-alert-dialog id="--alert-dialog-destructive">
<dui-alert-dialog-header>
<dui-alert-dialog-title>Cancel this booking?</dui-alert-dialog-title>
<dui-alert-dialog-description>
This action cannot be undone. Your reservation for Trip #TRV-987 to Paris will be permanently cancelled and your seats released.
</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>Size
Use the size attribute (AlertDialogSize.Default or AlertDialogSize.Small) to switch between the wider, left-aligned default layout and the compact, centered small layout.
<div class="flex justify-center gap-2">
<dui-button variant="ButtonVariant.Outline" commandfor="--alert-dialog-size-default" command="show-modal">
Default
</dui-button>
<dui-button variant="ButtonVariant.Outline" commandfor="--alert-dialog-size-sm" command="show-modal">
Small
</dui-button>
</div>
<dui-alert-dialog id="--alert-dialog-size-default" size="AlertDialogSize.Default">
<dui-alert-dialog-header>
<dui-alert-dialog-title>Delete this itinerary?</dui-alert-dialog-title>
<dui-alert-dialog-description>
Your saved itinerary for Bangkok will be permanently deleted. On larger screens the default alert dialog is wider and left-aligns its content.
</dui-alert-dialog-description>
</dui-alert-dialog-header>
<form method="dialog">
<dui-alert-dialog-footer>
<dui-alert-dialog-cancel>Cancel</dui-alert-dialog-cancel>
<dui-alert-dialog-action variant="ButtonVariant.Destructive">Delete</dui-alert-dialog-action>
</dui-alert-dialog-footer>
</form>
</dui-alert-dialog>
<dui-alert-dialog id="--alert-dialog-size-sm" size="AlertDialogSize.Small">
<dui-alert-dialog-header>
<dui-alert-dialog-title>Delete this itinerary?</dui-alert-dialog-title>
<dui-alert-dialog-description>
Your saved Bangkok itinerary will be permanently deleted. The small alert dialog stays narrow and centers its content.
</dui-alert-dialog-description>
</dui-alert-dialog-header>
<form method="dialog">
<dui-alert-dialog-footer>
<dui-alert-dialog-cancel>Cancel</dui-alert-dialog-cancel>
<dui-alert-dialog-action variant="ButtonVariant.Destructive">Delete</dui-alert-dialog-action>
</dui-alert-dialog-footer>
</form>
</dui-alert-dialog>Media
Add a <dui-alert-dialog-media> slot to the header to show a media element such as an icon or image above the title.
<div class="flex justify-center">
<dui-button variant="ButtonVariant.Outline" commandfor="--alert-dialog-media" command="show-modal">
Share Trip
</dui-button>
</div>
<dui-alert-dialog id="--alert-dialog-media">
<dui-alert-dialog-header>
<dui-alert-dialog-media>
<dui-icon name="circle-fading-plus"/>
</dui-alert-dialog-media>
<dui-alert-dialog-title>Share this trip?</dui-alert-dialog-title>
<dui-alert-dialog-description>
Anyone with the link will be able to view and edit your itinerary for Trip #TRV-987.
</dui-alert-dialog-description>
</dui-alert-dialog-header>
<form method="dialog">
<dui-alert-dialog-footer>
<dui-alert-dialog-cancel>Cancel</dui-alert-dialog-cancel>
<dui-alert-dialog-action>Share</dui-alert-dialog-action>
</dui-alert-dialog-footer>
</form>
</dui-alert-dialog>Small with media
Combine size="AlertDialogSize.Small" with <dui-alert-dialog-media> for a compact, centered dialog that still leads with an icon.
<div class="flex justify-center">
<dui-button variant="ButtonVariant.Outline" commandfor="--alert-dialog-small-media" command="show-modal">
Show Dialog
</dui-button>
</div>
<dui-alert-dialog id="--alert-dialog-small-media" size="AlertDialogSize.Small">
<dui-alert-dialog-header>
<dui-alert-dialog-media>
<dui-icon name="map-pin"/>
</dui-alert-dialog-media>
<dui-alert-dialog-title>Enable location services?</dui-alert-dialog-title>
<dui-alert-dialog-description>
Voyager Travel uses your location to show flights and stays near you.
</dui-alert-dialog-description>
</dui-alert-dialog-header>
<form method="dialog">
<dui-alert-dialog-footer>
<dui-alert-dialog-cancel>Not now</dui-alert-dialog-cancel>
<dui-alert-dialog-action>Allow</dui-alert-dialog-action>
</dui-alert-dialog-footer>
</form>
</dui-alert-dialog>JavaScript API
For the common "await a confirmation before acting" flow, use the window.duneui.alertDialog() helper. Its confirmAsync() method resolves to true when the user activates the action button and false on cancel or Esc.
alertDialog() is built on the same primitive as the dialog()
helper; use it whenever you want to drive a confirmation in an
async/await style.
<dui-stack align="StackAlign.Start" class="min-w-md">
<dui-button variant="ButtonVariant.Destructive" id="--alert-dialog-js-button">
Remove from Wishlist
</dui-button>
<label class="text-sm font-bold">Result:</label>
<div class="font-mono w-full bg-gray-50 p-2" id="--alert-dialog-js-result">-</div>
</dui-stack>
<dui-alert-dialog id="--alert-dialog-js">
<dui-alert-dialog-header>
<dui-alert-dialog-title>Remove from your wishlist?</dui-alert-dialog-title>
<dui-alert-dialog-description>
Kyoto will be removed from your saved destinations. You can add it back anytime.
</dui-alert-dialog-description>
</dui-alert-dialog-header>
<form method="dialog">
<dui-alert-dialog-footer>
<dui-alert-dialog-cancel>Keep it</dui-alert-dialog-cancel>
<dui-alert-dialog-action variant="ButtonVariant.Destructive">Remove</dui-alert-dialog-action>
</dui-alert-dialog-footer>
</form>
</dui-alert-dialog>
<script type="module">
(function () {
const alertDialog = window.duneui.alertDialog(document.getElementById("--alert-dialog-js"));
const triggerButton = document.getElementById("--alert-dialog-js-button");
const resultDisplay = document.getElementById("--alert-dialog-js-result");
triggerButton.addEventListener("click", async () => {
const confirmed = await alertDialog.confirmAsync();
resultDisplay.innerHTML = confirmed ? "Removed from wishlist" : "Cancelled";
});
})();
</script>