Data Display
CopyField
A read-only value in a mono block with a copy button at its end edge. The button flips to a check and Copied for two seconds, and a polite live region says so. When the browser refuses the clipboard, the value is selected instead, so a long-press or Ctrl+C still works.
3f2a9c1e-7b4d-4e21-9a0f-5c6d8e2b1a47Import
import { CopyField } from "@mikenotthepope/substrateui"Labels
The button's text is copy until a copy lands, then copied, which is also what the live region announces. Its accessible name stays put, so a focused button is not announced twice. Below the sm breakpoint the text is hidden and only the icon shows. Override one instance with the labels prop, or every instance through LabelsProvider's copyField key.
| Prop | Type | Default | Description |
|---|---|---|---|
copy | string | "Copy" | The button's text, and its name when no label is given. |
copied | string | "Copied" | The button's text after a copy, and the announcement. The button's name does not change. |
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | The text shown and copied. |
label | string | — | Accessible name of the copy button, naming what it copies. Falls back to labels.copy. The visible text stays labels.copy, so start label with it: a name holding the visible words is what lets a voice user say "click Copy" (WCAG 2.5.3). |
labels | { copy?: string; copied?: string } | — | Translatable strings for the button and the announcement. Resolves through the LabelsProvider (copyField) before falling back to English defaults. |
className | string | — | Additional CSS classes applied to the bordered wrapper. |