51:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 52:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 53:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 54:T1eeb,"use client"; import { Check, Trash2 } from "lucide-react"; import { animate, motion, useAnimationControls, useMotionValue, useReducedMotion, useTransform, } from "motion/react"; import { useEffect, useRef, useState } from "react"; import { cn } from "@/lib/sona-utils"; export interface HoldToDeleteButtonProps { /** Text displayed inside the button. */ label?: string; /** * Duration in milliseconds the user must hold before the action triggers. * @default 2000 */ holdDuration?: number; /** * Duration in milliseconds the success state is visible before auto-resetting. * @default 1200 */ successDuration?: number; /** Called once when the hold completes. */ onDelete?: () => void; /** Whether the button ignores interaction. @default false */ disabled?: boolean; /** Additional CSS classes for the button. */ className?: string; } export default function HoldToDeleteButton({ label = "Hold To Delete", holdDuration = 2000, successDuration = 1200, onDelete, disabled = false, className, }: HoldToDeleteButtonProps) { const [isHolding, setIsHolding] = useState(false); const [isCompleted, setIsCompleted] = useState(false); const holdTimerRef = useRef | null>(null); const successTimerRef = useRef | null>(null); const startedAtRef = useRef(0); const buttonControls = useAnimationControls(); const progress = useMotionValue(0); const shouldReduceMotion = useReducedMotion(); const resolvedHoldDuration = Math.max(0, holdDuration); const resolvedSuccessDuration = Math.max(0, successDuration); const progressClipPath = useTransform( progress, (value) => `inset(0 ${100 - value * 100}% 0 0)`, ); const clearHoldTimer = () => { if (holdTimerRef.current) clearTimeout(holdTimerRef.current); holdTimerRef.current = null; }; const cancelHold = () => { if (!holdTimerRef.current) return; const heldRatio = resolvedHoldDuration === 0 ? 1 : Math.min( (performance.now() - startedAtRef.current) / resolvedHoldDuration, 1, ); clearHoldTimer(); setIsHolding(false); animate(progress, 0, { type: "spring", duration: 0.3, bounce: 0, }); if (shouldReduceMotion || heldRatio < 0.15) { buttonControls.start({ transform: "translateX(0) scale(1)" }); return; } const isPastHalfway = heldRatio >= 0.5; buttonControls.start( { transform: isPastHalfway ? [ "translateX(0) rotate(0deg) scale(1)", "translateX(-7px) rotate(-1.2deg) scale(0.985)", "translateX(6px) rotate(1deg) scale(0.99)", "translateX(-4px) rotate(-0.6deg) scale(0.995)", "translateX(2px) rotate(0.3deg) scale(1)", "translateX(0) rotate(0deg) scale(1)", ] : [ "translateX(0) scale(1)", "translateX(-3px) scale(0.99)", "translateX(3px) scale(0.995)", "translateX(0) scale(1)", ], }, { duration: isPastHalfway ? 0.38 : 0.24, ease: [0.23, 1, 0.32, 1], }, ); }; const resetState = () => { clearHoldTimer(); if (successTimerRef.current) clearTimeout(successTimerRef.current); successTimerRef.current = null; setIsCompleted(false); buttonControls.start({ transform: "translateX(0) scale(1)" }); animate(progress, 0, { type: "spring", duration: 0.3, bounce: 0, }); }; const handlePointerDown = () => { if (isCompleted || disabled) return; clearHoldTimer(); startedAtRef.current = performance.now(); setIsHolding(true); buttonControls.start({ transform: shouldReduceMotion ? "translateX(0) scale(1)" : "translateX(0) scale(0.97)", transition: { duration: 0.12, ease: [0.23, 1, 0.32, 1] }, }); animate(progress, 1, { duration: resolvedHoldDuration / 1000, ease: "linear", }); holdTimerRef.current = setTimeout(() => { holdTimerRef.current = null; setIsHolding(false); setIsCompleted(true); buttonControls.start({ transform: "translateX(0) scale(1)", transition: { duration: 0.16, ease: [0.23, 1, 0.32, 1] }, }); progress.set(1); onDelete?.(); }, resolvedHoldDuration); }; // biome-ignore lint/correctness/useExhaustiveDependencies: successDuration is stable per render useEffect(() => { if (!isCompleted) return; successTimerRef.current = setTimeout(resetState, resolvedSuccessDuration); return () => { if (successTimerRef.current) clearTimeout(successTimerRef.current); }; }, [isCompleted, resolvedSuccessDuration]); // biome-ignore lint/correctness/useExhaustiveDependencies: unmount-only cleanup useEffect( () => () => { clearHoldTimer(); if (successTimerRef.current) clearTimeout(successTimerRef.current); }, [], ); const renderVisualContent = () => ( <> {isCompleted ? ( {label} Keep holding Deleted ); return ( { if (disabled) return; event.currentTarget.setPointerCapture(event.pointerId); handlePointerDown(); }} onPointerUp={cancelHold} onPointerLeave={cancelHold} onPointerCancel={cancelHold} onKeyDown={(e) => { if ((e.key === " " || e.key === "Enter") && !e.repeat) { e.preventDefault(); handlePointerDown(); } }} onKeyUp={(e) => { if (e.key === " " || e.key === "Enter") cancelHold(); }} > {renderVisualContent()} {isCompleted ? "Deleted" : isHolding ? "Keep holding" : label} ); } 4d:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L51",null,{"registryDependencies":["@sona-ui/sona-utils"]}]]}],["$","$L52",null,{"sourceUrl":"https://sona-ui.vercel.app/r/hold-to-delete-button.json","proxyUrl":"https://shadcnregistry.com/r/sona-ui/hold-to-delete-button","itemId":"@sona-ui/hold-to-delete-button"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L53",null,{"files":[{"path":"registry/sonaui/hold-to-delete-button/hold-to-delete-button.tsx","content":"$54","type":"registry:ui","target":"components/ui/hold-to-delete-button/hold-to-delete-button.tsx"}]}]]}],"$L55"]}]

Hold To Delete Button

Installation

Files

components

Styles