An icon button that copies its value to the clipboard, showing a check and carrying data-copied until its timeout resets it.
pnpm add @zeroxsolutions/icons1
2
3'use client';
import { useState, type ReactNode } from 'react';Installation#
pnpm dlx shadcn@latest add https://ui.zeroxsolutions.com/r/copy-button.jsonUsage#
import { CopyButton } from '@/components/feedback/copy-button';<CopyButton value={command} />Use it beside a value the reader might want to copy, such as a command or a code snippet's whole block.
API reference#
CopyButton#
Renders shadcn's Button and takes every prop it takes
except value and children, plus:
| Prop | Type | Default |
|---|---|---|
value | string | required |
label | string | 'Copy' |
copiedLabel | string | 'Copied' |
timeout | number | 2000 |
onCopied | (value: string) => void | - |
It defaults variant to ghost and size to icon-xs. A caller's onClick runs before the copy, and calling
event.preventDefault() in it skips the copy; a write the browser refuses, such as a denied clipboard
permission, leaves the button idle. Its icon plays while the button is hovered or focused, and a caller's own
pointer and focus handlers still run. It sets data-slot="copy-button" and data-copied while it shows its
copied state. The check eases in, and reduced motion shows it at once.