Copy Button

Copy text to clipboard with visual feedback and animation.

Loading…

import { CopyButton } from "@/components/copy-button"
 
export default function CopyButtonDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <CopyButton variant="secondary" text="Text 1" />
 
      <CopyButton
        className="pr-3 pl-2.5 will-change-transform"
        variant="outline"
        size="default"
        text="Text 2"
      >
        Copy
      </CopyButton>
    </div>
  )
}

Features

Smooth icon transitions with animated state changes using Motion.
Visual feedback with three distinct states: idle, success, and error.
Accepts a string or function for dynamic content.
Callback support for success and error events.

Installation

$ pnpm dlx shadcn@latest add @ehtisham/copy-button

Usage

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

<CopyButton text="Some text to copy" />

API Reference

CopyButton

Extends Button with clipboard functionality.

Prop

Type

See shadcn/ui documentation for more information.