Chánh Đại

Copy Button

Buttons 6

About

A button that copies text to the clipboard on click, with an animated icon swap plus haptic and audio feedback confirming success or failure.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Copy Button to your project and fits it to your theme.

Code

How Copy Button is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { CopyButton } from "@/components/ui/copy-button";

export default function CopyButtonDemo() {
  return (
    <div className="flex items-center justify-center">
      <CopyButton text="Some text to copy" />
    </div>
  );
}

Dependencies

More by Chánh Đại

View all
  • Apple Hello Effect

    Apple Hello Effect

    624
  • Theme Switcher

    Theme Switcher

    253
  • Hero Golden Spiral

    Hero Golden Spiral

    101
  • Mobius Loop Icon

    Mobius Loop Icon

    74
  • Wheel Picker

    Wheel Picker

    71
  • Testimonial 2

    Testimonial 2

    34
  • Glow Card Grid

    Glow Card Grid

    30
  • Spinning Circular Text

    Spinning Circular Text

    23

More in Buttons

View all
  • Texture Button

    Texture Button

    98
  • Button

    Button

    1
  • Button

    Button

    68
  • Button

    Button

    65
  • Eclipse Button

    Eclipse Button

    3
  • Button Group

    Button Group

    14
  • Base Button

    Base Button

    4
  • App Store Button

    App Store Button

    459

Explore more

Part of Chánh Đại — browse the full library on 21st.dev.