Alert dialog

Interruptive confirmation for destructive or irreversible actions. Prefer a regular dialog when the user needs more context or form fields.

Examples

Confirm discard

Overview

Alert dialog blocks the page until the user confirms or cancels. Use it for discard, delete, and other high-consequence choices. Compose with portal, backdrop, popup, title, description, and close actions. Style triggers and closes with Button via Base UI's render prop.

tsx

import {
  AlertDialog,
  AlertDialogTrigger,
  AlertDialogPortal,
  AlertDialogBackdrop,
  AlertDialogPopup,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogClose,
  Button,
} from "@standard-ui/react"

<AlertDialog>
  <AlertDialogTrigger render={<Button variant="outline" />}>
    Discard draft
  </AlertDialogTrigger>
  {/* portal + popup */}
</AlertDialog>

Usage

Actions

Put Cancel as an outline close and the destructive action as a destructive close. Both should dismiss the dialog — wire the destructive path to your delete or discard handler via onClick on that close.

tsx

<div className="flex justify-end gap-2">
  <AlertDialogClose render={<Button variant="outline" />}>
    Cancel
  </AlertDialogClose>
  <AlertDialogClose
    render={<Button variant="destructive" />}
    onClick={handleDiscard}
  >
    Discard
  </AlertDialogClose>
</div>

Copy

Title the consequence as a question. Description should state what is lost and whether it can be undone.

tsx

<AlertDialogHeader>
  <AlertDialogTitle>Discard draft?</AlertDialogTitle>
  <AlertDialogDescription>
    Your unsaved changes will be lost. This can't be undone.
  </AlertDialogDescription>
</AlertDialogHeader>

API

Parts mirror Base UI Alert Dialog. Prefer the render prop with Button on trigger and close for consistent button styles.

Part	Role
AlertDialog	Root state and open control.
AlertDialogTrigger	Opens the dialog. Use Button via render.
AlertDialogPortal	Renders overlay content outside the tree.
AlertDialogBackdrop	Dimmed layer behind the popup.
AlertDialogPopup	Centered surface for title, body, and actions.
AlertDialogHeader	Groups title and description with tight spacing.
AlertDialogTitle	Accessible dialog title.
AlertDialogDescription	Supporting explanation of the consequence.
AlertDialogClose	Dismisses the dialog. Style with Button.