Copy Button
A button with a copy to clipboard animation and optional text label.
Made by imskyleenPowered by
Installation
Loading component...
When to use
Use this decision tree to determine when to use the Copy Button component:
Usage
Icon Only
<CopyButton content="Hello world!" size="icon" />With Text Label
<CopyButton content="npm install @redpanda/ui">
Copy
</CopyButton>Different Variants
<CopyButton content="Hello world!" variant="outline">
Copy to clipboard
</CopyButton>
<CopyButton content="Some text" variant="secondary">
Copy text
</CopyButton>
<CopyButton content="Code snippet" variant="ghost">
Copy
</CopyButton>Props
Prop
Type
Credits
- We take our inspiration from Shadcn UI for the button style.
- We use Animate UI from imskyleen for all the animations.
Recent changes
- patchv1.2.0Pin shipped dependency floors to the version we develop against. Registry items now declare ranges like `^5.1.9` (the actual installed version) instead of collapsing to `^5.0.0`, so consumers start on the known-tested b…#133
- minorv1.1.0Theme docs refresh, readability pass on semantic foregrounds, and consumer-facing Base UI regression fixes.#121
- minorv1.0.0Post-Base-UI polish. Public API unchanged.#116
- majorv1.0.0Migrate every Radix-based primitive to `@base-ui/react@^1.4.0` (Base UI).#114
- minorv0.3.0Add theme-provider component to the registry with documentation and tests. Includes playground type improvements (export RegistryItem, remove as-const boilerplate) and docs site dark mode border color fix.#109
Built by malinskibeniamin. The source code is available on GitHub.