Skip to main content

​
Overview

Delete project?
This action cannot be undone. All data associated with Project Alpha will be permanently deleted.
Alert Dialog is a blocking modal that requires the user to explicitly confirm or cancel before continuing. Use it for destructive or irreversible actions — never for informational content (use Modal for that).
Alert Dialog differs from Modal: Alert Dialog is for single confirmation questions (yes/no, delete/cancel). Modal is for complex interactions like forms or multi-step flows.

​
Installation

npm install @araf-ds/core

​
Usage

import {
  AlertDialog,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogCancel,
  AlertDialogAction,
} from "@araf-ds/core"

export default function Example() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button variant="destructive">Delete project</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Delete project?</AlertDialogTitle>
          <AlertDialogDescription>
            This action cannot be undone. All data associated with
            Project Alpha will be permanently deleted.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction variant="destructive">
            Delete project
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

​
Variants

​
Default (Confirm Action)

Confirm changes?
Your unsaved changes will be applied. This will update all affected records.
<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button>Save changes</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Confirm changes?</AlertDialogTitle>
      <AlertDialogDescription>
        Your unsaved changes will be applied. This will update all affected records.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Confirm</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

​
Destructive

Use a red action button for irreversible destructive operations.
Delete account
Your account and all associated data will be permanently removed. This action cannot be undone.
<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="destructive">Delete account</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <div className="flex gap-3">
        <div className="rounded-lg bg-red-50 p-2">
          <TrashIcon className="text-red-600" size={20} />
        </div>
        <div>
          <AlertDialogTitle>Delete account</AlertDialogTitle>
          <AlertDialogDescription>
            Your account and all associated data will be permanently removed.
            This action cannot be undone.
          </AlertDialogDescription>
        </div>
      </div>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction variant="destructive">Delete account</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

​
Controlled State

const [open, setOpen] = useState(false)

<AlertDialog open={open} onOpenChange={setOpen}>
  <AlertDialogContent>
    ...
  </AlertDialogContent>
</AlertDialog>

const [open, setOpen] = useState(false)

// Trigger programmatically
function handleDelete(id: string) {
  setOpen(true)
}

<AlertDialog open={open} onOpenChange={setOpen}>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This will permanently delete the selected item.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction
        variant="destructive"
        onClick={() => deleteItem(itemId)}
      >
        Delete
      </AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

​
API Reference

​
AlertDialog

​
open
boolean
Controlled open state.
​
onOpenChange
(open: boolean) => void
Callback fired when open state changes.
​
defaultOpen
boolean
default:"false"
Uncontrolled default open state.

​
AlertDialogContent

​
className
string
Additional class names for the dialog panel.

​
AlertDialogAction

​
variant
string
default:"default"
Button style for the confirm action. Values: default · destructive
​
onClick
() => void
Callback for the confirm action. The dialog closes automatically after this fires.

​
AlertDialogCancel

​
onClick
() => void
Callback for the cancel action. The dialog closes automatically.

​
Accessibility

  • Alert Dialog uses role="alertdialog" and aria-modal="true" — screen readers announce it immediately
  • Focus is trapped inside the dialog while open; returns to the trigger on close
  • AlertDialogTitle is linked via aria-labelledby; AlertDialogDescription via aria-describedby
  • Escape key closes the dialog (triggers AlertDialogCancel behavior)
  • The cancel action should always be keyboard-reachable before the destructive action

​
Do’s & Don’ts

Do

  • Use for irreversible or high-impact actions (delete, logout, overwrite)
  • Always provide a Cancel option — never force the user to confirm
  • Write clear, specific titles: “Delete project?” not “Are you sure?”
  • Make the destructive action button visually distinct (red)

Don't

  • Don’t use Alert Dialog for informational messages — use Alert or Toast
  • Don’t use it for forms or complex inputs — use Modal instead
  • Don’t auto-trigger Alert Dialog without a user action
  • Don’t make the default focused button the destructive action