Component
Copyable text
Plain inline text that copies itself on click or tap, raising a toast to confirm, with a small hint shown beside or beneath it, lighter-weight than the full copy field.
The primitive
REF-88213Tap to copy
copyable text.tsx
<NativeCopyableText text="REF-88213" label="Reference">
REF-88213
</NativeCopyableText>Example
A reference number sits inline among a receipt's other detail rows, copyable without needing its own dedicated control.
ReferenceREF-88213Tap to copy
copyable-text-example.tsx
<span>Reference</span>
<NativeCopyableText text={reference} label="Reference">{reference}</NativeCopyableText>Capabilities
| Prop | Type | Description |
|---|---|---|
| textrequired | string | — |
| labelrequired | string | — |
| hint | string | — |
| copiedMessage | string | — |
| showIcon | boolean | — |
| hintPlacement | "inline" | "bottom" | — |
| children | React.ReactNode | — |