CopyButton
Icon button that copies a value to the clipboard with copied feedback
Category: inputs · WCAG 2.2-AA · clipboard, copy, button, snippet
Sizes
- sm
- md
States
- idle
- copied
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | The text written to the clipboard on click |
size | 'sm' | 'md' | md | Visual size of the component (e.g. 'sm', 'md', 'lg'). |
labels | { copy?: string; copied?: string } | — | Overrides the built-in i18n labels per instance |
Design tokens
--cascivo-color-surface--cascivo-color-text-subtle--cascivo-color-text--cascivo-color-border--cascivo-color-bg-subtle--cascivo-color-success--cascivo-radius-control--cascivo-focus-ring--cascivo-control-height-sm--cascivo-control-height-md
When to use
- Letting users copy a short value to the clipboard — install commands, API keys, tokens, share links
- Inline next to code snippets or read-only fields where copying is the primary affordance
When not to use
- Triggering a general action — use Button
- Copying content the user can already select and edit freely where a copy affordance adds nothing
How to build an accessible CopyButton in React →
Examples
Default
<CopyButton value="npx cascivo add button" />Small
<CopyButton value="pnpm install" size="sm" />Custom labels
Override the built-in copy/copied strings per instance
<CopyButton value="token" labels={{ copy: 'Copy token', copied: 'Token copied' }} />