Copy Button
Copy text to the clipboard with visual, sound, and haptic feedback.
Features
- Accepts text as a value or a function resolved when the button is clicked.
- Animates idle, success, and error icons before returning to idle.
- Plays matching UI sounds and haptics for successful and failed copies.
- Supports custom state icons and copy outcome callbacks.
Installation
pnpm dlx shadcn@latest add @tentui/copy-button
Usage
import { CopyButton } from "@/components/copy-button";<CopyButton size="default" variant="outline" text="npm install tentui">
Copy command
</CopyButton>Pass a function when the value should be resolved at click time.
<CopyButton text={() => window.location.href} aria-label="Copy page URL" />Accessibility
CopyButton preserves the underlying button's keyboard and focus behavior and
uses Copy as its default accessible label. Set aria-label to describe a more
specific action when needed.
Success and error feedback is visual. Announce the result separately when confirmation needs to be available to assistive technology.