Copy Button

Copy text to the clipboard with visual, sound, and haptic feedback.

Loading…

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.

API reference

PropType