CopyButton

The CopyButton component provides a simple way to copy text to the clipboard with visual feedback. When clicked, it copies the provided text and shows a checkmark icon to indicate success.

Features

• Visual feedback with icon change on copy
• Accessible with screen reader support
• Automatic reset after 2 seconds
• Customizable through className prop
• TypeScript support

Props

Usage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<div className="flex flex-row justify-center gap-8">
  <div className="flex gap-2">
    <span>
      Basic usage:
    </span>
    <Unknown value="Hello World!" />
  </div>
  <div className="flex gap-2 border px-2 py-1 rounded-md w-fit">
    <span className="font-mono text-sm">
      uk_1234567890abcdef
    </span>
    <Unknown
      className="hover:bg-gray-100 rounded"
      src="api-key-display"
      value="uk_1234567890abcdef"
    />
  </div>
</div>

Accessibility

The component includes screen reader support with an appropriate "Copy" label. The visual state change (unchecked to checked icon) provides clear feedback for all users.

Behavior

1. On click, the button copies the provided text to the clipboard
2. The icon changes from an unchecked to checked state
3. After 2 seconds, the icon reverts to its original state
4. Parent click events are prevented from triggering (e.stopPropagation)