CopyButton
Client-side component for copying text to the clipboard with visual feedback.
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
code | string | Yes | - | The text content to copy |
className | string | No | - | Additional CSS classes |
Usage
import { CopyButton } from '@/components/atoms/CopyButton';
<CopyButton code={codeToCopy} />Features
- Clipboard API: Uses modern
navigator.clipboardAPI - Fallback support: Falls back to
document.execCommandfor older browsers - Visual feedback: Shows "Copied!" message for 2 seconds
- Accessible: Includes proper ARIA labels
- Design system: Uses shared
Buttoncomponent with consistent styling
Styling
The button uses:
variant="ghost"with custom dark overlay backgroundsize="sm"for compact size- Positioned absolutely in top-right corner
- Subtle hover effects
Notes
- This is a client component (
"use client") due to clipboard API usage - The button is typically positioned absolutely within a relative container
- Copy feedback timeout is 2000ms (2 seconds)
- Uses the shared
Buttoncomponent for consistency