Hold to Confirm
Press-and-hold button for destructive actions, with a timed fill.
Hold to Confirm replaces the "Are you sure?" dialog for destructive actions: press and hold, a fill sweeps across the button, and the action fires only when it completes. Release early and it snaps back. It prevents accidental deletes without an extra click or modal, and works from the keyboard by holding Space or Enter.
Preview
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/hold-to-confirm.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/hold-to-confirm.
Builds on: motion
Usage
import { HoldToConfirm } from "@/components/ui/hold-to-confirm";
<HoldToConfirm onConfirm={deleteWorkspace}>Delete workspace</HoldToConfirm>Motion
A linear fill (it is a timer) via clip-path; an early release snaps back on a strong ease-out; completion gives an elastic pulse.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
HoldToConfirm
| Prop | Type | Default | Description |
|---|---|---|---|
| onConfirm | () => void | — | Fires when the hold completes. |
| duration | number | 1400 | Hold time in ms. |
| holdingLabel | ReactNode | "Keep holding…" | Label while holding. |
| variant | "destructive" | "primary" | "destructive" | Fill color. |
Accessibility
- Holding Space or Enter confirms from the keyboard.
- The accessible name says "press and hold" so the interaction is discoverable.
FAQ
Also searched as: hold to confirm button react · press and hold button · long press button react · hold to delete button · confirm delete without modal