Copy button

An icon button that copies a value and confirms the copy in its tooltip.

SAC-4821-0097

"use client";

import { CopyButton } from "@smartacteam/ambient-web/copy-button";

const SERIAL_NUMBER = "SAC-4821-0097";

export function CopyButtonDemo() {
  return (
    <div className="flex items-center gap-1">
      <span className="font-mono text-sm">{SERIAL_NUMBER}</span>
      <CopyButton value={SERIAL_NUMBER} label="Copy serial number" />
    </div>
  );
}

Reach for CopyButton — the ready-made instance of this pattern. Compose it by hand, as shown below, when the button has to look different (a labeled button, a different icon) — the feedback rule stays the same.

When to use

Put a copy button next to a value people carry somewhere else: an ID, a serial number, an email address, a link, a code snippet. Copying is invisible — the clipboard gives no sign that anything happened — so every copy button confirms the copy in a tooltip.

Anatomy

Icon button — a ghost icon Button beside the value it copies.
Tooltip — a Tooltip on the button with two states. At rest it names the action (Copy). After a successful copy it switches to the confirmation (Copied!) for 2 seconds, then reverts.

Usage

import { CopyButton } from "@smartacteam/ambient-web/copy-button";

<CopyButton value={serialNumber} label="Copy serial number" />

Composing by hand

CopyTooltip is the tooltip half of the pattern and useCopyToClipboard the copied state; wrap any button in them.

import { Button } from "@smartacteam/ambient-web/button";
import { CopyTooltip } from "@smartacteam/ambient-web/copy-button";
import { useCopyToClipboard } from "@smartacteam/ambient-web/utils";

const { isCopied, copy } = useCopyToClipboard({ text: url });
 
<CopyTooltip copied={isCopied} label="Copy link">
  <Button onClick={copy}>Copy link</Button>
</CopyTooltip>;

Snippet.CopyButton and CodeBlock.CopyButton are composed this way.

Guidelines