Copy Button

A simple button that copies a text value to the clipboard and shows a success toast notification via sonner .

Import


import { CopyButton } from "@phpcreation/frontend-components-react-nextjs-bundle/components/CopyButton";

Props

Prop	Type	Required	Default	Description
`id`	`string`	✅	—	Unique identifier for the button element
`value`	`string`	✅	—	Text value to copy to clipboard

Usage


import { CopyButton } from "@phpcreation/frontend-components-react-nextjs-bundle/components/CopyButton";
 
// Copy an API key
<div className="flex items-center gap-2">
  <span className="font-mono text-sm">{apiKey}</span>
  <CopyButton id="api-key-copy" value={apiKey} />
</div>
 
// Copy a URL
<CopyButton id="share-url" value={window.location.href} />

Behavior

Uses the navigator.clipboard.writeText() API
Displays a success toast (via sonner) with a localized “Copied!” message
Icon: FaRegCopy from react-icons

Requires the Sonner <Toaster /> component to be mounted at the app root for toast notifications to appear.