Composite
Alert Dialog CSS-only
A confirmation dialog for destructive or irreversible actions. Same shell as Dialog, but the user must press a button to close — backdrop click and Escape are suppressed.
About
Overview
Use Alert Dialog when accidental dismissal would be costly — deleting an account, force-quitting a long upload, sending an email that can't be unsent. The dialog stays open until the user explicitly chooses Cancel or the destructive action; there's no "click outside to ignore."
Reserve alert dialogs for genuine destructive moments. If every confirm uses an alert dialog, users learn to dismiss them on autopilot.
Live
Demo
<button type="button" onclick="confirmDelete.showModal()">Delete account</button>
<dialog id="confirmDelete" class="ren-alert-dialog"
aria-labelledby="cd-title" aria-describedby="cd-description" closedby="none">
<h2 id="cd-title" class="ren-alert-dialog-title">Delete this account?</h2>
<p id="cd-description" class="ren-alert-dialog-description">
All projects, files, and history will be permanently removed.
</p>
<form method="dialog" class="ren-alert-dialog-actions">
<button value="cancel" class="ren-btn ren-btn-secondary">Keep account</button>
<button value="delete" class="ren-btn ren-btn-danger">Delete account</button>
</form>
</dialog>Reference
API
Alert Dialog uses the native <dialog> API directly. The component supplies the decision-focused visual treatment; the browser owns modality, focus, and form return values.
| Class / element | Effect |
|---|---|
.ren-alert-dialog | Class applied directly to a native <dialog>. |
closedby="none" | Requires an explicit action instead of Escape or backdrop dismissal. |
showModal() | Opens the alert in the top layer and makes background content inert. |
Read the selected action from the native dialog's returnValue after its close event.
Inclusive by default
Accessibility
- A real
<dialog>exposes modal semantics through the platform and is labelled by its decision heading. - Focus is trapped inside until a button is clicked.
- Esc and light dismissal are suppressed with
closedby="none". - Backdrop click does nothing — the user must commit to a choice.
Pair the destructive button with the destructive label. "Delete account" — not "Confirm". Users who scan only the buttons should still understand what they're confirming.