CopyToClipboard
The CopyToClipboard component renders a compact copy control with tooltip feedback. Use it beside values such as IDs, URLs, and API keys.
Import
Inside a Payload Admin Panel Custom Component:
You can also import the component directly:
Basic usage
The control is not rendered when value is empty. Provide surrounding text so users understand what will be copied.
Accessibility
- Place the control beside a visible representation of the value being copied.
- Use concise tooltip messages that identify the action and confirm success.
- Do not place sensitive values in the clipboard without an explicit user action.
Common props
These are the props most commonly used with this component. See its exported types in @payloadcms/ui for the complete list.
Prop | Type | Default | Description |
|---|---|---|---|
| | — | Value written to the clipboard. |
| | Localized copy label | Tooltip shown before the value is copied. |
| | Localized copied label | Tooltip shown after a successful copy. |
Was this page helpful?