CopyButton

Copy text to clipboard with feedback.

actionclipboardutility

Import

import { CopyButton } from "@/components/ui";

Basic Usage

CopyButton Preview

Code

tsx

<CopyButton text="Text to copy" />

Variants

Icon-only or with label

1<div className="flex items-center gap-4">
2  <CopyButton text="Text to copy" variant="icon" />
3  <CopyButton text="Text to copy" variant="button" />
4</div>

With Callback

Handle copy event

1<CopyButton
2  text="API_KEY_12345"
3  onCopy={(text) => toast.success("API key copied!")}
4/>

Ready to use this component?

Configure your app with the features you need and download production-ready code.

Start Configuring