@neynar/ui/llm-docs/alert-dialog.llm.md

React UI component library built on shadcn/ui and Tailwind CSS

# AlertDialog

**Type**: component

Alert dialog component for critical confirmations and destructive actions A specialized modal dialog built on Radix UI Alert Dialog primitives that interrupts users with important information requiring immediate acknowledgment or decision. Unlike regular dialogs, alert dialogs cannot be dismissed by clicking outside and focus the action button by default for critical decisions. Based on the WAI-ARIA Alert Dialog design pattern, this component is specifically designed for destructive actions, confirmations, or critical warnings that need immediate attention before the user can continue.

## JSX Usage

```jsx
import { AlertDialog } from '@neynar/ui';

<AlertDialog
  defaultOpen={true}
  open={true}
  onOpenChange={handleOpenChange}
/>
```

## Component Props

### defaultOpen
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

### open
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

### onOpenChange
- **Type**: `(open: boolean) => void`
- **Required**: No
- **Description**: No description available

## Examples

### Example 1
```tsx
// Basic destructive confirmation
<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="destructive">Delete Account</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone. This will permanently delete
        your account and remove your data from our servers.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Delete Account</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>
```
### Example 2
```tsx
// Simple confirmation
<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="outline">Sign Out</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Sign Out</AlertDialogTitle>
      <AlertDialogDescription>
        Are you sure you want to sign out of your account?
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Sign Out</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>
```