Foundation
Copy Button
Copies a value and confirms it in place, with an announced result and a failure state.
npm install @aback-ui/uiTest API keyExample value. It is not a real credential.
abk_test_4f9c2e1a7bInstallation
Copy the source with the CLI to own and edit it, or import it from the npm package.
npx aback-ui@latest add copy-buttonWrites components/ui/copy-button.tsx and the components it builds on. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.
Usage
Import the parts you need from the installed file. The Code tab above has a complete, working example.
import { CopyButton, copyToClipboard } from "@/components/ui/copy-button";API reference
Props and composition points for Copy Button. Native element props pass through.
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | None | The exact text written to the clipboard. An empty string disables the button. Required. |
label / copiedLabel / errorLabel | string | "Copy" / "Copied" / "Copy failed" | Accessible name in each state, and the visible text when showLabel is on. Localize all three. |
showLabel | boolean | false | Shows the label next to the icon. Icon-only buttons keep the label as their accessible name and title. |
timeout | number | 2000 | Milliseconds before the copied or error state returns to idle. |
onCopy / onCopyError | (value: string) => void / (error: unknown) => void | None | Called after a successful write, or when both the Clipboard API and the fallback fail. |
variant / size | Button variant / size | "ghost" / "icon-sm" or "sm" | Any Button variant and size. The default size follows showLabel. |
copyToClipboard(value) | (value: string) => Promise<void> | None | The exported helper the button uses, for copying from your own controls. |
Dependencies: @tabler/icons-react, plus the shared @/lib/utils helper.
Accessibility
Semantics, keyboard behavior, and the decisions that keep the component operable.
- It is a real button with an accessible name in every state, and a polite live region announces "Copied to clipboard" or the failure.
- A refused write shows and announces an error state instead of claiming success.
- The confirmation stays next to the control. There is no toast that disappears before it can be read.
- Icons are decorative. The check and cross also change the label, so colour never carries the result alone.
Keyboard
| Key | Action |
|---|---|
| EnterorSpace | Copy the value. |
Used in production
The Aback products whose interfaces shaped this component.