CopyButton: Free Buttons Component by Clément Rog

Marketplace Components Categories Buttons

Animated copy-to-clipboard with Linear-style micro-interaction.

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