Skip to content

component

CopyButton

By Clément Rog

Details

Summary

A production-ready copy button with satisfying feedback.

Description

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.

Rank history

Daily rank per list, from the first snapshot — lower is better.

12001400157988/148/228/309/79/15
  • All · #5798