Copy Button

Copy text to clipboard with visual feedback and animation.

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

Features

Smooth icon transitions: Animated state changes using Motion
Visual feedback: Three distinct states - idle, success, error
Flexible text input: String or function for dynamic content
Callback support: Handlers for success and error events

Installation

$ pnpm dlx shadcn add @ncdai/copy-button

Usage

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

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

API Reference

Extends Button with clipboard functionality. Accepts all Button props plus:

Prop	Type	Description
`text`	`string \| (() => string)`	The text to copy to clipboard. Can be a string or a function that returns a string.
`onCopySuccess`	`(text: string) => void`	Optional callback function called when copy succeeds. Receives the copied text.
`onCopyError`	`(error: Error) => void`	Optional callback function called when copy fails. Receives the error object.

See shadcn/ui documentation for more information.