Alert Dialog

An important confirmation that waits for an explicit response.

Interactive preview

Live specimenTry the component

Installation

Add editable source to an initialized React project. Set up antiflex/ui first if you are new here.

Terminal

npx antiflex-ui@0.1.0-alpha.2 add alert-dialog

This site previews the latest workspace styles and motion. The published alpha keeps its released styles until the next npm release.

Usage

React

<AlertDialog>
  <AlertDialogTrigger variant="danger">Archive project</AlertDialogTrigger>
  <AlertDialogContent size="sm">
    <AlertDialogHeader>
      <AlertDialogTitle>Archive this project?</AlertDialogTitle>
      <AlertDialogDescription>You can restore it later.</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Keep project</AlertDialogCancel>
      <AlertDialogAction onClick={archive}>Archive project</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

API reference

All components forward native attributes, className, and refs to their underlying elements.

Prop	Type	Default
`Root: open / defaultOpen / onOpenChange`	`boolean / boolean / (open: boolean) => void`	`uncontrolled, closed`
`Content: size`	`sm \| md \| lg`	`md`
`Content: initialFocusRef / returnFocusRef`	`RefObject<HTMLElement \| null>`	`first enabled Cancel / invoker`
`Cancel / Action`	`ButtonProps and native button refs`	`secondary / danger`
`Content: dismissOnOutside`	`ignored for alert dialogs`	`always false`

Accessibility

Use a native modal with role=alertdialog for a brief important message that requires a response. Provide one visible AlertDialogTitle, one AlertDialogDescription (or explicit aria-describedby), and clearly named Cancel and Action buttons. Focus starts on the first enabled Cancel unless initialFocusRef deliberately overrides it. Backdrop interaction never dismisses; Escape cancels through onOpenChange unless onCancel prevents it. Action and Cancel request closing after their click handler; preventDefault to keep the dialog open for validation or an asynchronous operation, then close controlled state on success. Async/network work belongs to the application; disabled/loading buttons alone do not block Escape. All Dialog modality, scroll, focus-return, controlled-state, nesting, and ref contracts also apply. If the original invoker becomes disabled or disappears, supply returnFocusRef for the next logical workflow target. The demonstration archives only local sample state and provides a restore action.