Copy Button
ProA purpose-built button for copying text to the clipboard. Shows a clipboard icon and "Copy" label at rest, then switches to a checkmark and "Copied!" confirmation for 2 seconds after clicking. Commonly used alongside code blocks and tokens.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Standard copy button with icon and text label. | Use beside code blocks, token values, or any text that users need to copy. |
| Compact |
Usage Guidelines
Do
Show a brief "Copied!" confirmation state after copying.
Don't
Omit the confirmation feedback — users need to know the copy succeeded.
Do
Place the Copy Button adjacent to the content being copied.
Don't
Use a generic Button for copy actions — this component handles state automatically.
Do
Use the clipboard icon for instant recognition.
Don't
Place the button far from the content it copies.
Code
Design Tokens
Accessibility
- Announces "Copied to clipboard" to screen readers via aria-live region.
- Button label changes visually but aria-label remains descriptive.