Actionsstable

Copy Button

A button component that copies text to the clipboard with visual feedback, displaying an animated transition from copy to check icon.

https://ui.pittaya.org/docs/components/copy-button

Installation

Install the component directly into your project using the Pittaya CLI.

npx pittaya@latest add copy-button

When to use

Use the Copy Button when you need to enable users to quickly copy text content to their clipboard, such as code snippets, API keys, command lines, or any other text that users might need to reuse.

The component provides immediate visual feedback through an animated icon transition, confirming the successful copy action to the user.

Best practices

Position the button near the content that will be copied, typically in the top-right corner of code blocks or text containers.
Use the onCopy callback to track analytics or trigger additional actions after copying.
Ensure the copied text is meaningful and complete - avoid copying truncated or partial content.
Consider adding aria-label for better accessibility when the button context isn't immediately clear.

Accessibility

The component inherits all button accessibility features, including keyboard navigation and focus states. The icon transition provides visual feedback, and you can enhance it with screen reader announcements through the onCopy callback.

For optimal accessibility, consider adding an aria-labelattribute describing what content will be copied, such as "Copy code snippet" or "Copy API key".

Examples

Combine variants and sizes to meet your needs.

Multiple copy options

Display multiple options with individual copy buttons and track which one was copied.

Choose your package manager:

📦

npmnpm install @pittaya/ui

🧶

Yarnyarn add @pittaya/ui

⚡

pnpmpnpm add @pittaya/ui

API key with security

Copy sensitive information like API keys with masked display and secure copy.

Production API KeyLive

mock_api_key_51234567890•••••••••••••••••••

Properties

TSX interface that combines variants and default attributes.

Prop	Type	Default	Description
`text`Required	`string`	—	The text content that will be copied to the clipboard when the button is clicked.
`onCopy`	`() => void`	—	Optional callback function that executes after the text is successfully copied to the clipboard.
`className`	`string`	—	Optional CSS classes to customize the button's appearance and positioning.

Search Components