CopyButton
Animated copy-to-clipboard with Linear-style micro-interaction.
Make it with Workshop
Build your own component with AI
About this Component
A production-ready copy button with satisfying feedback. Click triggers a smooth scale animation, icon morphs from clipboard to checkmark, background shifts to a success color, then auto-resets. Handles clipboard errors gracefully with a dedicated error state.
Customizable properties:
Text to Copy : The content copied to clipboard (supports multiline)
Idle / Copied / Error Labels : Button text for each state
Show Icon : Toggle the animated clipboard/checkmark icons
Size : Small, Medium, or Large presets
Style : Filled (solid background), Outline (border only), or Ghost (transparent)
Idle Color / Idle Text : Background and text colors in default state
Copied Color / Copied Text : Background and text colors after successful copy
Error Color : Background color when clipboard access fails
Radius : Corner rounding (0–24px)
Reset Delay —:How long success/error states show before reverting (500–5000ms)
Haptics : Vibrate on mobile devices when copied
Works on any background. Clipboard API fallback for older browsers.
