# rn-confirmation-button
URL: /docs/native/docyrus/confirmation-button

Button that opens a countdown confirmation modal before executing the action.

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/rn-confirmation-button
```

## Usage

```tsx
import { ConfirmationButton } from '@/components/docyrus-native/confirmation-button';

```

### Custom Messages

```tsx

```

### Variants and sizes

`buttonVariant` / `buttonSize` use the web `Button` names. Sizes map to the native Button: `default` → `md`, `xs` / `sm` → `sm`, `lg` → `lg`, `icon*` → `icon`.

```tsx

```

### Rich title / message

```tsx
 and 12 related tasks will be removed.
    
  )}
>
  Delete

```

### With Callbacks

```tsx

```

## API Reference

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `ReactNode` | — | Trigger content. Strings get the Button label style (`textClassName` applies). |
| `onConfirm` | `() => void \| Promise<void>` | — | Called by the confirm button. Async handlers show a spinner and `t('ui.confirmationButton.confirming', 'Confirming…')`; the modal closes when it resolves. |
| `confirmationTitle` | `ReactNode` | `t('ui.confirmationButton.title', 'Are you sure?')` | Modal title. Strings are styled; nodes render as-is. |
| `confirmationMessage` | `ReactNode` | `t('ui.confirmationButton.message', 'Please confirm before this action is executed.')` | Modal message. |
| `confirmLabel` | `string` | `t('ui.confirmationButton.confirm', 'Confirm')` | Confirm button label. |
| `cancelLabel` | `string` | `t('ui.common.cancel', 'Cancel')` | Cancel button label. |
| `countdownSeconds` | `number` | `6` | Auto-cancel countdown (minimum 1). The progress bar label is `t('ui.confirmationButton.autoCancel', 'Auto-cancel in {seconds}s')`. |
| `disabled` | `boolean` | `false` | Disables the trigger. |
| `onCancel` | `() => void` | — | Called on Cancel, backdrop tap, Android back, and on timeout. |
| `onTimeout` | `() => void` | — | Called when the countdown expires (after `onCancel`). |
| `buttonVariant` | `'default' \| 'outline' \| 'secondary' \| 'ghost' \| 'destructive' \| 'link'` | `'destructive'` | Trigger variant (web name). The confirm button in the modal is destructive when this is `destructive`, otherwise primary. |
| `buttonSize` | `'default' \| 'xs' \| 'sm' \| 'lg' \| 'icon' \| 'icon-xs' \| 'icon-sm' \| 'icon-lg'` | `'default'` | Trigger size (web names, mapped to native `md` / `sm` / `lg` / `icon`). |
| `variant` | `ConfirmationButtonVariant` | — | **Deprecated** alias of `buttonVariant` (used when `buttonVariant` is absent). |
| `className` | `string` | — | Classes for the trigger button (on native the trigger is the root element). |
| `triggerClassName` | `string` | — | Classes for the trigger button, merged after `className` (web parity). |
| `contentClassName` | `string` | — | Classes for the modal content wrapper (gap / padding of title, progress and buttons). |
| `bgClassName` | `string` | — | Classes for the modal surface — e.g. `bg-zinc-900` to replace the card background. |
| `textClassName` | `string` | — | Classes for the trigger label when `children` is a string. |

The web-only MorphPopover geometry props (`side`, `sideOffset`, `contentWidth`, `triggerSize`, `triggerWidth`, `triggerHeight`, `triggerRadius`, `speed`) are **not supported** on native: the confirmation is a centered `Modal`, the mobile idiom, so they have no meaning here.

## Components

| Component | Description |
|-----------|-------------|
| `ConfirmationButton` | Trigger button + countdown confirmation modal. |

## Type Exports

| Type | Description |
|------|-------------|
| `ConfirmationButtonProps` | Props for the ConfirmationButton component. |
| `ConfirmationButtonVariant` | `'default' \| 'outline' \| 'secondary' \| 'ghost' \| 'destructive' \| 'link'`. |
| `ConfirmationButtonSize` | `'default' \| 'xs' \| 'sm' \| 'lg' \| 'icon' \| 'icon-xs' \| 'icon-sm' \| 'icon-lg'`. |

## Breaking changes