Alert Dialog

A modal window that appears on top of the main content. To display important content to the user.

Built on top of the Dialog component. Check it out for more examples.

Installation


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

Usage


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


<AlertDialog>
  <AlertDialogTrigger>Open dialog</AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Dialog Title</AlertDialogTitle>
      <AlertDialogDescription>Dialog Description</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogBody>
    {/** Your content here */}
    </AlertDialogBody>
    <AlertDialogFooter>
      <AlertDialogCancel>Close</AlertDialogCancel>
      <AlertDialogAction>Action</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Examples

Destructive action

API Reference

See the Dialog component API reference for the available props.

On This Page

Installation Usage Examples Destructive action API Reference