CopyButton

CopyButton copia una cadena dada al portapapeles del sistema usando la Clipboard API. Tras una copia exitosa, cambia al ícono de verificación durante 2 segundos y luego vuelve al ícono de copiar. Se puede mostrar una etiqueta de texto opcional junto al ícono. Úsalo junto a snippets de código, claves de API, enlaces de referido o cualquier valor que el usuario necesite copiar.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | textToCopy | string | Sí | — | La cadena que se escribirá en el portapapeles. | | label | string | No | — | Etiqueta de texto opcional renderizada junto al ícono. | | className | string | No | — | Nombre de clase CSS aplicado al elemento botón. |

Uso

Básico (solo ícono)

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

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

Con etiqueta

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

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

Junto a un bloque de código

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>
  );
}