Button Copy

Animated copy-to-clipboard React button with smooth success feedback, tooltip support, and accessibility. Perfect for code snippets and shareable content.

~0.8 kB

Last updated: August 2, 2026

Installation

npx smoothui-cli add button-copy

Features

One-click copy with success state
Optional tooltip and label
Accessible with aria-live
Themable and lightweight

Accessibility

ARIA Attributes

Attribute	Element	Purpose
`aria-label`	Button	Dynamically updates to reflect the current state: "Copy", "Copying...", or "Copied"
`aria-live="polite"`	Button	Announces state changes to screen readers without interrupting current speech

State transitions (idle, loading, success) are announced via the aria-live="polite" region
The button is automatically disabled during loading and success states to prevent double-clicks

Reduced Motion

This component respects the prefers-reduced-motion media query via useReducedMotion from Motion. When reduced motion is preferred, the icon swap blur and slide animations are disabled instantly.