npm install @modern-core/ui

Copy Button Component

An animated button component that allows users to copy text to their clipboard with visual feedback.

  • Provides instant feedback with state change animation
  • Integrates with the clipboard API
  • Built with Framer Motion for smooth transitions
  • Accessible with proper ARIA attributes

Installation

The CopyButton component is part of our UI library. You can import it directly from the components directory.

Usage

Here is how to use the copy button in your project.

React TSX
1import { CopyButton } from "@/components/modern-ui/copy-button"

React TSX
1<CopyButton value="Text to be copied" />

Examples

Basic Copy Button

In a Code Block

npm install @modern-core/ui

Custom Styled Copy Button

API Reference

CopyButton Component Props

PropTypeDefaultDescription
valuestring-The text to be copied to clipboard when the button is clicked
classNamestring-Additional CSS classes to apply to the button

Behavior

The CopyButton component provides the following behavior:

  1. When clicked, it copies the provided value to the user's clipboard
  2. Displays a check mark for 2 seconds to indicate successful copying
  3. Reverts back to the copy icon after the feedback period
  4. Uses smooth animations for state transitions

Dependencies

The component uses:

  • Framer Motion for animations
  • Lucide React for icons (Copy and Check)