CopyButton

Overview

The CopyButton component provides a simple way to copy text to the clipboard with visual feedback. It's designed to extend the base Button component with built-in copy functionality, proper accessibility support, and analytics tracking capabilities.

Usage

import { CopyButton } from "@unkey/ui";
 
export default function MyComponent() {
  return (
    <div>
      <CopyButton value="Text to copy" />
      <CopyButton 
        value="API Key" 
        variant="ghost" 
        src="api-key-display" 
      />
    </div>
  );
}

Examples

Basic Usage

Different usage patterns and variants of the CopyButton component.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<div className="flex flex-col gap-6">
  <div className="flex flex-row justify-center gap-8">
    <div className="flex gap-2 items-center">
      <span>Basic usage:</span>
      <CopyButton value="Hello World!" />
    </div>
    <div className="flex gap-2 border px-2 py-1 rounded-md w-fit items-center">
      <span className="font-mono text-sm">{apiKey}</span>
      <CopyButton variant="ghost" value={apiKey} src="api-key-display" />
    </div>
  </div>

  <div className="flex flex-col gap-4">
    <div className="flex gap-2 items-center">
      <span>Different variants:</span>
      <CopyButton value="Outline variant (default)" variant="outline" />
      <CopyButton value="Ghost variant" variant="ghost" />
      <CopyButton value="Primary variant" variant="primary" />
    </div>

    <div className="flex gap-2 items-center">
      <span>With custom styling:</span>
      <CopyButton
        value="Custom styled button"
        className="bg-blue-100 hover:bg-blue-200 border-blue-300"
      />
    </div>
  </div>
</div>

Features

• Visual Feedback: Icon changes from TaskUnchecked to TaskChecked on copy
• Accessibility: Full screen-reader support with ARIA labels
• Auto Reset: Automatically resets after 2 seconds
• Button Integration: Extends ButtonProps for full customization
• Analytics Support: Optional src prop for tracking
• Event Prevention: Prevents event propagation to parent elements
• TypeScript Support: Full TypeScript support with proper typing
• Toast Message Support: Optional toastMessage prop (default is "Copied to clipboard")

Props

Variants

The component accepts all standard Button props.

Structure

The CopyButton component is a specialized button that:

1. Renders as Button: Uses the base Button component for styling and behavior
2. Copy Functionality: Handles clipboard operations with visual feedback
3. State Management: Manages copy state and auto-reset functionality
4. Analytics Integration: Optionally tracks copy events

Styling

The component includes default styling:

• Fixed dimensions: w-6 h-6 (24x24px)
• Focus states: focus:ring-0 focus:border-grayA-6
• Icons: Full-size icons with w-full h-full
• Default variant: outline for subtle appearance
• Customizable through className prop

Custom Styling

You can customize the appearance using the className prop:

<CopyButton
  value="Custom styled button"
  className="bg-blue-100 hover:bg-blue-200 border-blue-300"
/>

Accessibility

The component includes comprehensive accessibility features:

• ARIA Label: aria-label="Copy to clipboard" for screen readers
• Screen Reader Text: Hidden "Copy" text for additional context
• Title Attribute: title="Copy to clipboard" for tooltip on hover
• Focus Management: Proper focus states with focus:ring-0 focus:border-grayA-6
• Keyboard Support: Full keyboard navigation support inherited from Button component