Skip to main content

​
Installation

npx shadcn@latest add @kokonutui/hold-button

​
Usage

import HoldButton from "@/components/kokonutui/hold-button";

export default function Example() {
  return (
    <div className="flex flex-col gap-2">
      <HoldButton variant="red" holdDuration={3000} />
      <HoldButton variant="green" holdDuration={1000} />
      <HoldButton variant="blue" holdDuration={2000} />
    </div>
  );
}

​
Props

PropTypeDefaultDescription
variant"red" | "green" | "blue" | "orange" | "grey""red"Color variant for the button
holdDurationnumber3000Duration in milliseconds to hold before action completes
classNamestring-Additional CSS classes

​
Variants

Each variant comes with a matching icon:
  • red - Trash icon (for delete actions)
  • green - Archive icon
  • blue - XCircle icon
  • orange - AlertCircle icon
  • grey - Ban icon

​
Dependencies

  • motion/react (Framer Motion) - For progress bar animation
  • lucide-react - For variant icons
  • class-variance-authority - For variant styling
  • @/components/ui/button - Base button component
  • @/lib/utils - Utility functions (cn)

​
Features

  • Visual progress indicator while holding
  • Touch-friendly (supports both mouse and touch events)
  • Five color variants for different action types
  • Automatically resets if user releases early
  • Dark mode support
  • Perfect for confirming destructive actions

Build docs developers (and LLMs) love

Get started for freeTalk to us