Overlay · astro-ui · AlertDialog

AlertDialogJS

role=alertdialog modal that interrupts for a decision.

Features

• role="alertdialog" — announced immediately by assistive tech
• Native <dialog> modality, focus containment, Escape-to-close
• Zero-JS dismissal via <form method="dialog"> (returnValue tells you which action)
• xs / sm / md / lg panel sizes; auto title/description labelling

Usage

---
import { Button, AlertDialog } from "astro-ui";
---

<Button id="open-delete">Delete project</Button>
<AlertDialog id="delete">
  <h2 slot="title">Delete project?</h2>
  <p slot="description">This cannot be undone.</p>
  <Fragment slot="footer">
    <form method="dialog"><Button variant="outline">Cancel</Button></form>
    <form method="dialog">
      <Button variant="destructive" value="confirm">Delete</Button>
    </form>
  </Fragment>
</AlertDialog>

<script>
  document.getElementById("open-delete")?.addEventListener("click", () => {
    document.getElementById("delete")?.showModal();
  });
</script>

Demos

<Button id="open-delete" variant="destructive">Delete project</Button>
<AlertDialog id="delete">
  <h2 slot="title">Delete project?</h2>
  <p slot="description">This cannot be undone.</p>
  <Fragment slot="footer">
    <form method="dialog"><Button variant="outline">Cancel</Button></form>
    <form method="dialog"><Button variant="destructive" value="confirm">Delete</Button></form>
  </Fragment>
</AlertDialog>

<Button id="open-xs">Open xs</Button>
<AlertDialog id="xs" size="xs">
  <h2 slot="title">Extra small</h2>
  <p slot="description">20rem panel for short confirmations.</p>
</AlertDialog>
<Button id="open-lg">Open lg</Button>
<AlertDialog id="lg" size="lg">
  <h2 slot="title">Large</h2>
  <p slot="description">32rem panel when the message needs room.</p>
</AlertDialog>

API

Props

Accessibility

Implemented accessibility features — semantics, ARIA wiring, and keyboard behavior that ship with the component.

• Native <dialog> with role="alertdialog" — interruptive semantics announced as an alert
• aria-labelledby / aria-describedby auto-wired to the title and description slots
• Focus is contained while open; Escape closes via the platform

FAQ

Changelog

Version history mentioning AlertDialog.

Related components

If you are composing interactions in the same family, these usually pair well together.