> ## Documentation Index
> Fetch the complete documentation index at: https://araf.badr.co.id/llms.txt
> Use this file to discover all available pages before exploring further.

# Alert Dialog

> A modal confirmation dialog that interrupts the user with a critical question — requiring an explicit response before proceeding.

## Overview

<div style={{padding:"28px 24px",background:"#f9fafb",borderRadius:"12px",border:"1px solid #e5e7eb",display:"flex",justifyContent:"center"}}>
  <div style={{background:"#fff",border:"1px solid #E5E7EB",borderRadius:"12px",boxShadow:"0 8px 32px rgba(0,0,0,0.12)",padding:"24px",width:"100%",maxWidth:"400px",fontFamily:"Inter,sans-serif"}}>
    <div style={{fontSize:"16px",fontWeight:600,color:"#101828",marginBottom:"8px"}}>Delete project?</div>
    <div style={{fontSize:"14px",color:"#667085",marginBottom:"24px",lineHeight:1.6}}>This action cannot be undone. All data associated with <strong>Project Alpha</strong> will be permanently deleted.</div>

    <div style={{display:"flex",justifyContent:"flex-end",gap:"8px"}}>
      <button style={{padding:"9px 16px",borderRadius:"8px",border:"1px solid #D0D5DD",background:"#fff",color:"#344054",fontSize:"14px",fontWeight:500,cursor:"pointer"}}>Cancel</button>
      <button style={{padding:"9px 16px",borderRadius:"8px",border:"none",background:"#DC2626",color:"#fff",fontSize:"14px",fontWeight:500,cursor:"pointer"}}>Delete project</button>
    </div>
  </div>
</div>

**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).

<Note>
  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.
</Note>

***

## Installation

<CodeGroup>
  ```bash npm theme={null}
  npm install @araf-ds/core
  ```

  ```bash yarn theme={null}
  yarn add @araf-ds/core
  ```

  ```bash pnpm theme={null}
  pnpm add @araf-ds/core
  ```
</CodeGroup>

***

## Usage

```tsx theme={null}
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)

<div style={{padding:"24px",background:"#f9fafb",borderRadius:"12px",border:"1px solid #e5e7eb",display:"flex",justifyContent:"center"}}>
  <div style={{background:"#fff",border:"1px solid #E5E7EB",borderRadius:"12px",boxShadow:"0 4px 24px rgba(0,0,0,0.1)",padding:"24px",width:"100%",maxWidth:"380px",fontFamily:"Inter,sans-serif"}}>
    <div style={{fontSize:"16px",fontWeight:600,color:"#101828",marginBottom:"8px"}}>Confirm changes?</div>
    <div style={{fontSize:"14px",color:"#667085",marginBottom:"24px",lineHeight:1.6}}>Your unsaved changes will be applied. This will update all affected records.</div>

    <div style={{display:"flex",justifyContent:"flex-end",gap:"8px"}}>
      <button style={{padding:"9px 16px",borderRadius:"8px",border:"1px solid #D0D5DD",background:"#fff",color:"#344054",fontSize:"14px",fontWeight:500,cursor:"pointer"}}>Cancel</button>
      <button style={{padding:"9px 16px",borderRadius:"8px",border:"none",background:"#0479CE",color:"#fff",fontSize:"14px",fontWeight:500,cursor:"pointer"}}>Confirm</button>
    </div>
  </div>
</div>

```tsx theme={null}
<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.

<div style={{padding:"24px",background:"#f9fafb",borderRadius:"12px",border:"1px solid #e5e7eb",display:"flex",justifyContent:"center"}}>
  <div style={{background:"#fff",border:"1px solid #E5E7EB",borderRadius:"12px",boxShadow:"0 4px 24px rgba(0,0,0,0.1)",padding:"24px",width:"100%",maxWidth:"380px",fontFamily:"Inter,sans-serif"}}>
    <div style={{display:"flex",alignItems:"flex-start",gap:"12px",marginBottom:"12px"}}>
      <div style={{width:"40px",height:"40px",borderRadius:"8px",background:"#FEF3F2",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0}}>
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#DC2626" strokeWidth="2">
          <polyline points="3 6 5 6 21 6" />

          <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />

          <path d="M10 11v6M14 11v6" />

          <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
        </svg>
      </div>

      <div>
        <div style={{fontSize:"16px",fontWeight:600,color:"#101828",marginBottom:"4px"}}>Delete account</div>
        <div style={{fontSize:"14px",color:"#667085",lineHeight:1.6}}>Your account and all associated data will be permanently removed. This action cannot be undone.</div>
      </div>
    </div>

    <div style={{display:"flex",justifyContent:"flex-end",gap:"8px",marginTop:"16px"}}>
      <button style={{padding:"9px 16px",borderRadius:"8px",border:"1px solid #D0D5DD",background:"#fff",color:"#344054",fontSize:"14px",fontWeight:500,cursor:"pointer"}}>Cancel</button>
      <button style={{padding:"9px 16px",borderRadius:"8px",border:"none",background:"#DC2626",color:"#fff",fontSize:"14px",fontWeight:500,cursor:"pointer"}}>Delete account</button>
    </div>
  </div>
</div>

```tsx theme={null}
<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

<div style={{padding:"24px",background:"#f9fafb",borderRadius:"12px",border:"1px solid #e5e7eb"}}>
  ```tsx theme={null}
  const [open, setOpen] = useState(false)

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

```tsx theme={null}
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

<ParamField path="open" type="boolean">
  Controlled open state.
</ParamField>

<ParamField path="onOpenChange" type="(open: boolean) => void">
  Callback fired when open state changes.
</ParamField>

<ParamField path="defaultOpen" type="boolean" default="false">
  Uncontrolled default open state.
</ParamField>

### AlertDialogContent

<ParamField path="className" type="string">
  Additional class names for the dialog panel.
</ParamField>

### AlertDialogAction

<ParamField path="variant" type="string" default="default">
  Button style for the confirm action. Values: `default` · `destructive`
</ParamField>

<ParamField path="onClick" type="() => void">
  Callback for the confirm action. The dialog closes automatically after this fires.
</ParamField>

### AlertDialogCancel

<ParamField path="onClick" type="() => void">
  Callback for the cancel action. The dialog closes automatically.
</ParamField>

***

## 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

<CardGroup cols={2}>
  <Card title="Do" icon="check" iconType="solid" color="#16A34A">
    * 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)
  </Card>

  <Card title="Don't" icon="xmark" iconType="solid" color="#DC2626">
    * 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
  </Card>
</CardGroup>