Loading...
Loading...
> A modal dialog that interrupts the user with important content and expects a response.
1import {2 AlertDialog,3 AlertDialogAction,4 AlertDialogCancel,5 AlertDialogContent,6 AlertDialogDescription,7 AlertDialogFooter,8 AlertDialogHeader,9 AlertDialogTitle,10 AlertDialogTrigger,11} from "@/components/ui/alert-dialog"
1<AlertDialog>2 <AlertDialogTrigger asChild>3 <Button variant="outline">> SHOW ALERT</Button>4 </AlertDialogTrigger>5 <AlertDialogContent>6 <AlertDialogHeader>7 <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>8 <AlertDialogDescription>9 This action cannot be undone.10 </AlertDialogDescription>11 </AlertDialogHeader>12 <AlertDialogFooter>13 <AlertDialogCancel>> CANCEL</AlertDialogCancel>14 <AlertDialogAction>> CONTINUE</AlertDialogAction>15 </AlertDialogFooter>16 </AlertDialogContent>17</AlertDialog>
1<AlertDialog>2 <AlertDialogTrigger asChild>3 <Button variant="destructive">> DELETE ITEM</Button>4 </AlertDialogTrigger>5 <AlertDialogContent>6 <AlertDialogHeader>7 <AlertDialogTitle>Delete this item?</AlertDialogTitle>8 <AlertDialogDescription>9 This will permanently delete this item.10 </AlertDialogDescription>11 </AlertDialogHeader>12 <AlertDialogFooter>13 <AlertDialogCancel>> CANCEL</AlertDialogCancel>14 <AlertDialogAction className="bg-destructive">15 > DELETE16 </AlertDialogAction>17 </AlertDialogFooter>18 </AlertDialogContent>19</AlertDialog>
1<AlertDialog>2 <AlertDialogTrigger asChild>3 <Button variant="secondary">> SHOW NOTICE</Button>4 </AlertDialogTrigger>5 <AlertDialogContent>6 <AlertDialogHeader>7 <AlertDialogTitle>Notice</AlertDialogTitle>8 <AlertDialogDescription>9 Your changes have been saved successfully.10 </AlertDialogDescription>11 </AlertDialogHeader>12 <AlertDialogFooter>13 <AlertDialogAction>> OK</AlertDialogAction>14 </AlertDialogFooter>15 </AlertDialogContent>16</AlertDialog>
1<AlertDialog>2 <AlertDialogTrigger asChild>3 <Button variant="outline">> PROCEED WITH CAUTION</Button>4 </AlertDialogTrigger>5 <AlertDialogContent>6 <AlertDialogHeader>7 <AlertDialogTitle>Warning</AlertDialogTitle>8 <AlertDialogDescription>9 This action may affect other users.10 </AlertDialogDescription>11 </AlertDialogHeader>12 <AlertDialogFooter>13 <AlertDialogCancel>> GO BACK</AlertDialogCancel>14 <AlertDialogAction>> I UNDERSTAND</AlertDialogAction>15 </AlertDialogFooter>16 </AlertDialogContent>17</AlertDialog>
1const [open, setOpen] = useState(false);23<AlertDialog open={open} onOpenChange={setOpen}>4 <AlertDialogTrigger asChild>5 <Button>> CONTROLLED ALERT</Button>6 </AlertDialogTrigger>7 <AlertDialogContent>8 <AlertDialogHeader>9 <AlertDialogTitle>Controlled State</AlertDialogTitle>10 </AlertDialogHeader>11 <AlertDialogFooter>12 <AlertDialogCancel>> CANCEL</AlertDialogCancel>13 <AlertDialogAction>> CONTINUE</AlertDialogAction>14 </AlertDialogFooter>15 </AlertDialogContent>16</AlertDialog>
1<AlertDialog>2 <AlertDialogTrigger asChild>3 <Button variant="ghost">> CUSTOM ACTIONS</Button>4 </AlertDialogTrigger>5 <AlertDialogContent>6 <AlertDialogHeader>7 <AlertDialogTitle>Subscribe to newsletter?</AlertDialogTitle>8 <AlertDialogDescription>9 Get the latest updates delivered to your inbox.10 </AlertDialogDescription>11 </AlertDialogHeader>12 <AlertDialogFooter>13 <AlertDialogCancel>> NOT NOW</AlertDialogCancel>14 <AlertDialogAction>> SUBSCRIBE</AlertDialogAction>15 </AlertDialogFooter>16 </AlertDialogContent>17</AlertDialog>
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | undefined | Control the open state of the alert dialog. |
| onOpenChange | (open: boolean) => void | undefined | Event handler called when the open state changes. |
| defaultOpen | boolean | false | The initial open state in uncontrolled mode. |
✓ Use Alert Dialog when:
✗ Don't use when:
Best Practices: