Copy to clipboard
.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