Installation
npm install @kuzenbo/core
Usage
import { CopyButton } from "@kuzenbo/core";
function Example() {
return (
<CopyButton value="Text to copy" />
);
}
Props
The text to copy to clipboard.
Duration in milliseconds to show the “copied” state.
status
'idle' | 'copying' | 'copied' | 'failed'
Controlled status state.
defaultStatus
'idle' | 'copying' | 'copied' | 'failed'
default:"'idle'"
Default status (uncontrolled mode).
onStatusChange
(status: CopyButtonStatus) => void
Callback when status changes.
statusLabels
Partial<Record<CopyButtonStatus, string>>
Custom labels for each status.
liveRegionMessages
Partial<Record<CopyButtonStatus, string>>
Custom screen reader announcements for each status.
children
ReactNode | ((status: CopyButtonStatus) => ReactNode)
Custom content or function that receives current status.
Status States
The component cycles through these states:
- idle: Ready to copy
- copying: Copy operation in progress
- copied: Successfully copied
- failed: Copy operation failed
Examples
<CopyButton value="npm install @kuzenbo/core" />
Custom Labels
<CopyButton
value="Hello World"
statusLabels={{
idle: "Copy text",
copied: "Copied!",
failed: "Failed to copy"
}}
/>
With Custom Content
<CopyButton value="Secret API Key">
{(status) => (
<>
{status === "copied" ? "✓ Copied" : "Copy API Key"}
</>
)}
</CopyButton>
Custom Timeout
<CopyButton
value="Long message"
timeout={3000} // Show "copied" state for 3 seconds
/>
Controlled Status
const [status, setStatus] = useState<CopyButtonStatus>("idle");
<CopyButton
value="Controlled value"
status={status}
onStatusChange={setStatus}
/>
Code Block Copy
function CodeBlock({ code }: { code: string }) {
return (
<div className="relative">
<pre className="p-4 rounded-lg bg-muted">
<code>{code}</code>
</pre>
<div className="absolute top-2 right-2">
<CopyButton value={code} variant="ghost" size="sm">
Copy code
</CopyButton>
</div>
</div>
);
}
<div className="flex gap-2">
<CopyButton value="text" variant="default" />
<CopyButton value="text" variant="outline" />
<CopyButton value="text" variant="ghost" />
</div>
Accessible Custom Messages
<CopyButton
value="Important data"
liveRegionMessages={{
idle: "Press to copy data",
copying: "Copying data to clipboard",
copied: "Data successfully copied",
failed: "Failed to copy data. Please try again."
}}
/>