--- outline: deep --- # Alert dialog An interruptive confirmation dialog built on [``](./dialog). It renders its own cancel/confirm actions, exposes `role="alertdialog"`, and closes when the user picks an action — unless you cancel the event. Use it to confirm a consequential action, not for generic content. **``** — Custom Element · Shadow DOM ## Options ### Basic Open with `command="--show"` on a trigger button. The cancel and confirm actions are rendered for you; label them with `cancel-text` and `confirm-text`. The dialog closes automatically when an action is picked. ```html Once published, “Spring collection 2026” becomes visible to everyone on your storefront. You can still edit it afterwards. ``` ### Danger Add `tone="danger"` to render the confirm action as destructive — for delete, discard, or other irreversible actions. ```html This permanently deletes the Acme project and everything in it. This action cannot be undone. ``` ### Custom actions Slot your own `confirm` / `cancel` elements — a link, a button with an icon, any tone — to replace the built-in buttons. They still drive the `confirm` / `cancel` events. Keep the slotted element focusable. ```html Jane Cooper will get access to the Acme workspace and can edit all projects. Not now ``` ## Examples ### Reacting to the choice Listen for `confirm` and `cancel`. Both fire on the user's intent; the dialog closes on its own afterwards. ```js const dialog = document.getElementById('confirm-delete'); dialog.addEventListener('confirm', () => deleteProject()); dialog.addEventListener('cancel', () => { /* optional: the user backed out */ }); ``` ### Async confirmation `confirm` is cancelable. Call `preventDefault()` to keep the dialog open while an async task runs, set `loading` to show a spinner on the confirm action, then close it once the work resolves. The cancel action stays operable throughout. Try it — the confirm button stays busy for ~1.8s:

This action cannot be undone. This will permanently delete your account and remove your data from our servers.

```html This action cannot be undone. This will permanently delete your account and remove your data from our servers. ``` ```js const dialog = document.getElementById('confirm-delete'); dialog.addEventListener('confirm', async (event) => { event.preventDefault(); // keep the dialog open during the request dialog.loading = true; // spinner on the confirm action await deleteAccount(); dialog.loading = false; dialog.open = false; // close once it's done }); ``` ## Accessibility ### Criteria - **Role** — Rendered as a native `