Copy Button
A button with a copy to clipboard animation and optional text label.
Powered by
Shadcn UI
Animate UI
Lucide
MotionInstallation
npx shadcn@latest add @redpanda/copy-buttonpnpm dlx shadcn@latest add @redpanda/copy-buttonyarn dlx shadcn@latest add @redpanda/copy-buttonbunx shadcn@latest add @redpanda/copy-buttonnubx shadcn@latest add @redpanda/copy-buttonaube dlx shadcn@latest add @redpanda/copy-buttonWhen to use
Use this decision tree to determine when to use the Copy Button component:
Motion features
CopyButton includes its synchronous Motion features; no application-level LazyMotion provider is required. Its HTMLMotionProps contract still supports drag and layout animations, and it inherits an enclosing MotionConfig, including reduced-motion preferences.
Usage
Icon Only
<CopyButton content="Hello world!" size="icon" />With Text Label
<CopyButton content="npm install @redpanda/ui">Copy</CopyButton>Different Variants
<CopyButton content="Hello world!" variant="outline"> Copy to clipboard</CopyButton>
<CopyButton content="Some text" variant="default"> Copy text</CopyButton>
<CopyButton content="Code snippet" variant="ghost"> Copy</CopyButton>When the write is refused
No permission, no secure context, no clipboard API: the button swaps to an X for delay and renders a
role="alert" region beside itself. The icon span carries data-state="idle" | "copied" | "error", and
an icon-only button is named “Copy” unless you pass an aria-label.
Props
content?string
The content to copy to the clipboard.
stringchildren?React.ReactNode
Optional text label to display next to the icon.
React.ReactNodedelay?number
The delay in milliseconds before the button resets.
number3000size?'sm' | 'md' | 'lg' | 'icon' | 'icon-xs'
The size of the button.
'sm' | 'md' | 'lg' | 'icon' | 'icon-xs'mdvariant?'default' | 'destructive' | 'outline' | 'secondary' | 'ghost'
The variant of the button.
'default' | 'destructive' | 'outline' | 'secondary' | 'ghost'defaultonCopy?(content: string) => void
The function to call when copy is successful.
(content: string) => voidCredits
- We take our inspiration from Shadcn UI for the button style.
- We use Animate UI from imskyleen for all the animations.