Command Palette

Search for a command to run...

Alert Dialog

shadcn/ui

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

import {	AlertDialog,	AlertDialogTrigger,	AlertDialogContent,	AlertDialogHeader,	AlertDialogFooter,	AlertDialogTitle,	AlertDialogDescription,	AlertDialogAction,	AlertDialogCancel,	AlertDialogIcon,} from "@/registry/optics/alert-dialog";import { Button } from "@/registry/optics/button";import { AlertTriangle } from "lucide-react";<AlertDialog>	<AlertDialogTrigger asChild>		<Button variant="raised">Show Dialog</Button>	</AlertDialogTrigger>	<AlertDialogContent>		<AlertDialogHeader>			<AlertDialogIcon>				<div className="p-2 rounded-full squircle-none flex items-center justify-center shadow-md bg-emerald-500/20">					<Info className="text-emerald-600" />				</div>				<AlertDialogTitle>					Are you absolutely sure?				</AlertDialogTitle>			</AlertDialogIcon>			<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>

Installation

pnpm dlx shadcn@latest add https://optics.agusmayol.com.ar/r/alert-dialog.json

Props

<AlertDialog />
Name
Type
open
boolean
defaultOpen
boolean
onOpenChange
(open: boolean) => void

<AlertDialogTrigger />
Name
Type
asChild
boolean
<AlertDialogContent />
Name
Type
className
string
onEscapeKeyDown
(event: KeyboardEvent) => void
onPointerDownOutside
(event: PointerEvent) => void
onInteractOutside
(event: Event) => void
<AlertDialogHeader />
Name
Type
className
string
<AlertDialogFooter />
Name
Type
className
string
<AlertDialogTitle />
Name
Type
className
string
<AlertDialogDescription />
Name
Type
className
string
<AlertDialogAction />
Name
Type
className
string
variant
"default" | "outline" | "ghost" | "destructive" | "secondary" | "info" | "success" | "warning" | "muted" | "raised" | "link"
size
"default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg"
<AlertDialogCancel />
Name
Type
className
string
variant
"default" | "outline" | "ghost" | "destructive" | "secondary" | "info" | "success" | "warning" | "muted" | "raised" | "link" (default: "raised")
size
"default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg"
<AlertDialogIcon />
Name
Type
className
string
children
React.ReactNode
<AlertDialogOverlay />
Name
Type
className
string
<AlertDialogPortal />
Name
Type
className
string
AlertAspect Ratio