Alert Dialog

Dialog for displaying important content.

Docs API

Alert Dialog is built on top of the Dialog component. Check it out for more examples.

Installation


pnpm dlx shadcn@latest add @shark/alert-dialog

Anatomy


AlertDialog
├── AlertDialogTrigger
└── AlertDialogContent
    ├── AlertDialogHeader
    │   ├── AlertDialogTitle
    │   └── AlertDialogDescription
    ├── AlertDialogBody
    ├── AlertDialogFooter
    │   ├── AlertDialogCancel
    │   └── AlertDialogAction
    └── AlertDialogClose

Usage


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


<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="outline">Open</Button>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>
      <AlertDialogDescription>
        Do you want to allow the USB accessory to connect to this device?
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogBody />
    <AlertDialogFooter>
      <AlertDialogCancel>
        Don't allow
      </AlertDialogCancel>
      <AlertDialogClose asChild>
        <AlertDialogAction>Allow</AlertDialogAction>
      </AlertDialogClose>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Title & Description

AlertDialogHeader supports two usage patterns:

Using props

Pass title and description props directly to AlertDialogHeader.


<AlertDialogHeader 
  title="Allow accessory to connect?" 
  description="Do you want to allow the USB accessory to connect to this device?"
>
  <AlertDialogAction />
</AlertDialogHeader>

This approach does not require AlertDialogTitle or AlertDialogDescription components.

Using components

Use AlertDialogTitle and AlertDialogDescription as children for more control.


<AlertDialogHeader>
  <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>
  <AlertDialogDescription>
    Do you want to allow the USB accessory to connect to this device?
  </AlertDialogDescription>
  <AlertDialogAction />
</AlertDialogHeader>