React Copy Button

React copy button with one-click clipboard copying and visual feedback. Smooth animations and state management with TypeScript and shadcn/ui styling.

React

Framer Motion

Class Variance Authority

Building clipboard interactions?

Join our Discord community for help from other developers.

Every code snippet, every share link, every API key needs a copy button. Users expect them everywhere. But most implementations are terrible—no feedback, laggy animations, or worse, that ancient "Copied!" tooltip that never goes away. This React component gives you instant visual feedback with smooth icon transitions that users actually notice.

Instant clipboard copying

Click to copy with satisfying visual feedback that confirms the action:

Loading component...

'use client';import * as React from 'react';import { AnimatePresence, HTMLMotionProps, motion } from 'motion/react';import { CheckIcon, CopyIcon } from 'lucide-react';import { cva, type VariantProps } from 'class-variance-authority';import { cn } from '@/lib/utils';const buttonVariants = cva(  'inline-flex items-center justify-center cursor-pointer rounded-md transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',  {    variants: {      variant: {        default:          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',        muted: 'bg-muted text-muted-foreground',        destructive:          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',        outline:          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',        secondary:          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',        ghost:          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',      },      size: {        default: 'size-8 rounded-lg [&_svg]:size-4',        sm: 'size-6 [&_svg]:size-3',        md: 'size-10 rounded-lg [&_svg]:size-5',        lg: 'size-12 rounded-xl [&_svg]:size-6',      },    },    defaultVariants: {      variant: 'default',      size: 'default',    },  },);type CopyButtonProps = Omit<HTMLMotionProps<'button'>, 'children' | 'onCopy'> &  VariantProps<typeof buttonVariants> & {    content?: string;    delay?: number;    onCopy?: (content: string) => void;    isCopied?: boolean;    onCopyChange?: (isCopied: boolean) => void;  };function CopyButton({  content,  className,  size,  variant,  delay = 3000,  onClick,  onCopy,  isCopied,  onCopyChange,  ...props}: CopyButtonProps) {  const [localIsCopied, setLocalIsCopied] = React.useState(isCopied ?? false);  const Icon = localIsCopied ? CheckIcon : CopyIcon;  React.useEffect(() => {    setLocalIsCopied(isCopied ?? false);  }, [isCopied]);  const handleIsCopied = React.useCallback(    (isCopied: boolean) => {      setLocalIsCopied(isCopied);      onCopyChange?.(isCopied);    },    [onCopyChange],  );  const handleCopy = React.useCallback(    (e: React.MouseEvent<HTMLButtonElement>) => {      if (isCopied) return;      if (content) {        navigator.clipboard          .writeText(content)          .then(() => {            handleIsCopied(true);            setTimeout(() => handleIsCopied(false), delay);            onCopy?.(content);          })          .catch((error) => {            console.error('Error copying command', error);          });      }      onClick?.(e);    },    [isCopied, content, delay, onClick, onCopy, handleIsCopied],  );  return (    <motion.button      data-slot="copy-button"      whileHover={{ scale: 1.05 }}      whileTap={{ scale: 0.95 }}      className={cn(buttonVariants({ variant, size }), className)}      onClick={handleCopy}      {...props}    >      <AnimatePresence mode="wait">        <motion.span          key={localIsCopied ? 'check' : 'copy'}          data-slot="copy-button-icon"          initial={{ scale: 0 }}          animate={{ scale: 1 }}          exit={{ scale: 0 }}          transition={{ duration: 0.15 }}        >          <Icon />        </motion.span>      </AnimatePresence>    </motion.button>  );}export { CopyButton, buttonVariants, type CopyButtonProps };

Built for React applications with TypeScript and Next.js. Uses native Clipboard API with proper fallbacks. The icon animation runs on the GPU using Framer Motion, keeping interactions smooth even during heavy JavaScript operations. Works seamlessly with shadcn/ui design systems.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/copy-button.json

npx shadcn@latest add https://www.shadcn.io/registry/copy-button.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/copy-button.json

bunx shadcn@latest add https://www.shadcn.io/registry/copy-button.json

Usage

import { CopyButton } from "@/components/ui/copy-button";

export default function ShareLink() {
  const shareUrl = "https://example.com/shared-content";
  
  return (
    <div className="flex items-center gap-2">
      <input 
        value={shareUrl} 
        readOnly 
        className="flex-1 px-3 py-2 border rounded-md"
      />
      <CopyButton 
        content={shareUrl}
        onCopy={() => console.log("Link copied!")}
      />
    </div>
  );
}

Why most copy buttons suck

Users click copy buttons and nothing happens. Or they get a tiny checkmark they miss. Or that annoying tooltip that blocks content. Most developers just slap navigator.clipboard.writeText on a button and call it done.

The problem isn't the clipboard API—it's the feedback. Users need immediate, obvious confirmation. This React component morphs the icon from copy to check with a smooth scale animation. The state auto-resets after 3 seconds (configurable). No tooltips blocking content, no guessing if it worked.

Plus, it handles the edge cases: clipboard API failures, permission denials, old browsers. Your users get consistent behavior across all scenarios.

Examples

Button Variants

Different styles for different contexts—ghost for minimal UI, outline for forms:

Loading component...

'use client';import * as React from 'react';import { AnimatePresence, HTMLMotionProps, motion } from 'motion/react';import { CheckIcon, CopyIcon } from 'lucide-react';import { cva, type VariantProps } from 'class-variance-authority';import { cn } from '@/lib/utils';const buttonVariants = cva(  'inline-flex items-center justify-center cursor-pointer rounded-md transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',  {    variants: {      variant: {        default:          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',        muted: 'bg-muted text-muted-foreground',        destructive:          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',        outline:          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',        secondary:          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',        ghost:          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',      },      size: {        default: 'size-8 rounded-lg [&_svg]:size-4',        sm: 'size-6 [&_svg]:size-3',        md: 'size-10 rounded-lg [&_svg]:size-5',        lg: 'size-12 rounded-xl [&_svg]:size-6',      },    },    defaultVariants: {      variant: 'default',      size: 'default',    },  },);type CopyButtonProps = Omit<HTMLMotionProps<'button'>, 'children' | 'onCopy'> &  VariantProps<typeof buttonVariants> & {    content?: string;    delay?: number;    onCopy?: (content: string) => void;    isCopied?: boolean;    onCopyChange?: (isCopied: boolean) => void;  };function CopyButton({  content,  className,  size,  variant,  delay = 3000,  onClick,  onCopy,  isCopied,  onCopyChange,  ...props}: CopyButtonProps) {  const [localIsCopied, setLocalIsCopied] = React.useState(isCopied ?? false);  const Icon = localIsCopied ? CheckIcon : CopyIcon;  React.useEffect(() => {    setLocalIsCopied(isCopied ?? false);  }, [isCopied]);  const handleIsCopied = React.useCallback(    (isCopied: boolean) => {      setLocalIsCopied(isCopied);      onCopyChange?.(isCopied);    },    [onCopyChange],  );  const handleCopy = React.useCallback(    (e: React.MouseEvent<HTMLButtonElement>) => {      if (isCopied) return;      if (content) {        navigator.clipboard          .writeText(content)          .then(() => {            handleIsCopied(true);            setTimeout(() => handleIsCopied(false), delay);            onCopy?.(content);          })          .catch((error) => {            console.error('Error copying command', error);          });      }      onClick?.(e);    },    [isCopied, content, delay, onClick, onCopy, handleIsCopied],  );  return (    <motion.button      data-slot="copy-button"      whileHover={{ scale: 1.05 }}      whileTap={{ scale: 0.95 }}      className={cn(buttonVariants({ variant, size }), className)}      onClick={handleCopy}      {...props}    >      <AnimatePresence mode="wait">        <motion.span          key={localIsCopied ? 'check' : 'copy'}          data-slot="copy-button-icon"          initial={{ scale: 0 }}          animate={{ scale: 1 }}          exit={{ scale: 0 }}          transition={{ duration: 0.15 }}        >          <Icon />        </motion.span>      </AnimatePresence>    </motion.button>  );}export { CopyButton, buttonVariants, type CopyButtonProps };

Size Options

Scale appropriately for dense interfaces or touch targets:

Loading component...

'use client';import * as React from 'react';import { AnimatePresence, HTMLMotionProps, motion } from 'motion/react';import { CheckIcon, CopyIcon } from 'lucide-react';import { cva, type VariantProps } from 'class-variance-authority';import { cn } from '@/lib/utils';const buttonVariants = cva(  'inline-flex items-center justify-center cursor-pointer rounded-md transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',  {    variants: {      variant: {        default:          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',        muted: 'bg-muted text-muted-foreground',        destructive:          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',        outline:          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',        secondary:          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',        ghost:          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',      },      size: {        default: 'size-8 rounded-lg [&_svg]:size-4',        sm: 'size-6 [&_svg]:size-3',        md: 'size-10 rounded-lg [&_svg]:size-5',        lg: 'size-12 rounded-xl [&_svg]:size-6',      },    },    defaultVariants: {      variant: 'default',      size: 'default',    },  },);type CopyButtonProps = Omit<HTMLMotionProps<'button'>, 'children' | 'onCopy'> &  VariantProps<typeof buttonVariants> & {    content?: string;    delay?: number;    onCopy?: (content: string) => void;    isCopied?: boolean;    onCopyChange?: (isCopied: boolean) => void;  };function CopyButton({  content,  className,  size,  variant,  delay = 3000,  onClick,  onCopy,  isCopied,  onCopyChange,  ...props}: CopyButtonProps) {  const [localIsCopied, setLocalIsCopied] = React.useState(isCopied ?? false);  const Icon = localIsCopied ? CheckIcon : CopyIcon;  React.useEffect(() => {    setLocalIsCopied(isCopied ?? false);  }, [isCopied]);  const handleIsCopied = React.useCallback(    (isCopied: boolean) => {      setLocalIsCopied(isCopied);      onCopyChange?.(isCopied);    },    [onCopyChange],  );  const handleCopy = React.useCallback(    (e: React.MouseEvent<HTMLButtonElement>) => {      if (isCopied) return;      if (content) {        navigator.clipboard          .writeText(content)          .then(() => {            handleIsCopied(true);            setTimeout(() => handleIsCopied(false), delay);            onCopy?.(content);          })          .catch((error) => {            console.error('Error copying command', error);          });      }      onClick?.(e);    },    [isCopied, content, delay, onClick, onCopy, handleIsCopied],  );  return (    <motion.button      data-slot="copy-button"      whileHover={{ scale: 1.05 }}      whileTap={{ scale: 0.95 }}      className={cn(buttonVariants({ variant, size }), className)}      onClick={handleCopy}      {...props}    >      <AnimatePresence mode="wait">        <motion.span          key={localIsCopied ? 'check' : 'copy'}          data-slot="copy-button-icon"          initial={{ scale: 0 }}          animate={{ scale: 1 }}          exit={{ scale: 0 }}          transition={{ duration: 0.15 }}        >          <Icon />        </motion.span>      </AnimatePresence>    </motion.button>  );}export { CopyButton, buttonVariants, type CopyButtonProps };

Features

Smooth icon morphing with Framer Motion spring animations that feel responsive
Auto-resetting state with configurable delay for continuous copying workflows
Six visual variants matching shadcn/ui design patterns (default, ghost, outline, secondary, muted, destructive)
Four size presets optimized for different interface densities and touch targets
TypeScript definitions with complete prop types and variant exports
Controlled and uncontrolled modes for integration with form libraries or state management
Clipboard API with fallbacks handling permissions and browser compatibility
Accessible button semantics with proper ARIA attributes and keyboard support

API Reference

CopyButton

The main component for clipboard copying with visual feedback.

Prop	Type	Default	Description
`content`	`string`	-	Text content to copy to clipboard
`variant`	`"default" \| "ghost" \| "outline" \| "secondary" \| "muted" \| "destructive"`	`"default"`	Visual style variant matching shadcn/ui patterns
`size`	`"sm" \| "default" \| "md" \| "lg"`	`"default"`	Button and icon sizing preset
`delay`	`number`	`3000`	Milliseconds before resetting to copy state
`onCopy`	`(content: string) => void`	-	Callback fired when content is successfully copied
`isCopied`	`boolean`	-	Controlled copy state for external management
`onCopyChange`	`(isCopied: boolean) => void`	-	Callback for controlled state changes
`className`	`string`	-	Additional CSS classes for customization
`...props`	`ButtonHTMLAttributes`	-	All native button props are supported

Size Specifications

Each size is optimized for specific use cases:

Size	Button	Icon	Use Case
`sm`	24×24px	12×12px	Dense interfaces, inline with text
`default`	32×32px	16×16px	Standard UI, forms, toolbars
`md`	40×40px	20×20px	Touch-friendly, mobile interfaces
`lg`	48×48px	24×24px	Hero sections, prominent actions

Common gotchas

Clipboard permissions: The Clipboard API requires HTTPS in production. It works on localhost for development but will fail silently on HTTP sites. Always test in production environment.

Mobile Safari quirks: On iOS, clipboard access might require user interaction. The component handles this, but avoid triggering copies programmatically without user action.

State reset timing: The default 3-second reset works for most cases. For rapid copying scenarios (like in data tables), reduce to 1500ms. For critical confirmations, increase to 5000ms.

Icon sizing with custom classes: If you override sizes with Tailwind classes, the icon might not scale properly. Use the size prop instead of custom width/height classes.

Async content generation: If your content comes from an async source, generate it before passing to the component. The copy happens synchronously for security reasons.

Explore other interactive button components for React applications:

React Copy Button

Instant clipboard copying

Installation

Usage

Why most copy buttons suck

Examples

Button Variants

Size Options

Features

API Reference

CopyButton

Size Specifications

Common gotchas

You might also like

Ripple Button

Liquid Button

Flip Button

Icon Button

Questions developers actually ask

On this page

React Copy Button