# CopyToClipboard

Source: https://payloadcms.com/docs/ui-components/copy-to-clipboard

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

**Implementation**

```tsx
<span>post_123456789</span>
<CopyToClipboard defaultMessage="Copy ID" successMessage="ID copied" value="post_123456789" />
```

**Styling**

Style the copy control itself while leaving its tooltip and clipboard behavior unchanged.

```css
.copy-to-clipboard {
  background: #f3f1ff;
  color: #5947e5;
  border-radius: 6px;
  padding: 0.25rem;
}

.copy-to-clipboard:hover {
  background: #ded8ff;
}
```

- `background`: Copy control surface.
- `color`: Icon color inherited by the control.
- `padding`: Clickable area around the icon.

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.    |