components

Alert Dialog

A modal dialog that interrupts the user with important information.

Source CodeRadix UI

Installation

pnpm dlx radianui@latest add alert-dialog

Usage

Imports

/components/ui/alert-dialog.tsx
import {
	AlertDialog,
	AlertDialogAction,
	AlertDialogCancel,
	AlertDialogContent,
	AlertDialogDescription,
	AlertDialogFooter,
	AlertDialogHeader,
	AlertDialogTitle,
	AlertDialogTrigger,
} from "@/components/ui/alert-dialog"

Code

/components/ui/alert-dialog.tsx
<AlertDialog>
	<AlertDialogTrigger>Open</AlertDialogTrigger>
	<AlertDialogContent>
		<AlertDialogHeader>
			<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
			<AlertDialogDescription>
				This action cannot be undone. This will permanently delete your account
				and remove your data from our servers.
			</AlertDialogDescription>
		</AlertDialogHeader>
		<AlertDialogFooter>
			<AlertDialogCancel>Cancel</AlertDialogCancel>
			<AlertDialogAction>Continue</AlertDialogAction>
		</AlertDialogFooter>
	</AlertDialogContent>
</AlertDialog>

Examples

Backdrop - Blur

Backdrop - Transparent

Destructive

Destructive Dialog - w/Divider

Destructive Dialog - Center

Props

<AlertDialog>
NameDefaultValues
External Reference--
<AlertDialogTrigger>
NameDefaultValues
External Reference--
<AlertDialogContent>
NameDefaultValues
backdropoverlayoverlayblurtransparent
External Reference--
<AlertDialogHeader>
NameDefaultValues
<AlertDialogTitle>
NameDefaultValues
External Reference--
<AlertDialogDescription>
NameDefaultValues
External Reference--
<AlertDialogFooter>
NameDefaultValues
<AlertDialogAction>
NameDefaultValues
External Reference--
<AlertDialogCancel>
NameDefaultValues
External Reference--