Docs
Copy Button

Copy Button

A button component that copies content to clipboard with visual feedback.

The CopyButton component provides a simple way to copy text to the clipboard with visual feedback using a check mark animation when successful.

Installation

npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/copy-button.json

Usage

import { CopyButton } from "@/components/ui/copy-button"
 
export function Demo() {
  return (
    <CopyButton
      content="Text to be copied"
      copyMessage="Copied to clipboard!"
    />
  )
}

Props

PropTypeDescription
contentstringThe text content to be copied to clipboard
copyMessage?stringOptional custom message to show when content is copied

Examples

Basic Usage

<CopyButton content="Text to copy" />

With Custom Success Message

<CopyButton
  content="API_KEY_123456"
  copyMessage="API key copied to clipboard!"
/>

Within a Code Block

<pre className="relative">
  <code>console.log("Hello World")</code>
  <div className="absolute right-2 top-2">
    <CopyButton content='console.log("Hello World")' />
  </div>
</pre>
Typing Indicator