Alert Dialog

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

Improve on GitHub

Installation

Add this component to your project using the npui CLI:

npx npui add alert-dialog

Variants & Examples

Default Alert Dialog

A basic alert dialog for confirming a destructive action.

Code for Default 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 DefaultAlertDialog() {
15  return (
16    <AlertDialog>
17      <AlertDialogTrigger asChild>
18        <Button variant="destructive">Delete Account</Button>
19      </AlertDialogTrigger>
20      <AlertDialogContent>
21        <AlertDialogHeader>
22          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
23          <AlertDialogDescription>
24            This action cannot be undone. This will permanently delete your account
25            and remove your data from our servers.
26          </AlertDialogDescription>
27        </AlertDialogHeader>
28        <AlertDialogFooter>
29          <AlertDialogCancel>Cancel</AlertDialogCancel>
30          <AlertDialogAction>Continue</AlertDialogAction>
31        </AlertDialogFooter>
32      </AlertDialogContent>
33    </AlertDialog>
34  )
35}

Props

These are the available props for the Alert Dialog component:

Prop	Type	Description	Default
open	boolean	Controls the open state of the alert dialog.	-
onOpenChange	(open: boolean) => void	Event handler called when the open state changes.	-
defaultOpen	boolean	The initial open state of the alert dialog.	false