CopyButton

The CopyButton component provides a simple way to copy text to the clipboard with visual feedback. It extends the base Button component and includes built-in copy functionality with proper accessibility support.

Features

• Visual feedback with icon change on copy (TaskUnchecked → TaskChecked)
• Accessible with screen reader support and ARIA labels
• Automatic reset after 2 seconds
• Extends ButtonProps for full button customization
• Analytics support with optional src prop
• Prevents event propagation to parent elements
• TypeScript support with proper typing

Props

The component also accepts all standard Button props.

Usage

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

<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>
      <Unknown 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">
        uk_1234567890abcdef
      </span>
      <Unknown
        src="api-key-display"
        value="uk_1234567890abcdef"
        variant="ghost"
      />
    </div>
  </div>
  <div className="flex flex-col gap-4">
    <div className="flex gap-2 items-center">
      <span>
        Different variants:
      </span>
      <Unknown
        value="Outline variant (default)"
        variant="outline"
      />
      <Unknown
        value="Ghost variant"
        variant="ghost"
      />
      <Unknown
        value="Primary variant"
        variant="primary"
      />
    </div>
    <div className="flex gap-2 items-center">
      <span>
        With custom styling:
      </span>
      <Unknown
        className="bg-blue-100 hover:bg-blue-200 border-blue-300"
        value="Custom styled button"
      />
    </div>
  </div>
</div>

Behavior

1. Click Handling: On click, the button copies the provided text to the clipboard
2. Visual Feedback: The icon changes from TaskUnchecked to TaskChecked state
3. Auto Reset: After 2 seconds, the icon reverts to its original state
4. Event Prevention: Parent click events are prevented from triggering (e.stopPropagation)
5. Analytics: If provided, the src prop is passed to analytics for tracking

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

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

Best Practices

• Use the src prop for analytics tracking when copying sensitive data
• Provide meaningful value content for better user experience
• Consider the button's context when choosing variants
• Ensure sufficient contrast for the button in your design
• Test with screen readers to verify accessibility