Alert Dialog

1
import {
2
  AlertDialog,
3
  AlertDialogAction,
4
  AlertDialogCancel,
5
  AlertDialogContent,
6
  AlertDialogDescription,
7
  AlertDialogFooter,
8
  AlertDialogHeader,
9
  AlertDialogTitle,
10
  AlertDialogTrigger,
11
} from "~/components/ui/alert-dialog";
12
import { Button } from "~/components/ui/button";

1
<AlertDialog>
2
  <AlertDialogTrigger as={Button} variant="outline">
3
    Show Dialog
4
  </AlertDialogTrigger>
5
  <AlertDialogContent>
6
    <AlertDialogHeader>
7
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
8
      <AlertDialogDescription>
9
        This action cannot be undone. This will permanently delete your account
10
        from our servers.
11
      </AlertDialogDescription>
12
    </AlertDialogHeader>
13
    <AlertDialogFooter>
14
      <AlertDialogCancel>Cancel</AlertDialogCancel>
15
      <AlertDialogAction>Continue</AlertDialogAction>
16
    </AlertDialogFooter>
17
  </AlertDialogContent>
18
</AlertDialog>

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