mirror of
https://github.com/payloadcms/payload.git
synced 2026-09-14 20:07:19 +08:00
Sean Zubrickas
4884195d71
Adds the first release of @payloadcms/ui component documentation, focused on common, visually useful components and working Payload v3 examples. - Adds component guides, usage guidance, props, and accessibility notes. - Adds an overview and curated component inventory under Features → UI Components. *_v4 as a fast follow once this gets approved_
32 lines
1.2 KiB
Plaintext
32 lines
1.2 KiB
Plaintext
---
|
|
title: CopyToClipboard
|
|
label: CopyToClipboard
|
|
order: 80
|
|
desc: Copy a string to the clipboard with Payload's CopyToClipboard component.
|
|
keywords: ui, component, clipboard, copy, tooltip
|
|
---
|
|
|
|
The `CopyToClipboard` component renders a compact copy control with tooltip feedback. Use it beside values such as IDs, URLs, and API keys.
|
|
|
|
## Import
|
|
|
|
```tsx
|
|
import { CopyToClipboard } from '@payloadcms/ui'
|
|
```
|
|
|
|
## Basic usage
|
|
|
|
<ComponentPreview component="CopyToClipboard" example="basic" />
|
|
|
|
The control is not rendered when `value` is empty. Provide surrounding text so users understand what will be copied.
|
|
|
|
## 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` | `string` | — | Value written to the clipboard. |
|
|
| `defaultMessage` | `string` | Localized copy label | Tooltip shown before the value is copied. |
|
|
| `successMessage` | `string` | Localized copied label | Tooltip shown after a successful copy. |
|