Brickslab.

@brickslab/ui-web

Bouton de copie dans le presse-papier avec retour visuel de confirmation. Le composant est contrôlé : l'état copied et le callback onCopy sont gérés par le parent.

Aperçu

état par défaut vs état copié

copied=false (défaut)
copied=true

démo interactive — cliquer pour basculer l'état

labels par défaut
labels personnalisés

Props

PropTypeDéfautRequisDescription
onCopy() => void—✓Callback déclenché lorsque l'utilisateur clique sur le bouton. Responsable de la logique de copie dans le presse-papier.
copiedbooleanfalse—État de confirmation de la copie. Quand true, le bouton affiche le label de confirmation.
labelstring"Copier"—Libellé affiché dans l'état par défaut (avant la copie).
copiedLabelstring"Copié !"—Libellé affiché dans l'état de confirmation (après la copie).

Utilisation

tsx
import { CopyButton } from "@brickslab/ui-web";
import { useState } from "react";

function Demo() {
  const [copied, setCopied] = useState(false);

  const handleCopy = () => {
    navigator.clipboard.writeText("Texte copié !");
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  return (
    <CopyButton
      onCopy={handleCopy}
      copied={copied}
    />
  );
}

// Labels personnalisés
<CopyButton
  onCopy={handleCopy}
  copied={copied}
  label="Copier le code"
  copiedLabel="Code copié !"
/>