StackBits

Buttons

Animated Gradient Button

Copy Button

Hold Button

Toggle Button

Moving Border Button

Navigation Button

Pagination Button

Random Button

Shine Button

Backgrounds

Glowing Dots Background

Prismatic Haze Background

Proximity Background

Space Travel

Wavy Background

Texts

Blur Text

Bounce In Text

Dotted Text

Glitch Text

Gooey Words

Hidden Text

Pixelated Text

Rainbow Text

Sentence Flip

Wavy Text

Utilities

Axios Interceptor

Custom Logger

Dark & Light Theme

Debounce

Encryption Decryption

Express Server

Regex Validations

Yup Validations

Hold Button

A button that requires users to hold it down for a specified duration before triggering an action. Perfect for preventing accidental clicks on important operations like payments or deletions.

Hold Button

Create a file hold-button.tsx in your components folder and paste this code

'use client';

import { Check, Trash } from 'lucide-react';
import { AnimatePresence, motion } from 'framer-motion';
import { useState } from 'react';

const HoldButton = ({
  children,
  variant = 'default',
  icon = null,
  onClick,
  holdDuration = 1000,
  successText = 'Confirmed'
}: {
  children: React.ReactNode;
  variant?: 'default' | 'success' | 'destructive';
  icon?: React.ReactNode;
  onClick?: () => void;
  holdDuration?: number;
  successText?: string;
}) => {
  const [isSuccess, setIsSuccess] = useState(false);
  const [intervalId, setIntervalId] = useState<NodeJS.Timeout | null>(null);

  const handleMouseDown = () => {
    setIntervalId(
      setTimeout(() => {
        setIsSuccess(true);
        if (onClick) {
          onClick();
        }
        setTimeout(() => setIsSuccess(false), 600);
      }, holdDuration)
    );
  };

  const handleMouseUp = () => {
    if (intervalId) {
      clearTimeout(intervalId);
      setIntervalId(null);
    }
  };

  const variants = {
    default: {
      color: '#007BFF',
      backgroundColor: '#CCE5FF',
      icon: <Check size={18} />
    },
    success: {
      color: '#4CAF50',
      backgroundColor: '#C8E6C9',
      icon: <Check size={18} />
    },
    destructive: {
      color: '#E5484D',
      backgroundColor: '#FFDBDC',
      icon: <Trash size={18} />
    }
  };

  return (
    <>
      <style>
        {`
          .button {
            position: relative;
            display: flex;
            height: 40px;
            align-items: center;
            gap: 8px;
            border-radius: 9999px;
            padding-inline: 24px;
          }

          .overlay-btn {
            position: absolute;
            top: 0px;
            clip-path: inset(0% 100% 0% 0%);
          }

          .wrapper {
            transition: 0.15s ease-out;
          }

          .wrapper:active .overlay-btn {
            clip-path: inset(0% 0% 0% 0%);
            transition: 1000ms ease-in-out;
          }

          .wrapper:active {
            scale: 0.97;
          }
        `}
      </style>
      <div onMouseDown={handleMouseDown} onMouseUp={handleMouseUp} className="relative wrapper">
        <button className="button trigger-btn hover:bg-zinc-800 bg-zinc-700 text-white">
          {icon || variants[variant].icon}
          {children}
        </button>
        <button
          style={{
            color: variants[variant].color,
            backgroundColor: variants[variant].backgroundColor,
            transition: intervalId ? `${holdDuration}ms ease-out` : '0.2s ease-out'
          }}
          className="button overlay-btn w-full"
        >
          <div className="shrink-0">{icon || variants[variant].icon}</div>
          <div className="relative w-full">
            <AnimatePresence mode="popLayout">
              {!isSuccess ? (
                <motion.div
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: -10 }}
                  className="whitespace-nowrap h-full"
                >
                  {children}
                </motion.div>
              ) : (
                <motion.p
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: -10 }}
                  className="whitespace-nowrap h-full text-left"
                >
                  {successText}
                </motion.p>
              )}
            </AnimatePresence>
          </div>
        </button>
      </div>
    </>
  );
};

export default HoldButton;

Usage

 <div className="flex flex-col gap-4 items-center justify-center">
    <HoldButton
        variant="default"
        onClick={() => {
        console.log('Confirmed');
        }}
    >
        Hold to Confirm
    </HoldButton>
    <HoldButton
        variant="success"
        successText="Success"
        icon={<BadgeDollarSign size={18} />}
    >
        Hold to Pay Now
    </HoldButton>
    <HoldButton variant="destructive" successText="Deleted" holdDuration={2000}>
        Hold to Delete
    </HoldButton>
</div>