Nusa UINusa UI

Alert Dialog

Previous: AlertNext: Aspect Ratio

A modal dialog that interrupts the user with important content.

Docs API Reference
registry/examples/alert-dialog-demo.tsx
import {
  AlertDialog,
  AlertDialogAction,

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://nusa-ui.vercel.app/r/alert-dialog.json

Usage

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
<AlertDialog>
  <AlertDialogTrigger>Open</AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Continue</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Examples

Delete Confirmation

registry/examples/alert-dialog-delete.tsx
import {
  AlertDialog,
  AlertDialogAction,

API Reference

Alert Dialog

ComponentDescription
AlertDialogThe root component
AlertDialogTriggerThe trigger element
AlertDialogContentThe dialog content
AlertDialogHeaderHeader section
AlertDialogTitleThe dialog title
AlertDialogDescriptionDescription text
AlertDialogFooterFooter with actions
AlertDialogActionConfirm action button
AlertDialogCancelCancel action button

AlertDialog Props

PropTypeDefaultDescription
openboolean-The controlled open state
defaultOpenboolean-The default open state
onOpenChange(open: boolean) => void-Callback when open changes
AlertAspect Ratio

On this page

InstallationUsageExamplesDelete ConfirmationAPI ReferenceAlert DialogAlertDialog Props