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

Copy Button

A button that copies text to your clipboard when clicked. Shows a check mark after copying and comes in different sizes.

Utility function

Create a file lib/utils.ts and paste this code

import { ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Install dependencies

npm i framer-motion

Copy Text Button

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

'use client';

import React, { useState } from 'react';
import { Check, Copy } from 'lucide-react';
import { cn } from '@/lib/utils';
import { AnimatePresence, motion } from 'framer-motion';

const CopyTextButton = ({
  label,
  icon = <Copy className="h-5 w-5" />, // * Icon to show on the button
  variant = 'default',
  className = '',
  onCopy,
  textToCopy // * Text you want to copy
}: {
  label: string;
  icon?: React.ReactNode;
  variant?: 'default' | 'small';
  className?: string;
  onCopy?: () => void;
  textToCopy?: string;
}) => {
  const [copied, setCopied] = useState(false);
  const handleCopy = () => {
    if (onCopy) onCopy();
    else navigator.clipboard.writeText(textToCopy || label);
    setCopied(true);
    setTimeout(() => setCopied(false), 1200);
  };

  return (
    <button
      className={cn(
        'bg-zinc-800 w-min hover:bg-zinc-700 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition',
        variant === 'small' && 'text-xs',
        className
      )}
      onClick={handleCopy}
    >
      <AnimatePresence mode="popLayout">
        {copied ? (
          <motion.div
            key="copied"
            initial={{ opacity: 0, transform: 'blur(10px)' }}
            animate={{ opacity: 1, transform: 'blur(0px)' }}
            exit={{ opacity: 0, transform: 'blur(10px)' }}
            transition={{
              duration: 0.1
            }}
          >
            <Check className={cn(variant === 'small' ? 'w-4 h-4' : 'w-4 h-4', 'text-green-400')} />
          </motion.div>
        ) : (
          <motion.div
            key="icon"
            initial={{ opacity: 0, transform: 'blur(10px)' }}
            animate={{ opacity: 1, transform: 'blur(0px)' }}
            exit={{ opacity: 0, transform: 'blur(10px)' }}
            transition={{
              duration: 0.1
            }}
          >
            {icon}
          </motion.div>
        )}
      </AnimatePresence>
      <span className="whitespace-nowrap">{label}</span>
    </button>
  );
};

export default CopyTextButton;

Usage

<div className="flex flex-col gap-4 items-center justify-center">
  <CopyTextButton
    label="Copy some text"
    textToCopy="pAsSwOrD"
    icon={<Copy className="w-4 h-4" />}
  />
  <CopyTextButton
    label="Small Variant"
    textToCopy="pAsSwOrD"
    icon={<Copy className="w-4 h-4" />}
    variant="small"
  />
</div>