Copy Button

Copies a value and proves it: the copy icon gives way to a check that draws itself in the accent, and a soft light passes once over the value.

Download

import { useEffect, useLayoutEffect, useRef, useState } from 'react';
import { onReducedMotionChange, prefersReducedMotion } from '../shared/spring';
import { resolveAccent, type Accent } from '../shared/accent';
import '../shared/ember.css';
import './copy-button.css';

export interface CopyButtonProps {
  value?: string;
  label?: string;
  copiedLabel?: string;
  /** Show the value in a mono field with the button docked at its right end. */
  showValue?: boolean;
  /** Show the text label beside the icon. Off by default: the label becomes the accessible name. */
  showLabel?: boolean;
  /** How long the copied state stays, in ms. */
  resetMs?: number;
  onCopy?: (ok: boolean) => void;
  accent?: Accent;
  className?: string;
}

type Phase = 'idle' | 'copied' | 'failed';

const FAILED = 'Failed';

/** The old way, for when the async clipboard is missing or refuses (insecure origins, old WebViews). */
function legacyCopy(text: string): boolean {
  const active = document.activeElement as HTMLElement | null;
  const ta = document.createElement('textarea');
  ta.value = text;
  ta.setAttribute('readonly', '');
  ta.style.position = 'fixed';
  ta.style.top = '0';
  ta.style.left = '-9999px';
  ta.style.opacity = '0';
  document.body.appendChild(ta);
  ta.select();
  let ok = false;
  try {
    ok = document.execCommand('copy');
  } catch {
    ok = false;
  }
  ta.remove();
  active?.focus({ preventScroll: true });
  return ok;
}

async function writeClipboard(text: string): Promise<boolean> {
  try {
    if (navigator.clipboard?.writeText) {
      await navigator.clipboard.writeText(text);
      return true;
    }
  } catch {
    // fall through to the legacy path
  }
  return legacyCopy(text);
}

function CopyGlyph() {
  return (
    <svg className="em-icon em-copy__glyph em-copy__glyph--copy" viewBox="0 0 16 16" aria-hidden="true">
      <rect x="2.5" y="5.5" width="8" height="8" rx="1.75" />
      <path d="M5.5 3.25c.1-.45.5-.75.95-.75h5.8c.55 0 1 .45 1 1v5.8c0 .45-.3.85-.75.95" />
    </svg>
  );
}

function CheckGlyph() {
  return (
    <svg className="em-icon em-copy__glyph em-copy__glyph--check" viewBox="0 0 16 16" aria-hidden="true">
      <path d="M3.25 8.5 6.5 11.5 12.75 4.75" pathLength={1} />
    </svg>
  );
}

