Design System Builder

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/alertdialog
import {
  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

PropTypeDefaultDescription
openboolean-

The open prop for the component.

titlestring-

The title prop for the component.

descriptionstring-

The description prop for the component.

actionTextstringContinue

The actionText prop for the component.

cancelTextstringCancel

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.