## Hold to Confirm (S—046)

A destructive button you have to hold: the fill sweeps across, letting go early springs it back.

- URL: https://sundaeui.dev/components/hold-confirm
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/hold-confirm.json`
- Tags: destructive, confirm, hold, delete, feedback, button

Replaces a confirm dialog for one dangerous action. Hold with the pointer, Space or Enter; the fill runs for the set duration, then the icon pops to a tick.
It resets itself after a moment, so the same button can be used again.

### Usage

```tsx
import { HoldConfirm } from '@/components/sundae/hold-confirm'

<HoldConfirm label="Hold to delete" duration={1400} onConfirm={deleteProject} />
```

### Props

- `label / doneLabel` (`string`, default `'Hold to delete' / 'Deleted'`): Labels before and after.
- `duration` (`number`, default `1400`): Hold time in ms.
- `tone` (`'danger' | 'neutral' | 'brand'`, default `'danger'`): Fill colour.
- `onConfirm` (`() => void`): Called when the hold completes.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Deleting, revoking or publishing where one accidental click is costly.
- Touch interfaces where a modal confirm is heavy.

### When not to use

- Routine actions: the hold slows people down.
- Users who may have motor impairments with sustained presses; offer a confirm dialog alternative.

### Accessibility

- A native button; the hold works with Space and Enter as well as the pointer.
- Instructions are linked with aria-describedby and the status ("Keep holding…", "Deleted.") is announced.
- Reduced motion keeps the linear fill (it is the information) and drops the bounce.

### Keyboard

- Hold Space / Enter: Confirm
- Release early: Cancel