Copy Button

Animated copy button with visual feedback and state management. Perfect for React applications requiring clipboard functionality with Next.js integration and TypeScript support.

Motion

Class Variance Authority

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 };

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

Features

Animated state transitions with smooth scale effects using Motion (Framer Motion)
Visual feedback showing copy success with animated icon swap
Multiple variants including default, ghost, outline, secondary, muted, and destructive
Four size options from small to large with proportional icon scaling
TypeScript support with complete type definitions for all props
Controlled and uncontrolled modes for flexible state management

Examples

Variants

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 };

Display different button styles for various UI contexts and design systems.

Sizes

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 };

Scale the button and icon appropriately for different interface densities.

Use Cases

This free open source React component works well for:

Code snippets - Copy code examples in documentation built with Next.js
Share functionality - Copy URLs or share links using TypeScript and Tailwind CSS
Form fields - Quick copy for API keys, tokens, or configuration values
Data tables - Copy cell values or row data with shadcn/ui integration
Command palettes - Copy commands or shortcuts in developer tools

API Reference

CopyButton

Prop	Type	Default	Description
`content`	`string`	-	The text content to copy to clipboard
`variant`	`"default" \| "ghost" \| "outline" \| "secondary" \| "muted" \| "destructive"`	`"default"`	Visual style variant
`size`	`"sm" \| "default" \| "md" \| "lg"`	`"default"`	Button and icon size
`delay`	`number`	`3000`	Duration in ms before resetting to copy state
`onCopy`	`(content: string) => void`	-	Callback when content is copied
`isCopied`	`boolean`	-	Controlled copy state
`onCopyChange`	`(isCopied: boolean) => void`	-	Callback when copy state changes
`className`	`string`	-	Additional CSS classes

Size Specifications

sm - 24x24px button, 12x12px icon
default - 32x32px button, 16x16px icon
md - 40x40px button, 20x20px icon
lg - 48x48px button, 24x24px icon

Implementation Notes

Uses native Clipboard API (navigator.clipboard.writeText)
Automatically handles copy state with configurable reset delay
Supports both controlled and uncontrolled usage patterns
Icon animation provides clear visual feedback
Falls back gracefully if clipboard access fails
Compatible with shadcn/ui design system tokens

Reactcopy-button

Reactcopy-button

Reactcopy-button

On this page