"use client";

import * as React from "react";
import { useState, useCallback } from "react";
import { Check, Copy } from "lucide-react";
import { cn } from "@/lib/utils";

interface CopyButtonProps {
  text: string;
  className?: string;
  size?: "sm" | "md" | "lg";
  variant?: "default" | "outline" | "ghost";
  label?: string;
  successLabel?: string;
}

export function CopyButton({
  text,
  className,
  size = "md",
  variant = "default",
  label = "Copy",
  successLabel = "Copied!",
}: CopyButtonProps) {
  const [copied, setCopied] = useState(false);

  const handleCopy = useCallback(async () => {
    try {
      await navigator.clipboard.writeText(text);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (err) {
      console.error("Failed to copy:", err);
    }
  }, [text]);

  const sizeClasses = {
    sm: "px-2 py-1 text-xs gap-1",
    md: "px-3 py-1.5 text-sm gap-1.5",
    lg: "px-4 py-2 text-base gap-2",
  };

  const iconSizes = {
    sm: "h-3 w-3",
    md: "h-3.5 w-3.5",
    lg: "h-4 w-4",
  };

  const variantClasses = {
    default: "bg-primary text-primary-foreground hover:bg-primary/90",
    outline: "border border-border bg-background text-foreground hover:bg-muted",
    ghost: "text-foreground hover:bg-muted",
  };

  return (
    <button
      type="button"
      onClick={handleCopy}
      aria-label={copied ? successLabel : label}
      data-state={copied ? "copied" : "idle"}
      className={cn(
        "relative inline-flex items-center justify-center rounded-md font-medium",
        "transition-all duration-200 ease-out",
        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
        "disabled:pointer-events-none disabled:opacity-50",
        sizeClasses[size],
        variantClasses[variant],
        copied && "ring-2 ring-primary/30",
        className
      )}
    >
      <span
        className={cn(
          "inline-flex items-center transition-all duration-200",
          sizeClasses[size],
          copied ? "scale-0 opacity-0" : "scale-100 opacity-100"
        )}
        aria-hidden={copied}
      >
        <Copy className={cn(iconSizes[size], "shrink-0")} />
        <span>{label}</span>
      </span>
      <span
        className={cn(
          "absolute inset-0 inline-flex items-center justify-center transition-all duration-200",
          sizeClasses[size],
          copied ? "scale-100 opacity-100" : "scale-0 opacity-0"
        )}
        aria-hidden={!copied}
      >
        <Check className={cn(iconSizes[size], "shrink-0 text-primary")} />
        <span>{successLabel}</span>
      </span>
      <span className="sr-only" role="status" aria-live="polite">
        {copied ? "Copied to clipboard" : ""}
      </span>
    </button>
  );
}
Copy Button

Dependencies

Files

Installation
