lingodotdev
Add animated “Copied” feedback for markdown terminal copy buttons
📝 Description
Currently, when users copy commands from markdown code blocks or terminal snippets, there’s no visual confirmation indicating that the command was successfully copied.
To improve UX and accessibility, I implemented an animated “Copied” effect that briefly replaces the copy icon or label with a checkmark and “Copied!” text.
✅ Proposed Solution
Add a visual animation (fade-in/fade-out or scale effect) on copy button click.
Show “Copied!” text or a ✓ icon for 1–2 seconds.
Restore the default “Copy” state after the animation ends.
Keep the implementation lightweight and reusable across markdown/terminal components.
🧩 Affected Components
react/markdown-copy-button.tsx (or related component handling copy to clipboard)
Possible CSS/animation utility in packages/react or packages/ui.
🧠 Benefits
Improves user feedback and interaction clarity.
Matches modern documentation UX standards (e.g., Next.js, Vercel, Tailwind docs).
Encourages consistent design across Lingo.dev docs and CLI outputs.
🧪 Example Behavior
When user clicks the copy icon:
The text changes to “Copied!” with a short animation.
After ~1.5 seconds, it reverts to the original “Copy” state.
Hey, I would like to work on this issue. Can you please assign this issue to me?
Hey @2022koshlesh this is really good catch.
@davidturnbull can you chime in here please as you handle the website?
Hi sir/mam,
Thank you for reviewing my issue and appreciating the finding. I’d love to contribute by working on resolving this issue (#1447) if possible. This would be my first contribution to the project, and it would mean a lot to get an opportunity to help improve lingo.dev http://lingo.dev.
Please let me know if I can start working on the fix.
Thank you, @.****