Alert Dialog
Alert Dialog is a native web component built on the <dialog> element (showModal, with focus trap and backdrop) that interrupts the flow to require a decision. Unlike a regular dialog, it ignores backdrop clicks and the ESC key, so the user must choose between cancel and confirm. Use it for destructive or irreversible actions, such as deleting a record or leaving without saving.
Preview
<button id="open-ad">Delete account</button>
<pura-alert-dialog
id="ad"
title="Are you sure?"
description="This action cannot be undone. Your account will be permanently removed."
>
<button slot="cancel" data-action="cancel">Cancel</button>
<button slot="action" data-action="confirm">Yes, delete</button>
</pura-alert-dialog>
<script type="module">
const dialog = document.getElementById("ad");
document.getElementById("open-ad").addEventListener("click", () => dialog.open());
dialog.addEventListener("confirm", () => console.log("confirmed"));
dialog.addEventListener("cancel", () => console.log("canceled"));
</script>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
title | string | "" | Title shown in the dialog header. |
description | string | "" | Body text, used when the default slot is empty. |
open | boolean | false | Controls visibility; present = open (reflects the state and triggers showModal/close). |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/alert-dialog.js"></script>import "./pura/lib/alert-dialog.js";