export function CopyButton({
  value = 'npm install ember',
  label = 'Copy',
  copiedLabel = 'Copied',
  showValue = true,
  showLabel = false,
  resetMs = 1600,
  onCopy,
  accent: accentProp,
  className,
}: CopyButtonProps) {
  const accent = resolveAccent(accentProp);
  const [phase, setPhase] = useState<Phase>('idle');
  const [announce, setAnnounce] = useState('');
  const [overflow, setOverflow] = useState(false);

  const valueRef = useRef<HTMLDivElement>(null);
  const textRef = useRef<HTMLSpanElement>(null);
  const sweepRef = useRef<HTMLSpanElement>(null);
  const timer = useRef(0);
  const announceRaf = useRef(0);
  const reduced = useRef(false);
  const busy = useRef(false);

  useEffect(() => {
    reduced.current = prefersReducedMotion();
    const unsub = onReducedMotionChange((r) => (reduced.current = r));
    return () => {
      unsub();
      clearTimeout(timer.current);
      cancelAnimationFrame(announceRaf.current);
    };
  }, []);

  // The fade mask only appears when the value is actually cut off.
  useLayoutEffect(() => {
    const box = valueRef.current;
    const text = textRef.current;
    if (!box || !text) return;
    const check = () => setOverflow(text.scrollWidth > box.clientWidth - 12 + 0.5);
    check();
    const ro = new ResizeObserver(check);
    ro.observe(box);
    return () => ro.disconnect();
  }, [value, showValue]);

  const say = (text: string) => {
    // Clear first so a second copy is announced again.
    setAnnounce('');
    cancelAnimationFrame(announceRaf.current);
    announceRaf.current = requestAnimationFrame(() => setAnnounce(text));
  };

  const sweep = () => {
    const el = sweepRef.current;
    const box = valueRef.current;
    if (!el || !box || reduced.current || typeof el.animate !== 'function') return;
    for (const a of el.getAnimations()) a.cancel();
    // Sweep only across what is visible of the value.
    const visible = Math.min(el.offsetWidth, box.clientWidth - 12);
    const hide = Math.max(0, el.offsetWidth - visible);
    el.animate(
      [
        { clipPath: `inset(0 ${el.offsetWidth}px 0 0)`, opacity: 1 },
        { clipPath: `inset(0 ${hide}px 0 0)`, opacity: 1, offset: 0.55 },
        { clipPath: `inset(0 ${hide}px 0 ${visible}px)`, opacity: 1 },
      ],
      { duration: 640, easing: 'cubic-bezier(0.45, 0, 0.25, 1)' },
    );
  };

  const copy = async () => {
    if (busy.current) return;
    busy.current = true;
    const ok = await writeClipboard(value);
    busy.current = false;
    clearTimeout(timer.current);
    setPhase(ok ? 'copied' : 'failed');
    say(ok ? copiedLabel : `${FAILED} to copy`);
    if (ok && showValue) sweep();
    onCopy?.(ok);
    timer.current = window.setTimeout(() => setPhase('idle'), Math.max(200, resetMs));
  };

  const inner = (
    <>
      <span className="em-copy__icon">
        <CopyGlyph />
        <CheckGlyph />
      </span>
      {showLabel ? (
        <span className="em-copy__labels" aria-hidden="true">
          <span className="em-copy__label em-copy__label--idle">{label}</span>
          <span className="em-copy__label em-copy__label--copied">{copiedLabel}</span>
          <span className="em-copy__label em-copy__label--failed">{FAILED}</span>
        </span>
      ) : null}
      <span className="em-sr">{label}</span>
    </>
  );

  return (
    <div
      className={`ember em-copy${showValue ? ' em-copy--field' : ''}${className ? ` ${className}` : ''}`}
      data-accent={accent}
      data-phase={phase}
    >
      {showValue ? (
        <div ref={valueRef} className="em-copy__value" data-overflow={overflow || undefined}>
          <span ref={textRef} className="em-copy__text em-mono">
            {value}
            <span ref={sweepRef} className="em-copy__sweep" aria-hidden="true" />
          </span>
        </div>
      ) : null}
      <button
        type="button"
        className={`${showValue ? 'em-copy__btn' : 'em-btn em-copy__btn em-copy__btn--solo'}${showLabel ? '' : ' em-copy__btn--icon'}`}
        title={showLabel ? undefined : phase === 'copied' ? copiedLabel : label}
        onClick={copy}
      >
        {inner}
      </button>
      <span className="em-sr" aria-live="polite" aria-atomic="true">
        {announce}
      </span>
    </div>
  );
}

export default CopyButton;

Customize

Value

Label

Copied label

Show value

Show label

Reset after (ms)

Icon only by default, with the label as its accessible name and tooltip; turn the label on and it rolls to Copied without the button changing width. The result is announced politely.

Install

npx shadcn@latest add https://obsydeui.com/r/copy-button.json

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { CopyButton } from '@/components/obsyde/ember/copy-button/CopyButton';

export function Example() {
  return (
    <CopyButton value="npm install ember" label="Copy" />
  );
}

Files

Plain React, TypeScript and CSS. No dependencies. The download keeps these paths.

ember/copy-button/CopyButton.tsxcomponent
ember/copy-button/copy-button.cssstyles
ember/copy-button/CopyButtonDemo.tsxdemo
ember/shared/accent.tsshared
ember/shared/spring.tsshared
ember/shared/ember.cssshared

API

Prop	Type	Default
`accent`Accent	`'ember' \| 'volt' \| 'arc'`	`'ember'`
`value`Value	`string`	`'npm install ember'`
`label`Label	`string`	`'Copy'`
`copiedLabel`Copied label	`string`	`'Copied'`
`showValue`Show value	`boolean`	`true`
`showLabel`Show label	`boolean`	`false`
`resetMs`Reset after (ms)	`number`	`1600`