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.

FreeWeb and Mobile2 variantsMotion

npx shadcn add @fetaui/hold-to-confirm

Playground

Kinds

Labels

Disabled

Kind

Icons animation

Motion

Installation

Terminal· bash

1 npx shadcn add @fetaui/hold-to-confirm

Outline sits in a row. Solid is 288 px wide and 64 px high, for a final step.

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.

The sweep is one layer scaled on a motion value, so holding does not re-render on each frame. The percent updates in steps of 10.
Nothing runs at rest: the sweep only animates while held or springing back.
The fill animation stops on unmount and the reset timer clears.

Give your coding assistant the Markdown reference instead of screenshots.

Import from @/components/fetaui/hold-to-confirm.
Run the action in onComplete, which fires when the sweep reaches the far edge. There is no click action.
Change label, progressLabel, doneLabel and icon together: the default says Hold to delete.
The button resets 1.6 s after it completes, so guard against a second run yourself.
The demo deletes nothing. Wire up onComplete.