Free

Copy Button React component for Tailwind CSS v4

Q: How do I install Copy Button?

Run npx wingo-ui@latest add copy-button. It also adds the Wingo UI items it builds on (Button, Tooltip, useClipboard, Motion presets, Tones and 1 more) and the npm packages motion and lucide-react. With shadcn, run npx shadcn@latest add https://wingo-ui.com/r/copy-button.json.

v1.0.0Added in 1.0.0

A React copy to clipboard button for IBANs, tax IDs, links and API keys: an icon button with a tooltip, a labelled button and CopyText.

Click the copy icon next to the IBAN: it shrinks away, a check pops in and draws itself, and the tooltip says Copied without closing. Clicking again restarts the timer; after the timeout the copy icon comes back. With the keyboard, Tab to a button (the tooltip opens on focus) and press Enter or Space. A labelled button swaps its label to the copied text and keeps its width. CopyText makes the value itself the target: hover shows a dotted underline, a copy flashes the text once. A value read from a function that takes longer than 300ms shows the spinner; a failing or empty one shows an X and announces the error. On a phone there is no tooltip: the check, a short vibration and the screen reader announcement carry the feedback, and the small size still has a 44px hit area.

Copy Button is a free React component in the React button components category, written in TypeScript for React 19 and Tailwind CSS v4. It installs as source with npx wingo-ui@latest add copy-button, together with Button, Tooltip, useClipboard, Motion presets, Tones and 1 more and the npm packages motion and lucide-react.

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

npx wingo-ui@latest add copy-button

Usage

Import CopyButton from @/components/ui/copy-button.

import { Link2 } from "lucide-react"
import { CopyButton, CopyText } from "@/components/ui/copy-button"

export function PaymentDetails() {
  return (
    <div className="flex flex-col gap-3">
      <div className="flex items-center justify-between gap-3">
        <span className="font-mono text-sm">GB29 NWBK 6016 1331 9268 19</span>
        <CopyButton value="GB29 NWBK 6016 1331 9268 19" copyLabel="Copy IBAN" copiedLabel="Copied" />
      </div>
      <CopyButton value="https://acme.com/i/2026-0412" variant="outline" icon={<Link2 />} copiedLabel="Copied">
        Copy link
      </CopyButton>
      <p className="text-sm">
        Reference: <CopyText mono copiedLabel="Copied">#2026-0412</CopyText>
      </p>
    </div>
  )
}

Props

value*default "GB29 NWBK 6016 1331 9268 19"
CopySource (string or () => string | Promise<string>)
The text to copy, or a function read at click time (the latest form value, a key fetched on demand). An empty result counts as a failure.
childrendefault ""
ReactNode
A label ("Copy IBAN") turns it into a text button whose label swaps to copiedLabel. Without one it is a square icon button labelled by copyLabel.
copyLabeldefault "Copy"
string
The aria-label of an icon-only button and its tooltip while idle. It never switches to the copied text, so screen readers do not re-read the button. The English defaults of all three labels are exported as DEFAULT_COPY_BUTTON_LABELS.
copiedLabeldefault "Copied"
string
Shown in the tooltip, in place of the label and announced by the status region after a copy.
errorLabeldefault "Copy failed"
string
Tooltip and announcement when the copy fails. A labelled button keeps its label; the icon turns into an X.
variantdefault "ghost"
"solid" | "soft" | "outline" | "ghost" | "link"
The Button variants. ghost for rows and code headers, outline or soft for a labelled button.
sizedefault "sm"
"sm" | "md" | "lg"
32 / 40 / 48px. Icon-only maps to the square icon-sm / icon / icon-lg sizes; sm keeps a 44px hit area on touch.
radiusdefault "auto"
"auto" | "none" | "sm" | "md" | "lg" | "full"
auto is full (a circle) for icon-only buttons and md with a label. The other values are the Button radii.
tonedefault "neutral"
"neutral" | "brand" | "success" | "warning" | "danger" | "info"
The button's color, through the tone tokens.
successTonedefault "success"
"neutral" | "brand" | "success" | "warning" | "danger" | "info"
Color of the check. neutral keeps it the button's own color; on a solid fill the check always uses the fill's text color.
colordefault ""
string
Any CSS color; replaces the tone like on Button. Leave empty to use the tone.
fullWidthdefault false
boolean
Stretches a labelled button to its container, for share screens on a phone.
loadingdefault false
boolean
Forces the spinner. A value function that takes longer than 300ms shows it on its own, and clicks are ignored while it runs.
disableddefault false
boolean
Dims the button and blocks copying.
tooltipdefault true
boolean
The desktop tooltip on icon-only buttons (a labelled button already says what it does). It opens on hover and focus and stays open to say Copied; touch screens never show it.
timeoutdefault 2000
number
How long the check (or the X) stays, in ms. A second copy restarts it.
htmldefault ""
string
A rich version copied next to the plain text (pasted into mail or docs as formatted text). It changes nothing on screen; the playground notes when it is set.
icon
ReactNode
Replaces the Copy icon. Unsized svgs follow the button size (14 / 16 / 18px).
copiedIcon
ReactNode
Replaces the check that draws itself after a copy.
errorIcon
ReactNode
Replaces the X shown when the copy fails.
onCopy
(text: string) => void
Called after a successful copy with the copied text.
onError
(error: Error) => void
Called when the copy fails: a rejected value function, an empty value ("Nothing to copy") or a blocked clipboard.
onClick
(event: MouseEvent<HTMLButtonElement>) => void
Runs before copying; call event.preventDefault() to cancel the copy.
classNames
Partial<Record<"icon" | "label", string>>
Extra classes for the icon stack and the label stack.
className
string
Extra classes for the button, merged last. The other Button props and native button attributes pass through.

