# Hold to confirm

> Press and hold to confirm destructive or important actions; letting go cancels.

Component · Pro · https://lodeui.com/components/hold-to-confirm

## When to use

- Destructive or expensive actions that shouldn't fire on a stray click: delete, release, wipe.

## When not to use

- Frequent actions: holding every time is slow.
- Actions that need explanation: use a confirm dialog.

## Installation

```bash
npx shadcn@latest add @lode/hold-to-confirm
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { HoldToConfirm } from "@/components/ui/hold-to-confirm";

export function DeleteProject({ id }: { id: string }) {
  return (
    <HoldToConfirm tone="destructive" onConfirm={() => deleteProject(id)} doneLabel="Deleted">
      Hold to delete
    </HoldToConfirm>
  );
}
```

## API reference

### HoldToConfirm

A button that fills while held and confirms when full; releasing early drains it.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| onConfirm | `() => void \| Promise<void>` | – | Runs once the hold completes. |
| duration | `number` | `1400` | Hold time in ms. |
| holdingLabel / doneLabel | `ReactNode` | `"Keep holding…" / "Done"` | Labels while held and after. |
| resetAfter | `number` | `2200` | ms before returning to idle; 0 keeps the done state. |
| tone | `"default" \| "destructive"` | `"default"` | Color. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Hold Space or Enter | Fill and confirm |
| Release | Cancel before it fills |

## Accessibility

- Described by a hidden hint: "Press and hold to confirm."
- Confirmation is announced politely.
- Works with keyboard holds, not just pointers.

## Motion

- The fill grows linearly over the duration; releasing drains it in 350ms.
- Labels swap with a short blur and slide; the button presses in slightly while held.

## Responsive behavior

- At least 176px wide; touch holds work and long-press menus are suppressed.

## Performance

- The fill is a motion value; nothing re-renders per frame.

## Notes for AI

- Use for one action at a time; don't put several in a row.

## Related

- [Slide to confirm](https://lodeui.com/components/slide-to-confirm) — Drag the handle to the end to confirm a payment or action; Enter works too.
- [Action button](https://lodeui.com/components/action-button) — A button that morphs through saving, saved and failed, right where you clicked.
- [Dialog](https://lodeui.com/components/dialog) — A modal or side sheet with focus trap, scroll lock and focus return.