CopyButton

CopyButton copies a given string to the system clipboard using the Clipboard API. After a successful copy it switches to a check icon for 2 seconds, then reverts to the copy icon. An optional text label can be shown alongside the icon. Use it next to code snippets, API keys, referral links, or any value the user needs to copy.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | textToCopy | string | Yes | — | The string that will be written to the clipboard. | | label | string | No | — | Optional text label rendered next to the icon. | | className | string | No | — | CSS class name applied to the button element. |

Usage

Basic (icon only)

import { CopyButton } from '@/components/buttons/CopyButton';

export default function Example() {
  return (
    <CopyButton textToCopy="https://snapping.dev/referral/abc123" />
  );
}

With a label

import { CopyButton } from '@/components/buttons/CopyButton';

export default function Example() {
  return (
    <CopyButton
      textToCopy="sk-live-xxxxxxxxxxxx"
      label="Copy API key"
      className="my-copy-btn"
    />
  );
}

Next to a code block

import { CopyButton } from '@/components/buttons/CopyButton';

const snippet = `npm install snapping-sdk`;

export default function CodeBlock() {
  return (
    <div style={{ position: 'relative', background: '#f4f4f4', padding: 16 }}>
      <pre>{snippet}</pre>
      <div style={{ position: 'absolute', top: 8, right: 8 }}>
        <CopyButton textToCopy={snippet} />
      </div>
    </div>
  );
}