ConfirmationButton

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

iOSAndroid

Preview ConfirmationButton on your device

Scan with Expo Go

Download Expo Go, then scan the QR code to preview native components.

Installation

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

Usage

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

<ConfirmationButton onConfirm={() => deleteAccount()}>
  Delete Account
</ConfirmationButton>

Custom Messages

<ConfirmationButton
  onConfirm={handleReset}
  confirmationTitle="Reset all data?"
  confirmationMessage="All local data will be erased. This cannot be undone."
  confirmLabel="Reset"
  cancelLabel="Go back"
  countdownSeconds={10}
>
  Reset Data
</ConfirmationButton>

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.

<ConfirmationButton onConfirm={handleAction} buttonVariant="default">Primary</ConfirmationButton>
<ConfirmationButton onConfirm={handleAction} buttonVariant="outline" buttonSize="sm">Outline</ConfirmationButton>
<ConfirmationButton onConfirm={handleAction} buttonVariant="ghost" buttonSize="icon">
  <DocyrusIcon icon="fal trash" size={18} />
</ConfirmationButton>

Rich title / message

<ConfirmationButton
  onConfirm={deleteOrganization}
  confirmationTitle="Delete organization?"
  confirmationMessage={(
    <Text className="text-sm text-muted-foreground">
      <Text className="font-semibold text-foreground">ACME Corp</Text> and 12 related tasks will be removed.
    </Text>
  )}
>
  Delete
</ConfirmationButton>

With Callbacks

<ConfirmationButton
  onConfirm={async () => { await api.delete(id); }}   // shows "Confirming…" until it resolves
  onCancel={() => console.log('Cancelled')}
  onTimeout={() => console.log('Timed out')}
  countdownSeconds={5}
>
  Dangerous Action
</ConfirmationButton>

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

variant is deprecated in favour of buttonVariant (still honoured). ConfirmationButtonVariant gained link.
The trigger size is now controlled by buttonSize (default 'default' → native md, same as before).
String children are passed straight to the native Button (previously pre-wrapped in a <Text>), so textClassName now merges with the Button label style instead of the old local label style.
The modal's confirm button is primary (not destructive) for non-destructive buttonVariants; a shield icon was added next to the title.
Default copy is translatable (ui.confirmationButton.*, ui.common.cancel) — English text is unchanged without a provider. The confirming label changed from Confirming... to Confirming….
The buttonClassName prop listed in earlier docs never existed; use triggerClassName.

ConfirmationButton

On this page