CopyButton

Show Preview
CopyButton
CopyButton

About CopyButton

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.

From Clément Rog

CommandPalette
Syntax
VariableFontScrubber
Interactive Terminal

Related Components

Flapboard
Particle Button
Shiny Grain Button
Aura Morph Button