Kinetiq

KQ-534 · COPY/CHIP

Copy Chip

A copy button that shows its own result. The glyph morphs rather than swaps — the two squares fade out on a tween while the tick draws over them with pathLength on flick — a wash flashes once across the chip and drains on the exit ease, the label swaps to the copied copy, and the chip reverts after its timeout. When the clipboard refuses, the chip selects the value in a field over its own box and asks for Ctrl/Cmd+C, with Escape or blur returning it to idle; a polite status line announces each outcome once, and under reduced motion the icon simply swaps because the result still has to be visible.

KQ-534 · COPY/CHIP
Project keywl_live_7f3ca2b91d4e
Installnpx waylight init

Waylight · nothing copied yet

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/copy-chip

Props

value
string
default —
What is written to the clipboard, and what the fallback field selects.
label
string
default "Copy"
Idle copy, and the accessible name in the icon variant.
copiedLabel
string
default "Copied"
Copied copy, shown while the tick is drawn.
timeout
number
default 1500
Milliseconds before the chip reverts to idle. A second copy restarts the clock.
variant
"chip" | "icon"
default "chip"
With or without a visible label; both are 32px tall so they sit in a row of controls.
onCopy
(value: string) => void
default —
Fires with the value once the clipboard has taken it.