Hold Button

Button that requires holding for a specified duration, with progress indicator and color variants

button hold progress animation interactive

import HoldButton from "@/components/vritti/hold-button"

export function HoldButtonExample() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-4 p-8">
      <HoldButton variant="red" holdDuration={2000} />
      <HoldButton variant="blue" holdDuration={3000} />
      <HoldButton variant="green" holdDuration={2500} />
    </div>
  )
}

Installation


pnpm dlx shadcn@latest add "https://vritti.thesatyajit.com/r/hold-button"

Dependencies


pnpm add motion lucide-react