Alert Dialog

A confirmation that interrupts on purpose — the same native <dialog> as the modal, with light dismiss switched off and alertdialog semantics. The whole diff is a few attributes.

dialogexit animations

PreviewCode

<button
  type="button"
  commandfor="dlg-account"
  command="show-modal"
  class="inline-flex h-9 cursor-pointer items-center justify-center gap-2 rounded-lg border border-input bg-transparent px-4 text-sm font-medium whitespace-nowrap text-foreground transition-colors hover:bg-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
>
  Delete account
</button>

<dialog
  id="dlg-account"
  role="alertdialog"
  closedby="closerequest"
  aria-labelledby="dlg-account-title"
  aria-describedby="dlg-account-desc"
  class="m-auto w-[min(92vw,26rem)] translate-y-2.5 scale-[.97] rounded-xl border border-border bg-card p-6 text-card-foreground opacity-0 shadow-2xl overscroll-none transition-all transition-discrete duration-200 backdrop:bg-black/0 backdrop:backdrop-blur-none backdrop:overflow-hidden backdrop:overscroll-contain backdrop:transition-all backdrop:transition-discrete backdrop:duration-200 open:translate-y-0 open:scale-100 open:opacity-100 open:backdrop:bg-black/45 open:backdrop:backdrop-blur-xs starting:open:translate-y-2.5 starting:open:scale-[.97] starting:open:opacity-0 starting:open:backdrop:bg-black/0 starting:open:backdrop:backdrop-blur-none"
>
  <h3 id="dlg-account-title" class="text-base font-semibold tracking-tight">Are you absolutely sure?</h3>
  <p id="dlg-account-desc" class="mt-1 mb-5 text-sm text-muted-foreground">
    This permanently deletes your account and all of its data. This action cannot be undone.
  </p>
  <div class="flex justify-end gap-2">
    <button
      type="button"
      commandfor="dlg-account"
      command="close"
      class="inline-flex h-9 cursor-pointer items-center justify-center gap-2 rounded-lg border border-input bg-transparent px-4 text-sm font-medium whitespace-nowrap text-foreground transition-colors hover:bg-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
    >
      Cancel
    </button>
    <button
      type="button"
      commandfor="dlg-account"
      command="close"
      class="inline-flex h-9 cursor-pointer items-center justify-center gap-2 rounded-lg bg-destructive px-4 text-sm font-medium whitespace-nowrap text-white transition-opacity hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-destructive"
    >
      Yes, delete account
    </button>
  </div>
</dialog>

Dialog vs Alert Dialog

An alert dialog interrupts to demand a decision, usually a destructive one, so a stray click on the backdrop must not dismiss it. Same element as Dialog but with a different dismissal policy.

How it works

closedby="closerequest" prevents the user from dismissing the dialog by clicking on the backdrop. This is also the default behavior in browsers without closedby support, so the dismissal policy is identical everywhere <dialog> exists.
role="alertdialog" tells screen readers this is an interruption that needs a response, and with aria-describedby pointing at the consequence text, the question is announced in full when the dialog opens.
Everything else — top layer, focus trap, inert background, the overscroll-none scroll-lock, the declarative commandfor trigger, the entry/exit animation — is the Dialog verbatim.

Accessibility

Focus lands on the first focusable element when the dialog opens — here that’s Cancel, because it comes first in the markup. That’s the right default for a destructive confirm: Enter pressed out of reflex backs out instead of deleting. Keep the safe action first in source order.

Browser support

Minimum stable version per engine, resolved at build time from MDN's browser-compat-data; Baseline status from the official web-features dataset. Everything degrades gracefully — the “when missing” column is the actual behavior, not a broken page.

Feature	Chrome	Edge	Firefox	Safari	When missing
<dialog> elementBaseline · widely available	37	79	98	15.4	Baseline, widely available. Modal behavior, focus handling and Esc-to-close are native.
Invoker commands (commandfor / command)Baseline 2025 · newly available	135	135	144	26.2	Buttons with commandfor do nothing. Until Baseline reaches your audience, open the dialog with a 3-line shim or from your framework.
Entry/exit animations (allow-discrete + @starting-style)Baseline 2024 · newly available	117	117	129	17.5	Elements appear and disappear instantly. Nothing breaks — you just lose the animation.

† @supports cannot test at-rules, so the badge checks transition-behavior: allow-discrete, which co-shipped with @starting-style in every engine.

‡ HTML feature — @supports can only test CSS, and we ship no JS to detect it, so it gets no live badge.