Clipboard text

Ported

Text in a read-only field with a copy button. After a copy, the icon turns into a check and screen readers hear "Copied".

Kumo source

run_7f3a91c2

import { ClipboardText } from "@etched/monet/clipboard-text";

export function Preview() {
  return <ClipboardText text="run_7f3a91c2" />;
}

Installation

import { ClipboardText } from "@etched/monet/clipboard-text";

Examples

Run ID

run_7f3a91c2

import { ClipboardText } from "@etched/monet/clipboard-text";

export function RunId() {
  return <ClipboardText text="run_7f3a91c2" />;
}

Copy other text

textToCopy is copied in place of the text shown, for example the full token behind a masked one.

et_live_••••••••a91f

import { ClipboardText } from "@etched/monet/clipboard-text";

export function CopyOtherText() {
  return <ClipboardText text="et_live_••••••••a91f" textToCopy="et_live_5c27e0d4b8a91f" />;
}

Long text

The field is as wide as its text, up to the width of its box. Past that, the text is cut with an ellipsis, and hovering it shows the full text; the copy is always the full text.

gs://etched-tracer/runs/2026-10-16/lot-2291-a/chip-14/thermal.parquet

import { ClipboardText } from "@etched/monet/clipboard-text";

export function LongText() {
  return (
    <div className="grid">
      <ClipboardText text="gs://etched-tracer/runs/2026-10-16/lot-2291-a/chip-14/thermal.parquet" />
    </div>
  );
}

Sizes

LOT-2291-A

import { ClipboardText } from "@etched/monet/clipboard-text";

export function Sizes() {
  return (
    <div className="row">
      <ClipboardText size="sm" text="LOT-2291-A" />
      <ClipboardText text="LOT-2291-A" />
    </div>
  );
}

Accessibility

When the clipboard fails, focus goes to the text and selects it; Ctrl+C (⌘C on a Mac) copies it.
The copy button is named by copyLabel ("Copy to clipboard") and described by the text shown.
A polite live region says "Copied" for about 1.5 s after a copy, or "Press ⌘C to copy" (or Ctrl+C) when the clipboard fails.
Screen readers read the full text, also when it is cut with an ellipsis. The tooltip with the full text shows on hover only.
With several on one view, give each a copyLabel that says what it copies, such as "Copy run ID".

API reference

Prop	Type	Default	Description
onCopy	() => void	–	Called after each copy.
copyLabel	string	"Copy to clipboard"	Names the copy button.
copiedLabel	string	"Copied"	What screen readers hear after a copy.
copyKeysLabel	(keys: string) => string	"Press ⌘C to copy"	Shown when the clipboard fails, with this device's copy keys ("⌘C" or "Ctrl+C").
text *	string	–	The text shown, and copied unless `textToCopy` is set.
textToCopy	string	–	Copied in place of `text`, for example the full token behind a masked one.
size	"sm" \| "base"	"base"	28 or 36 px high, as Input.