AlertDialog
AlertDialog is a compound component that provides alertdialog functionality.
Active
Examples
variant
Different variant options for the AlertDialog component.
default
destructive
Installation
npm install @your-design-system/alertdialogimport {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { Button } from "@/components/ui/button"
export function AlertDialogDemo() {
return (
<AlertDialog>
<AlertDialogTrigger asChild>
<Button variant="outline">Show Dialog</Button>
</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>
)
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | - | The open prop for the component. |
title | string | - | The title prop for the component. |
description | string | - | The description prop for the component. |
actionText | string | Continue | The actionText prop for the component. |
cancelText | string | Cancel | The cancelText prop for the component. |
Styling
The component uses Tailwind CSS classes for styling. You can customize the appearance by overriding these classes.
Base Classes
variant Variants
default
destructive
Design System Compliance
This component is validated against atomic design principles and foundation token usage.
✓ Atomic Design Compliant
This component follows atomic design principles and properly uses foundation tokens.
On This Page