Back to all examples

Copy to clipboard

ReactAngularWeb Components
.token-block {
  background-color: var(--goa-color-interactive-default);
  height: 22px;
  width: 24px;
  border-radius: var(--goa-border-radius-s);
}
const [isCopied, setIsCopied] = useState(false);

  function copyCode() {
    const codeToCopy = "$goa-color-interactive-default";
    navigator.clipboard.writeText(codeToCopy).then(() => {
      setIsCopied(true);
      setTimeout(() => setIsCopied(false), 1000);
    });
  }
<GoabBlock alignment="center">
        <div className="token-block" />
        <span>$goa-color-interactive-default</span>
        <GoabTooltip content={isCopied ? "Copied" : "Copy?"} position="top">
          <GoabIconButton icon="copy" onClick={copyCode} mt="2xs" />
        </GoabTooltip>
      </GoabBlock>

Allow users to quickly copy text or data to their clipboard with a single click.

When to use

Use this pattern when:

  • Users need to copy values like tokens, codes, or IDs
  • Quick access to copy functionality improves workflow
  • The copied value is clearly visible alongside the copy action
  • Users benefit from instant feedback when copying

Considerations

  • Show visual feedback (“Copied”) when the copy action succeeds
  • Use a tooltip to indicate the copy action before and after clicking
  • Position the copy button near the content being copied
  • Reset the “Copied” state after a short delay