# Hold To Confirm

Press and hold: a sweep crosses the button and the action fires when it reaches the far edge. Let go early and it springs back.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/hold-to-confirm
```

## Usage

```tsx
import { HoldToConfirm } from '@/components/fetaui/hold-to-confirm'

export function Example() {
  return <HoldToConfirm kind="outline" onComplete={remove} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| kind | outline, solid | outline |
| label | string | Hold to delete |
| progressLabel | string | Release to cancel |
| doneLabel | string | Deleted |
| icon | ReactNode |  |
| onComplete | () => void |  |
| disabled | boolean | false |
| animated | boolean | true |

## When to use

- For destructive actions that deserve a pause.

## When not to use

- For everyday deletes with undo: use Undo Button.

## Accessibility

- Progress is announced through a progressbar, in steps of 10.
- The accessible name stays the same while the label changes.
- The done label is announced when it fires.

## Motion

- The sweep crosses the button over 1.6 s, slow at first, with a bright seam on its front edge.
- The button presses to 0.97 while held and springs back with a small pop when it fires.
- Letting go springs the sweep back.
- Labels draw in as they change.
- With reduced motion, or `animated` off, the sweep still shows progress, with no press, pop or label motion.