Skip to content
Data Display

CopyChip

A value and a copy icon in one outlined inline chip, for a value set inside a sentence. The whole chip is the button. Its icon flips to a check for two seconds after a copy, and Copied is announced. When the browser refuses the clipboard, the value is selected instead, so a long-press or Ctrl+C still works.

Sourcesrc/components/ui/copy-chip.tsx

Import

import { CopyChip } from "@mikenotthepope/substrateui"

Inside a label

The chip's name is its value, and copyis only its description, so the label it sits in still reads as the sentence: the field above is named “Type staging-admin@admin.staging.example.comto confirm”. The announcement goes through the shared live region, outside every label, for the same reason. A press on the chip copies; it does not move focus to the field. The label has to point at its field with htmlFor, as FieldLabel does: a label wrapped around the field instead labels the first control inside it, which is the chip.

Wrapping

The value never breaks mid-word. breakAfter names the one place it may, and the chip grows a line there when the sentence runs out of room. Without it, the value stays on one line.

Labels

copy is the chip's description and copied the announcement after a copy. Override one instance with the labels prop, or every instance through LabelsProvider's copyChip key.

PropTypeDefaultDescription
copystring"Copy"The chip's accessible description.
copiedstring"Copied"What is announced after a copy.

API Reference

PropTypeDefaultDescription
valuestring—The text shown and copied. It is also the chip's accessible name.
breakAfterstring—Where the value may wrap: after each occurrence of this string, and nowhere else. "@" lets an address break after its @. Unset, the value never wraps.
labels{ copy?: string; copied?: string }—Translatable strings for the description and the announcement. Resolves through the LabelsProvider (copyChip) before falling back to English defaults.
classNamestring—Additional CSS classes applied to the chip.