Parts

CopyText
component
An inline value that copies itself on click or Enter: the text (mono for ids and keys, truncated to one line) with a small icon that turns into a check.
- value
  string | (() => string | Promise<string>)
  What gets copied; defaults to children when it is a string or a number.
- html
  string
  A rich version copied next to the plain text.
- monodefault false
  boolean
  font-mono at 12.5px, for ids, keys and IBANs.
- truncatedefault true
  boolean
  One line with an ellipsis; the whole value is still copied.
- copyLabeldefault "Copy"
  string
  The title and accessible hint while idle.
- copiedLabeldefault "Copied"
  string
  Announced after a successful copy.
- timeoutdefault 2000
  number
  How long the copied state stays, in ms.
- successTonedefault "success"
  Tone
  The tone of the check icon after a copy.
- onCopy
  (text: string) => void
  Fires with the copied text.
- classNames
  Partial<Record<"value" | "icon", string>>
  Extra classes for the value and the icon.
DEFAULT_COPY_BUTTON_LABELS
constant
The English labels both components fall back to: { copyLabel: "Copy", copiedLabel: "Copied", errorLabel: "Copy failed" }.

Examples

Labelled buttons

A label turns it into a text button; the label swaps to copiedLabel and the width holds.

CopyText inline

CopyText makes the value itself the button: a dotted underline on hover and focus, a muted icon that becomes the check, a soft flash once per copy. Props: value (defaults to string children), mono (false, font-mono 12.5px), truncate (true), copyLabel, copiedLabel, errorLabel, timeout, icon, copiedIcon, successTone, html, onCopy, onError, classNames { value, icon }.

API key fetched on click

A function value is read at click time; slow ones show the spinner after 300ms.

Code snippet header

The quiet ghost icon next to the language label.

Tones and successTone

Every tone; successTone neutral keeps the check monochrome, solid keeps it in the fill's text color.

Failure

A value that rejects, or an empty one, shows the X and announces errorLabel.

Invite link on a phone

fullWidth lg next to a CopyText field, for the share screen.

Dependencies

motion lucide-react button tooltip use-clipboard motion tones ui-config

Files

components/ui/copy-button.tsx

FAQ

Is the React Copy Button component free?

Yes. The source is free and needs no account: copy it from the Code tab or install it with the CLI.

How do I install Copy Button?

Run npx wingo-ui@latest add copy-button. It also adds the Wingo UI items it builds on (Button, Tooltip, useClipboard, Motion presets, Tones and 1 more) and the npm packages motion and lucide-react. With shadcn, run npx shadcn@latest add https://wingo-ui.com/r/copy-button.json.

How does Copy Button behave on phones?

On a phone there is no tooltip: the check, a short vibration and the screen reader announcement carry the feedback, and the small size still has a 44px hit area.

Used in

Order tracker Seller card Cron Picker Share Dialog Contact card Description List Diff Viewer Audit Log Entity Header Chat Message Tool Call Timeline Terminal

