Command Palette

Search for a command to run...

Components
Next

Copy Button

A copy button with direction-aware icon transitions.

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="This is a demo text" />
      <CopyButton
        className="pr-3 pl-2.5 will-change-transform"
        variant="outline"
        size="default"
        text="This is another demo text"
      >
        Copy
      </CopyButton>
    </div>
  );
}

Installation

bunx --bun shadcn@latest add "https://ratneshc.com/r/copy-button.json"

Usage

import { CopyButton } from "@/components/copy-button";
<CopyButton text="This is a demo text" />

API Reference

Extends Button with clipboard functionality.

PropTypeDefaultDescription
textstring | (() => string)-The text to copy, or a function that returns the text.
idleIconReactNode-Custom icon for idle state.
doneIconReactNode-Custom icon for done state.
errorIconReactNode-Custom icon for error state.
onCopySuccess(text: string) => void-Called with the copied text on successful copy.
onCopyError(error: Error) => void-Called with the error if the copy operation fails.

See shadcn/ui documentation for more information.

References