Alert Dialog

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'
12import { Button } from '@/components/ui/button'
13
14export function AlertDialogDemo() {
15    return (
16        <AlertDialog>
17            <AlertDialogTrigger asChild>
18                <Button>Open Dialog</Button>
19            </AlertDialogTrigger>
20            <AlertDialogContent>
21                <AlertDialogHeader>
22                    <AlertDialogTitle>
23                        Are you sure you want to delete this item?
24                    </AlertDialogTitle>
25                    <AlertDialogDescription>
26                        This action cannot be undone. Deleting this item will
27                        remove it permanently from your account.
28                    </AlertDialogDescription>
29                </AlertDialogHeader>
30                <AlertDialogFooter>
31                    <AlertDialogCancel>Cancel</AlertDialogCancel>
32                    <AlertDialogAction>Delete</AlertDialogAction>
33                </AlertDialogFooter>
34            </AlertDialogContent>
35        </AlertDialog>
36    )
37}
38