CopyableText

A value with a copy button that confirms it copied.

<CopyableText value="camille@example.com" />
<CopyableText value={project.id} label="019f7557" />

label shows a short form while copying the whole value — the usual case for an id you want visible but not in full.

API

PropTypeDefault
valuestringrequiredThe text written to the clipboard.
copiedLabelstring"Copied"
copyLabelstring"Copy"
labelstringvalueWhat's rendered, when it differs from the copied value (e.g. a short id).
mutedbooleanfalseRender the label in muted secondary text.

Plus every <button> prop. Source: copyable-text/components/copyable-text.tsx.