Alert Dialog — Vanilla

Confirm/cancel dialog with vanilla HTML. Open/close via JS.

Alert Dialog

Modal with role="alertdialog". Wrap overlay and dialog in alert-dialog-root so the overlay stacks behind the dialog; then alert-dialog__content, alert-dialog__title, alert-dialog__description, alert-dialog__actions. Wire open/close and focus trap in JS.

Add this component

The command below includes <strong>AlertDialog</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun
Structure (open via JS)

Use Astro or Svelte component for full behavior, or wire your own script to show/hide and focus.

HTML

html html 
<!-- Use .alert-dialog-root so overlay stacks behind the dialog. open/close via JS (openAlertDialog_<id> / closeAlertDialog_<id>). -->
<div class="alert-dialog-root">
  <div class="alert-dialog__overlay" data-alert-dialog-overlay id="my-alert-overlay" aria-hidden="true"></div>
  <div class="alert-dialog" role="alertdialog" aria-modal="true" aria-labelledby="alert-title" aria-describedby="alert-desc" id="my-alert" hidden>
    <div class="alert-dialog__content">
      <h2 class="alert-dialog__title" id="alert-title">Delete item?</h2>
      <p class="alert-dialog__description" id="alert-desc">This action cannot be undone.</p>
      <div class="alert-dialog__actions">
        <button type="button" class="btn" data-alert-dialog-close>Cancel</button>
        <button type="button" class="btn btn-error" data-alert-dialog-close>Delete</button>
      </div>
    </div>
  </div>
</div>

Other frameworks: Astro · Svelte · Vue · React