[ [UI.21] Components ] Alert Dialog

Alert Dialog

> A modal dialog that interrupts the user with important content and expects a response.

Import

[ [0x5B] IMPORT ]

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"

Preview

[ [0x00] ALERT DIALOG ]

1<AlertDialog>
2  <AlertDialogTrigger asChild>
3    <Button variant="outline">&gt; 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>&gt; CANCEL</AlertDialogCancel>
14      <AlertDialogAction>&gt; CONTINUE</AlertDialogAction>
15    </AlertDialogFooter>
16  </AlertDialogContent>
17</AlertDialog>

Variants

[ [0x00] DELETE CONFIRMATION ]

1<AlertDialog>
2  <AlertDialogTrigger asChild>
3    <Button variant="destructive">&gt; 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>&gt; CANCEL</AlertDialogCancel>
14      <AlertDialogAction className="bg-destructive">
15        &gt; DELETE
16      </AlertDialogAction>
17    </AlertDialogFooter>
18  </AlertDialogContent>
19</AlertDialog>

[ [0x00] CONFIRMATION ONLY ]

1<AlertDialog>
2  <AlertDialogTrigger asChild>
3    <Button variant="secondary">&gt; 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>&gt; OK</AlertDialogAction>
14    </AlertDialogFooter>
15  </AlertDialogContent>
16</AlertDialog>

[ [0x00] WARNING ]

1<AlertDialog>
2  <AlertDialogTrigger asChild>
3    <Button variant="outline">&gt; 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>&gt; GO BACK</AlertDialogCancel>
14      <AlertDialogAction>&gt; I UNDERSTAND</AlertDialogAction>
15    </AlertDialogFooter>
16  </AlertDialogContent>
17</AlertDialog>

[ [0x00] CONTROLLED STATE ]

1const [open, setOpen] = useState(false);
2
3<AlertDialog open={open} onOpenChange={setOpen}>
4  <AlertDialogTrigger asChild>
5    <Button>&gt; CONTROLLED ALERT</Button>
6  </AlertDialogTrigger>
7  <AlertDialogContent>
8    <AlertDialogHeader>
9      <AlertDialogTitle>Controlled State</AlertDialogTitle>
10    </AlertDialogHeader>
11    <AlertDialogFooter>
12      <AlertDialogCancel>&gt; CANCEL</AlertDialogCancel>
13      <AlertDialogAction>&gt; CONTINUE</AlertDialogAction>
14    </AlertDialogFooter>
15  </AlertDialogContent>
16</AlertDialog>

[ [0x00] CUSTOM ACTIONS ]

1<AlertDialog>
2  <AlertDialogTrigger asChild>
3    <Button variant="ghost">&gt; 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>&gt; NOT NOW</AlertDialogCancel>
14      <AlertDialogAction>&gt; SUBSCRIBE</AlertDialogAction>
15    </AlertDialogFooter>
16  </AlertDialogContent>
17</AlertDialog>

API Reference

[ [0x00] API REFERENCE ]

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.

Accessibility

[ [0x58] A11Y ]

Implements ARIA alertdialog pattern with role='alertdialog'
AlertDialogTitle provides accessible name via aria-labelledby
AlertDialogDescription provides description via aria-describedby
Focus is trapped within the dialog when open
Escape key closes the dialog
Focus returns to trigger element when closed
AlertDialogAction and AlertDialogCancel have clear semantic meaning
Keyboard navigation between action buttons with Tab/Shift+Tab

When to Use

[ [0xE9] USAGE GUIDANCE ]

✓ Use Alert Dialog when:

• Simple yes/no decision required (delete, confirm, proceed)
• Destructive actions needing explicit confirmation (delete account, remove data)
• Critical warnings that must be acknowledged before proceeding
• Single action with clear consequences (logout, discard changes)
• Blocking user from proceeding without decision (terms acceptance)

✗ Don't use when:

• Complex forms with multiple inputs (use Dialog instead)
• Temporary action feedback (use Toast for success/error messages)
• Persistent warnings that shouldn't block page (use Alert inline)
• Multiple actions or options needed (use Dialog for flexibility)
• Non-critical information that can be dismissed (use Toast or Alert)

Best Practices:

• Always provide both Cancel and Action buttons (gives user clear choice)
• Use destructive styling for dangerous actions (red action button)
• Keep title short and clear: "Delete file?" not "Are you sure you want to delete this file?"
• Description explains consequences: "This action cannot be undone"
• Action button text matches the action: "Delete", "Remove", "Confirm"
• AlertDialog for single decision, Dialog for complex forms/workflows

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"

Preview

[ [0x00] ALERT DIALOG ]

1<AlertDialog>
2  <AlertDialogTrigger asChild>
3    <Button variant="outline">&gt; 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>&gt; CANCEL</AlertDialogCancel>
14      <AlertDialogAction>&gt; CONTINUE</AlertDialogAction>
15    </AlertDialogFooter>
16  </AlertDialogContent>
17</AlertDialog>

Variants

[ [0x00] DELETE CONFIRMATION ]

1<AlertDialog>
2  <AlertDialogTrigger asChild>
3    <Button variant="destructive">&gt; 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>&gt; CANCEL</AlertDialogCancel>
14      <AlertDialogAction className="bg-destructive">
15        &gt; DELETE
16      </AlertDialogAction>
17    </AlertDialogFooter>
18  </AlertDialogContent>
19</AlertDialog>

[ [0x00] CONFIRMATION ONLY ]

1<AlertDialog>
2  <AlertDialogTrigger asChild>
3    <Button variant="secondary">&gt; 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>&gt; OK</AlertDialogAction>
14    </AlertDialogFooter>
15  </AlertDialogContent>
16</AlertDialog>

[ [0x00] WARNING ]

1<AlertDialog>
2  <AlertDialogTrigger asChild>
3    <Button variant="outline">&gt; 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>&gt; GO BACK</AlertDialogCancel>
14      <AlertDialogAction>&gt; I UNDERSTAND</AlertDialogAction>
15    </AlertDialogFooter>
16  </AlertDialogContent>
17</AlertDialog>

[ [0x00] CONTROLLED STATE ]

1const [open, setOpen] = useState(false);
2
3<AlertDialog open={open} onOpenChange={setOpen}>
4  <AlertDialogTrigger asChild>
5    <Button>&gt; CONTROLLED ALERT</Button>
6  </AlertDialogTrigger>
7  <AlertDialogContent>
8    <AlertDialogHeader>
9      <AlertDialogTitle>Controlled State</AlertDialogTitle>
10    </AlertDialogHeader>
11    <AlertDialogFooter>
12      <AlertDialogCancel>&gt; CANCEL</AlertDialogCancel>
13      <AlertDialogAction>&gt; CONTINUE</AlertDialogAction>
14    </AlertDialogFooter>
15  </AlertDialogContent>
16</AlertDialog>

[ [0x00] CUSTOM ACTIONS ]

1<AlertDialog>
2  <AlertDialogTrigger asChild>
3    <Button variant="ghost">&gt; 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>&gt; NOT NOW</AlertDialogCancel>
14      <AlertDialogAction>&gt; 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