Clipboard text

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/reticle/clipboard-text";

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

Installation

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

Examples

Run ID

run_7f3a91c2

import { ClipboardText } from "@etched/reticle/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/reticle/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; 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/reticle/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/reticle/clipboard-text";

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

API reference

Prop	Type	Default	Description
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.
onCopy	() => void	–	Called after each copy.
copyLabel	string	"Copy to clipboard"	Names the copy button.