and 21 more.

More React button components

Theme Toggle Toggle Group Delete Button Toggle Button Group

All 7 React button components

Articles using this component

API Key Management UI: Create, Show Once, Roll, Revoke
Build it: screens and appsNov 6, 202610 min read
React Terminal Component: Typing Animation Without Jank
Component guidesNov 6, 20268 min read
IBAN Validation JavaScript: Mod 97, Regex and a React Field
Component guidesOct 9, 202612 min read

Free

Copy Button React component for Tailwind CSS v4

v1.0.0Added in 1.0.0

A React copy to clipboard button for IBANs, tax IDs, links and API keys: an icon button with a tooltip, a labelled button and CopyText.

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

npx wingo-ui@latest add copy-button

Usage

Import CopyButton from @/components/ui/copy-button.

import { Link2 } from "lucide-react"
import { CopyButton, CopyText } from "@/components/ui/copy-button"

export function PaymentDetails() {
  return (
    <div className="flex flex-col gap-3">
      <div className="flex items-center justify-between gap-3">
        <span className="font-mono text-sm">GB29 NWBK 6016 1331 9268 19</span>
        <CopyButton value="GB29 NWBK 6016 1331 9268 19" copyLabel="Copy IBAN" copiedLabel="Copied" />
      </div>
      <CopyButton value="https://acme.com/i/2026-0412" variant="outline" icon={<Link2 />} copiedLabel="Copied">
        Copy link
      </CopyButton>
      <p className="text-sm">
        Reference: <CopyText mono copiedLabel="Copied">#2026-0412</CopyText>
      </p>
    </div>
  )
}

Props

value*default "GB29 NWBK 6016 1331 9268 19"
CopySource (string or () => string | Promise<string>)
The text to copy, or a function read at click time (the latest form value, a key fetched on demand). An empty result counts as a failure.
childrendefault ""
ReactNode
A label ("Copy IBAN") turns it into a text button whose label swaps to copiedLabel. Without one it is a square icon button labelled by copyLabel.
copyLabeldefault "Copy"
string
The aria-label of an icon-only button and its tooltip while idle. It never switches to the copied text, so screen readers do not re-read the button. The English defaults of all three labels are exported as DEFAULT_COPY_BUTTON_LABELS.
copiedLabeldefault "Copied"
string
Shown in the tooltip, in place of the label and announced by the status region after a copy.
errorLabeldefault "Copy failed"
string
Tooltip and announcement when the copy fails. A labelled button keeps its label; the icon turns into an X.
variantdefault "ghost"
"solid" | "soft" | "outline" | "ghost" | "link"
The Button variants. ghost for rows and code headers, outline or soft for a labelled button.
sizedefault "sm"
"sm" | "md" | "lg"
32 / 40 / 48px. Icon-only maps to the square icon-sm / icon / icon-lg sizes; sm keeps a 44px hit area on touch.
radiusdefault "auto"
"auto" | "none" | "sm" | "md" | "lg" | "full"
auto is full (a circle) for icon-only buttons and md with a label. The other values are the Button radii.
tonedefault "neutral"
"neutral" | "brand" | "success" | "warning" | "danger" | "info"
The button's color, through the tone tokens.
successTonedefault "success"
"neutral" | "brand" | "success" | "warning" | "danger" | "info"
Color of the check. neutral keeps it the button's own color; on a solid fill the check always uses the fill's text color.
colordefault ""
string
Any CSS color; replaces the tone like on Button. Leave empty to use the tone.
fullWidthdefault false
boolean
Stretches a labelled button to its container, for share screens on a phone.
loadingdefault false
boolean
Forces the spinner. A value function that takes longer than 300ms shows it on its own, and clicks are ignored while it runs.
disableddefault false
boolean
Dims the button and blocks copying.
tooltipdefault true
boolean
The desktop tooltip on icon-only buttons (a labelled button already says what it does). It opens on hover and focus and stays open to say Copied; touch screens never show it.
timeoutdefault 2000
number
How long the check (or the X) stays, in ms. A second copy restarts it.
htmldefault ""
string
A rich version copied next to the plain text (pasted into mail or docs as formatted text). It changes nothing on screen; the playground notes when it is set.
icon
ReactNode
Replaces the Copy icon. Unsized svgs follow the button size (14 / 16 / 18px).
copiedIcon
ReactNode
Replaces the check that draws itself after a copy.
errorIcon
ReactNode
Replaces the X shown when the copy fails.
onCopy
(text: string) => void
Called after a successful copy with the copied text.
onError
(error: Error) => void
Called when the copy fails: a rejected value function, an empty value ("Nothing to copy") or a blocked clipboard.
onClick
(event: MouseEvent<HTMLButtonElement>) => void
Runs before copying; call event.preventDefault() to cancel the copy.
classNames
Partial<Record<"icon" | "label", string>>
Extra classes for the icon stack and the label stack.
className
string
Extra classes for the button, merged last. The other Button props and native button attributes pass through.

