Code Snippet

1import { CodeSnippet, CopyButton } from '@/ui/Code'23<CodeSnippet lang="bash" prompt="
quot;>4  npx @acme/cli deploy --project api-gateway5</CodeSnippet>67// The copy affordance is the component. It works anywhere a value has to8// be transcribed — this is why there is no separate "Copy to Clipboard".9<CopyButton value={deployment.id} label="Copy deployment ID" />1011// Copy from the source string. Never from the DOM: innerText drags in line12// numbers, the prompt, and the highlighter's markup.13function useCopy(timeout = 1600) {14  const [copied, setCopied] = React.useState(false)15  const copy = async (text: string) => {16    try {17      await navigator.clipboard.writeText(text)18    } catch {19      legacyCopy(text)          // http:// and older Safari have no clipboard API20    }21    setCopied(true)22    setTimeout(() => setCopied(false), timeout)23  }24  return { copied, copy }25}

<!-- Multi-line. The block is focusable because it scrolls. -->
<figure class="ds-code">
  <figcaption class="sr-only">Deployment example, TypeScript, 9 lines</figcaption>

  <pre tabindex="0" aria-label="Deployment example"><code class="language-ts"
    ><span class="ds-code__gutter" aria-hidden="true">1</span>const client = createClient({}</code></pre>

  <button type="button" class="ds-code__copy" aria-label="Copy code">
    <svg aria-hidden="true">…</svg>
  </button>
</figure>

<!-- The confirmation everyone forgets -->
<p class="sr-only" role="status" aria-live="polite">Copied</p>

<!-- Single line with a shell prompt. The $ is decoration. -->
<div class="ds-code ds-code--inline-block">
  <span class="ds-code__prompt" aria-hidden="true">$</span>
  <code>npm install @acme/sdk</code>
  <button type="button" aria-label="Copy command">…</button>
</div>

.ds-code {
  position: relative;
  border: 1px solid var(--ds-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--ds-surface-inset);   /* a well, not a raised card */
}

.ds-code pre {
  margin: 0;
  padding: 14px;
  max-block-size: 24rem;                 /* ~24 lines, then scroll */
  overflow: auto;
  font-family: var(--font-mono);
  font-size: 13px;                       /* mono runs optically large */
  line-height: 1.55;                     /* looser than prose: scanned as columns */
  tab-size: 2;
}

/* Never selectable, never copied. This is the bug that ships most often. */
.ds-code__gutter,
.ds-code__prompt {
  user-select: none;
  -webkit-user-select: none;
  color: var(--ds-fg-disabled);          /* allowed: not content */
}

.ds-code__copy {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 8px;
  inline-size: 28px;
  block-size: 28px;
}

/* Hover-reveal is fine on a mouse and catastrophic on touch. */
@media (hover: hover) and (pointer: fine) {
  .ds-code__copy { opacity: 0; transition: opacity 120ms; }
  .ds-code:hover .ds-code__copy,
  .ds-code__copy:focus-visible { opacity: 1; }
}
@media (pointer: coarse) {
  .ds-code__copy { inline-size: 44px; block-size: 44px; }
}

/* No wrapping. A copied fragment with an invented newline is a broken command. */
.ds-code--inline-block code { white-space: nowrap; overflow-x: auto; }