Blode UI
GitHub

Copy Button

PreviousNext

A button that copies text to the clipboard with animated feedback.

Loading
Loading...
import { CopyButton } from "@/components/ui/copy-button";
 
export function CopyButtonDemo() {
  return (
    <div className="flex items-center gap-2 rounded-lg border border-input bg-card px-3 py-2">
      <code className="text-muted-foreground text-sm">npm install @blode/ui</code>
      <CopyButton value="npm install @blode/ui" />
    </div>
  );
}

Installation

npx shadcn@latest add "https://ui.blode.co/r/styles/default/copy-button"

Usage

import { CopyButton } from "@/components/ui/copy-button";
<CopyButton value="Text to copy" />

Props

PropTypeDefaultDescription
valuestring-The text to copy to clipboard (required).
onCopy() => void-Callback fired when the text is copied.
timeoutnumber2000Milliseconds before resetting the icon.
labelstring"Copy"Accessible label for screen readers.
variantButtonVariant"ghost"Button variant (all Button variants work).
sizeButtonSize"icon"Button size (all Button sizes work).

All other props are forwarded to the underlying Button component.

Examples

Default

Loading
Loading...
import { CopyButton } from "@/components/ui/copy-button";
 
export function CopyButtonDemo() {
  return (
    <div className="flex items-center gap-2 rounded-lg border border-input bg-card px-3 py-2">
      <code className="text-muted-foreground text-sm">npm install @blode/ui</code>
      <CopyButton value="npm install @blode/ui" />
    </div>
  );
}