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

    620
  • Theme Switcher

    Theme Switcher

    247
  • Hero Golden Spiral

    Hero Golden Spiral

    101
  • Mobius Loop Icon

    Mobius Loop Icon

    73
  • Wheel Picker

    Wheel Picker

    71
  • Testimonial 2

    Testimonial 2

    33
  • Glow Card Grid

    Glow Card Grid

    29
  • Spinning Circular Text

    Spinning Circular Text

    23

More in Buttons

View all
  • Texture Button

    Texture Button

    97
  • Button

    Button

    5
  • Button Group

    Button Group

  • Eclipse Button

    Eclipse Button

    39
  • Button

    Button

    4
  • HeroUI Button Group

    HeroUI Button Group

  • App Store Button

    App Store Button

    458
  • Base Button

    Base Button

    4

Explore more

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