Copy Button

A clipboard button with animated icon swaps, optional labels, and tooltip text.

copy-button

0px

Customize

Edit props; preview updates instantly.

Customize

Text As

Icon Animate

Delay (ms)

4000ms

Props

Props accepted by CopyButton.

Prop	Type	Default	Description
content	string	—	Text written to the clipboard on click.
text	boolean	false	Show the label text alongside (or via tooltip) the icon.
textAs	"inline" \| "tooltip"	"inline"	Where to render the label when `text` is true.
revealAnimate	boolean	true	When the inline label swaps, wipe it with RevealAnimate (old text wipes toward the icon, new text wipes out). Disable for an instant swap.
iconAnimate	"blur" \| "draw" \| "reveal"	"blur"	Icon swap animation. `blur` (default) = scale + opacity + blur; `draw` = stroke-dashoffset draw-in (same technique as the Checkbox indicator); `reveal` = RevealAnimate mask wipe.
label	string	"Copy"	Label text (rendered inline or inside the tooltip).
copiedLabel	string	"Copied"	Label swapped in while in the copied state.
delay	number	4000	How long the copied state lingers before reverting (ms).
copied	boolean	—	Controlled copied state. Leave undefined for uncontrolled.
onCopiedChange	(copied: boolean) => void	—	Fires whenever the copied state changes.
className	string	—	Extra class names merged onto the button.

Installation

Choose CLI for the one-line shadcn install, or copy the file manually.

npx shadcn@latest add https://2lazyui.com/r/copy-button.json

Usage

Import the component and drop it into a render.

demo.tsx19 lines

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

export function Demo() {
  return (
    <>
      {/* Icon only (default) */}
      <CopyButton content="npm install lazy-ui" />

      {/* Inline label with RevealAnimate wipe */}
      <CopyButton content="npm install lazy-ui" text label="Copy" />

      {/* Tooltip label on hover */}
      <CopyButton content="npm install lazy-ui" text textAs="tooltip" />

      {/* Pick a different icon animation */}
      <CopyButton content="npm install lazy-ui" iconAnimate="reveal" />
    </>
  );
}

Credits

Animate UIReference point for compact motion-first copy actions.Clipboard APINative clipboard write used by the button action.