component
CopyButton
By Clément Rog
Details
- Clément RogAuthor
- componentType
- 2026-01-07Published
- 2026-01-06Updated
- 2025-12-17Added
- ButtonsCategories
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.
- All · #5798