Parts

CopyText
component
An inline value that copies itself on click or Enter: the text (mono for ids and keys, truncated to one line) with a small icon that turns into a check.
- value
  string | (() => string | Promise<string>)
  What gets copied; defaults to children when it is a string or a number.
- html
  string
  A rich version copied next to the plain text.
- monodefault false
  boolean
  font-mono at 12.5px, for ids, keys and IBANs.
- truncatedefault true
  boolean
  One line with an ellipsis; the whole value is still copied.
- copyLabeldefault "Copy"
  string
  The title and accessible hint while idle.
- copiedLabeldefault "Copied"
  string
  Announced after a successful copy.
- timeoutdefault 2000
  number
  How long the copied state stays, in ms.
- successTonedefault "success"
  Tone
  The tone of the check icon after a copy.
- onCopy
  (text: string) => void
  Fires with the copied text.
- classNames
  Partial<Record<"value" | "icon", string>>
  Extra classes for the value and the icon.
DEFAULT_COPY_BUTTON_LABELS
constant
The English labels both components fall back to: { copyLabel: "Copy", copiedLabel: "Copied", errorLabel: "Copy failed" }.

Examples

Labelled buttons

A label turns it into a text button; the label swaps to copiedLabel and the width holds.

CopyText inline

API key fetched on click

A function value is read at click time; slow ones show the spinner after 300ms.

Code snippet header

The quiet ghost icon next to the language label.

Tones and successTone

Every tone; successTone neutral keeps the check monochrome, solid keeps it in the fill's text color.

Failure

A value that rejects, or an empty one, shows the X and announces errorLabel.

Invite link on a phone

fullWidth lg next to a CopyText field, for the share screen.

Dependencies

motion lucide-react button tooltip use-clipboard motion tones ui-config

Files

components/ui/copy-button.tsx

FAQ

Is the React Copy Button component free?

Yes. The source is free and needs no account: copy it from the Code tab or install it with the CLI.

How do I install Copy Button?

How does Copy Button behave on phones?

On a phone there is no tooltip: the check, a short vibration and the screen reader announcement carry the feedback, and the small size still has a 44px hit area.

Used in

Order tracker Seller card Cron Picker Share Dialog Contact card Description List Diff Viewer Audit Log Entity Header Chat Message Tool Call Timeline Terminal

and 21 more.

More React button components

Theme Toggle Toggle Group Delete Button Toggle Button Group

All 7 React button components

Articles using this component

API Key Management UI: Create, Show Once, Roll, Revoke
Build it: screens and appsNov 6, 202610 min read
React Terminal Component: Typing Animation Without Jank
Component guidesNov 6, 20268 min read
IBAN Validation JavaScript: Mod 97, Regex and a React Field
Component guidesOct 9, 202612 min read

Copy Button React component for Tailwind CSS v4

Add to a project

Usage

Props

Parts

CopyText

DEFAULT_COPY_BUTTON_LABELS

Examples

Labelled buttons

CopyText inline

API key fetched on click

Code snippet header

Tones and successTone

Failure

Invite link on a phone

Dependencies

Files

FAQ

Is the React Copy Button component free?

How do I install Copy Button?

How does Copy Button behave on phones?

See also

Used in

More React button components

Articles using this component

Payment details

Copy Button React component for Tailwind CSS v4

Add to a project

Usage

Props

Parts

CopyText

DEFAULT_COPY_BUTTON_LABELS

Examples

Labelled buttons

CopyText inline

API key fetched on click

Code snippet header

Tones and successTone

Failure

Invite link on a phone

Dependencies

Files

FAQ

Is the React Copy Button component free?

How do I install Copy Button?

How does Copy Button behave on phones?

See also

Used in

More React button components

Articles using this component

Payment details