CopyButton
A button that copies text and confirms it.
Text sources
Use this next to a value that users copy, such as a command or a token. Pass text for a fixed value, or getText to compute the value on click.
textgetTextdisabled
npx @posthog/wizardphc_k8Fz2nQw7xR4tY1upnpm devUsage
These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.
- For appearance and variant, follow the rules on the Button page.
- Use a label that names what is copied, such as "Copy API key".
- Copying needs a secure context (HTTPS). When the browser blocks it, the button shows an error icon.
API
This site component takes IconButton props for a button element. It supplies the icon, accessible name, and copy behavior.
CopyButton
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | – | The text to copy. Use text or getText. |
| getText | () => string | – | Returns the text when the user activates the button. |
| label | string | 'Copy' | The accessible button name. |
| size | 'sm' | 'md' | 'lg' | 'sm' | The IconButton size. |
| appearance | 'flat' | 'raised' | 'outline' | 'raised' | The shape: flat, raised 3D, or outlined. |
| variant | 'primary' | 'secondary' | 'danger' | 'secondary' | The meaning and color: brand orange, neutral, or destructive red. |
| onCopy | () => void | – | Runs after a successful clipboard write. |
| actionsRef | React.Ref<{ copy(): void }> | – | Gives a ref whose copy() copies the text without a click. |