Alert Dialog

The AlertDialog primitive wraps Radix AlertDialog for a confirm/cancel flow you want the user to acknowledge deliberately — deleting an account, revoking a key. Unlike Dialog it has no dismiss-by-overlay-click and pairs an AlertDialogAction with an AlertDialogCancel.

Preview

import {  AlertDialog,  AlertDialogAction,  AlertDialogCancel,  AlertDialogContent,  AlertDialogDescription,  AlertDialogFooter,  AlertDialogHeader,  AlertDialogTitle,  AlertDialogTrigger,} from '@web/components/ui/alert-dialog';import { Button } from '@web/components/ui/button';export default function AlertDialogDemo() {  return (    <AlertDialog>      <AlertDialogTrigger asChild>        <Button variant="destructive">Delete account</Button>      </AlertDialogTrigger>      <AlertDialogContent>        <AlertDialogHeader>          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>          <AlertDialogDescription>            This permanently deletes your account and removes your data from our            servers. This action cannot be undone.          </AlertDialogDescription>        </AlertDialogHeader>        <AlertDialogFooter>          <AlertDialogCancel>Cancel</AlertDialogCancel>          <AlertDialogAction variant="destructive">            Delete account          </AlertDialogAction>        </AlertDialogFooter>      </AlertDialogContent>    </AlertDialog>  );}

Import

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

Props

AlertDialogContent accepts every Radix AlertDialog.Content prop plus a size. The table is generated at build time from the real AlertDialogContentProps type in the apps/web source. AlertDialogAction and AlertDialogCancel also take the Button variant / size props.

Prop

Type

Preview

Import

Props

On this page