Hold to confirm
Also called press and hold or long press to confirm
A button you press and hold for a moment, with a fill that shows progress, used to confirm a destructive or important action.
import { useState, type KeyboardEvent } from 'react';
import { animate, motion, useMotionValue } from 'motion/react';
const HOLD_SECONDS = 1.5;
const DRAIN_SECONDS = 0.3;
const isHoldKey = (event: KeyboardEvent) =>
event.key === ' ' || event.key === 'Enter';
export function HoldToDeleteButton({ onConfirm }: { onConfirm: () => void }) {
const progress = useMotionValue(0);
const [deleted, setDeleted] = useState(false);
function start() {
// Resume from wherever a drain left off.
animate(progress, 1, {
duration: HOLD_SECONDS * (1 - progress.get()),
ease: 'linear',
onComplete: () => {
setDeleted(true);
onConfirm();
}
});
}
function cancel() {
if (progress.get() === 1) return;
// Animating the value again stops the fill before onComplete runs.
animate(progress, 0, { duration: DRAIN_SECONDS, ease: 'easeOut' });
}
if (deleted) return <p role='status'>✓ Project deleted</p>;
return (
<button
type='button'
onPointerDown={start}
onPointerUp={cancel}
onPointerLeave={cancel}
onPointerCancel={cancel}
onKeyDown={(event) => {
if (!isHoldKey(event) || event.repeat) return;
event.preventDefault();
start();
}}
onKeyUp={(event) => isHoldKey(event) && cancel()}
className='relative touch-none overflow-hidden rounded-lg bg-red-500 px-5 py-2.5 text-sm font-medium text-white select-none'
>
<motion.span
aria-hidden
style={{ scaleX: progress }}
className='absolute inset-0 origin-left bg-red-700'
/>
<span className='relative'>Hold to delete</span>
</button>
);
}Turn the "Delete project" button into a hold-to-confirm button labeled "Hold to delete": while the pointer or the Space or Enter key is held, fill it from left to right in red over 1.5 seconds (linear), and delete only when the fill completes. If released early, drain the fill over 300ms and do nothing. After deleting, show "Project deleted" with a check icon.
Paste into Layerwise or any AI coding tool.
What is Hold to confirm?
A hold-to-confirm button asks for a deliberate press instead of a quick click. While you hold it, a fill sweeps across the button. Let go early and the fill drains away with nothing done; hold until the fill completes and the action runs.
It is a lighter alternative to an "Are you sure?" dialog for actions like deleting a project, sending money, or ending a call. A hold of about one to two seconds is long enough to prevent accidents and short enough not to feel like a chore.
Say "Hold to delete" in the label, since few people expect to hold a button. Make it work from the keyboard by starting on keydown of Space or Enter and cancelling on keyup. Holding can be hard for people with limited motor control, so an undo option afterward is a good companion.
Related terms
All termsPress feedback
A quick visual response, usually a slight shrink, that shows a button registered the press the moment a finger or mouse button goes down.
Progress bar
A horizontal bar that fills from left to right to show how much of a task is done, or slides in a loop while the total is still unknown.
Undo
A way to reverse an action right after doing it, often a toast with an Undo button that appears after deleting or archiving something.
Micro-interaction
A small moment of feedback around a single action, like a heart that bursts when tapped or a copy icon that turns into a checkmark.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.