Overlays

Alert Dialog

A modal dialog that interrupts the user to confirm a destructive or important action. Requires explicit acknowledgment before proceeding.

Sourcesrc/components/ui/alert-dialog.tsx

Confirmation Dialog

Import

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@mikenotthepope/substrateui"

Composition

AlertDialog
├── AlertDialogTrigger
└── AlertDialogContent
    ├── AlertDialogHeader
    │   ├── AlertDialogTitle
    │   └── AlertDialogDescription
    └── AlertDialogFooter
        ├── AlertDialogCancel
        └── AlertDialogAction

Accessibility

Built on Base UI primitives, so focus is trapped inside the alert dialog while open and restored to the trigger on close. Unlike regular Dialog, Escape does not dismiss — the user must choose Cancel or Action explicitly, which is appropriate for destructive confirmations.

Every alert dialog must have an AlertDialogTitle and should include an AlertDialogDescription that explains the consequences of the action. The description is wired up via aria-describedby automatically.

API Reference

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state of the alert dialog.
`onOpenChange`	`(open: boolean) => void`	—	Callback fired when the open state changes.