Alert Dialog

A modal that interrupts the user to confirm an important action. It can't be dismissed by clicking outside.

OverlaysRadix Alert Dialog

Playground

Tweak the props, the preview and the code follow.

Props

variant

media

title

action

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="outline">Open alert</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogMedia variant="destructive">
        <Trash2 />
      </AlertDialogMedia>
      <AlertDialogTitle>Delete 3 deployments?</AlertDialogTitle>
      <AlertDialogDescription>This cannot be undone.</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction variant="destructive">Delete</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Installation

npx @plumsydev/plum-ui add alert-dialog

Also pulls in button, dialog automatically.

Usage

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="outline">Delete</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>This cannot be undone.</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction variant="destructive">Delete</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Examples

Destructive with confirmation

Gate irreversible actions behind typing the resource name.

Async action

Keep the dialog open while the request runs. AlertDialogMedia pops in with a spring.

API Reference

AlertDialog

Prop	Type	Default
`open` Controlled open state.	`boolean`	`—`
`onOpenChange` Called when the open state changes.	`(open: boolean) => void`	`—`

AlertDialogAction

Confirms and closes the dialog. Styled as a button.

Prop	Type	Default
`variant` Button style of the confirm action.	`"default" \| "destructive" \| "brand"`	`"default"`

AlertDialogMedia

Optional icon above the title. Pops in with a spring right after the panel.

Prop	Type	Default
`variant` Tint of the icon circle.	`"default" \| "destructive" \| "warning"`	`"default"`

AlertDialogCancel

Closes the dialog. Receives focus when the dialog opens.

Notes

Focus lands on the cancel button by default, so a stray Enter never confirms a destructive action.
For async confirmations, control open and use a regular Button instead of AlertDialogAction, which closes immediately.

PreviousAlert NextAnimated List