# rn-alert-dialog
URL: /docs/native/components/alert-dialog

Confirmation dialog with customizable title, description, variant colors, and action buttons.

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/rn-alert-dialog
```

**Dependencies:**
- [react-native-reanimated](https://www.npmjs.com/package/react-native-reanimated)

## Usage

```tsx
import { AlertDialog } from '@/components/docyrus-native/alert-dialog';

<AlertDialog
  title="Delete item?"
  description="This action cannot be undone."
  variant="destructive"
  onConfirm={() => handleDelete()}
  onCancel={() => console.log('cancelled')}
/>
```

## API Reference

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `visible` | `boolean` | — | Controlled visibility state |
| `onConfirm` | `() => void` | — | Confirm button handler |
| `onCancel` | `() => void` | — | Cancel button handler |
| `title` | `string` | `'Are you sure?'` | Dialog title text |
| `description` | `string` | — | Dialog description text |
| `confirmText` | `string` | `'Confirm'` | Confirm button label |
| `cancelText` | `string` | `'Cancel'` | Cancel button label |
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Dialog size |
| `variant` | `'default' \| 'destructive' \| 'success' \| 'warning'` | `'default'` | Confirm button color variant |
| `backdropOpacity` | `'light' \| 'medium' \| 'dark'` | `'medium'` | Backdrop darkness level |
| `animationType` | `'none' \| 'slide' \| 'fade'` | `'fade'` | Modal animation type |
| `trigger` | `ReactNode \| ((opts: { onPress: () => void }) => ReactNode)` | — | Custom trigger element or render function |
| `triggerLabel` | `string` | — | Default trigger button label |
| `className` | `string` | — | Additional CSS classes |
| `backdropClassName` | `string` | — | Backdrop CSS classes |
| `contentClassName` | `string` | — | Content area CSS classes |
| `titleClassName` | `string` | — | Title text CSS classes |
| `descriptionClassName` | `string` | — | Description text CSS classes |
| `confirmButtonClassName` | `string` | — | Confirm button CSS classes |
| `cancelButtonClassName` | `string` | — | Cancel button CSS classes |
| `triggerClassName` | `string` | — | Trigger CSS classes |

## Translation Keys

Built-in copy is read through `useUiTranslation()` — provide these keys via `<UiTranslationProvider>`. Without a provider the English fallback is shown.

| Key | English fallback | Used for |
|-----|------------------|----------|
| `ui.alertDialog.title` | Are you sure? | Default title (`title` prop wins) |
| `ui.alertDialog.confirm` | Confirm | Confirm button (`confirmText` prop wins) |
| `ui.common.cancel` | Cancel | Cancel button (`cancelText` prop wins) |

## Type Exports

| Type | Description |
|------|-------------|
| `AlertDialogProps` | Props for AlertDialog component |
| `AlertDialogVariant` | `'default' \| 'destructive' \| 'success' \| 'warning'` |
| `AlertDialogSize` | `'sm' \| 'md' \| 'lg'` |