# CopyToClipboard

Source: https://payloadcms.com/docs/beta/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

Inside a Payload Admin Panel Custom Component:

```tsx
import { CopyToClipboard } from '@payloadcms/ui'
```

You can also import the component directly:

```tsx
import { CopyToClipboard } from '@payloadcms/ui/elements/CopyToClipboard'
```

## Basic usage

**Implementation**

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

**Styling**

Override CopyToClipboard tokens on the control to customize its icon, interaction states, focus color, and radius.

```css
@layer payload {
  .copy-to-clipboard {
    --color-icon: #4938cc;
    --color-bg-secondary: #f4f1ff;
    --color-bg-secondary-pressed: #d9d0ff;
    --color-border-selected: #6d5dfc;
    --button-radius: 0.375rem;
  }
}
```

- `--color-icon`: Copy icon color.
- `--color-bg-secondary`: Control background on hover.
- `--color-bg-secondary-pressed`: Control background while pressed.
- `--color-border-selected`: Keyboard focus outline color.
- `--button-radius`: Control corner radius.

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