# Confirmation Button
URL: /docs/web/components/confirmation-button

Confirmation Button component with multiple variants and sizes.

**Demo:**

```tsx
'use client';
// @custom-demo

import { useState } from 'react';

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

function wait(ms: number): Promise<void> {
  return new Promise((resolve) => {
    window.setTimeout(resolve, ms);
  });
}

export function ConfirmationButtonDemo() {
  const [status, setStatus] = useState('Waiting for action');

  return (
    <div className="mx-auto flex h-72 w-full max-w-sm flex-col items-center justify-end gap-3 py-4">
      

      <p className="text-xs text-muted-foreground">Status: {status}</p>
    </div>
  );
}
```

## Installation

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

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

## Usage

```tsx
import {
  ConfirmationButton
} from "@docyrus/ui/components/confirmation-button";

<ConfirmationButton
  onConfirm={() => {}}
  confirmationTitle={Are you sure?}
  confirmationMessage={Please confirm before this action is executed.}
  confirmLabel="Confirm"
  cancelLabel="Cancel"
  countdownSeconds={DEFAULT_COUNTDOWN_SECONDS}
  onCancel={() => {}}
  onTimeout={() => {}}
  triggerClassName="..."
  contentClassName="..."
  side="top"
  sideOffset={0}
  contentWidth={320}
  triggerSize={0}
  triggerWidth={0}
  triggerHeight={0}
  triggerRadius={0}
  speed={0}
  bgClassName="..."
  buttonVariant="destructive"
  buttonSize="default"
/>
```

## API Reference

| Prop | Type | Default |
|------|------|---------|
| `onConfirm` | `() => void \| Promise<void>` | — |
| `confirmationTitle` | `ReactNode` | `'Are you sure?'` |
| `confirmationMessage` | `ReactNode` | `'Please confirm before this action is executed.'` |
| `confirmLabel` | `string` | `'Confirm'` |
| `cancelLabel` | `string` | `'Cancel'` |
| `countdownSeconds` | `number` | `DEFAULT_COUNTDOWN_SECONDS` |
| `disabled` | `boolean` | `false` |
| `onCancel` | `() => void` | — |
| `onTimeout` | `() => void` | — |
| `triggerClassName` | `string` | — |
| `contentClassName` | `string` | — |
| `side` | `'top' \| 'bottom'` | `'top'` |
| `sideOffset` | `number` | — |
| `contentWidth` | `number` | `320` |
| `triggerSize` | `number` | — |
| `triggerWidth` | `number` | — |
| `triggerHeight` | `number` | — |
| `triggerRadius` | `number` | — |
| `speed` | `number` | — |
| `bgClassName` | `string` | — |
| `buttonVariant` | `ButtonVariant` | `'destructive'` |
| `buttonSize` | `ButtonSize` | `'default'` |
| `className` | `string` | — |