Alert Dialog

Copy Markdown

Dialog for displaying important content.

Docs API

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

PreviewCode

Open

Installation#

CLIManual

pnpmbunnpmyarn

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>