Copy button

Copies a value to the clipboard and shows the result.

Reference ID

REF-2026-0472

copy-button-demo.tsx

"use client";import { CopyButton } from "@/components/vip-ui/copy-button";export function CopyButtonDemo() {  return (    <div className="flex w-full max-w-sm flex-wrap items-center justify-between gap-3 rounded-lg border border-border bg-card p-3">      <div className="min-w-0">        <p className="text-xs text-muted-foreground">Reference ID</p>        <code className="break-all font-mono text-sm text-foreground">          REF-2026-0472        </code>      </div>      <CopyButton value="REF-2026-0472" aria-label="Copy reference ID" />    </div>  );}

Installation

CLI

Manual

The CLI adds the files, packages, theme variables, and Tailwind plugin that this component uses. Before you run it, set up your project.

npm

yarn

pnpm

bun

pnpm dlx shadcn@latest add https://vip-ui.dev/r/vip-copy-button.json

Custom label and icon button

Pass a function as children to show a label for each status.

https://example.org/releases/v2.6

Workspace ID

workspace-aurora-72

copy-button-share-demo.tsx

"use client";import { CopyButton } from "@/components/vip-ui/copy-button";const link = "https://example.org/releases/v2.6";const workspaceId = "workspace-aurora-72";export function CopyButtonShareDemo() {  return (    <div className="grid w-full max-w-md gap-4">      <div className="grid gap-2">        <p className="break-all font-mono text-xs text-muted-foreground">          {link}        </p>        <div>          <CopyButton value={link} variant="secondary" size="sm">            {(status) =>              status === "copied"                ? "Link copied"                : status === "error"                  ? "Try again"                  : "Copy release link"            }          </CopyButton>        </div>      </div>      <div className="flex items-center justify-between gap-3 border-t border-border/70 pt-4">        <div className="min-w-0">          <p className="text-xs text-muted-foreground">Workspace ID</p>          <code className="break-all font-mono text-sm text-foreground">            {workspaceId}          </code>        </div>        <CopyButton          value={workspaceId}          aria-label="Copy workspace ID"          variant="secondary"          iconOnly        />      </div>    </div>  );}

API reference

vip/ui adds or changes the props below. For all other props, see React Aria Button (opens in a new tab).

value: stringRequired: The exact text written to the clipboard.
children: ReactNode | (status: CopyButtonStatus) => ReactNode: The button content. Without it, the button shows an icon and status text. Pass a function to show content for each status. CopyButtonStatus is "idle", "copied", or "error".
aria-label: string: The accessible name. Without it, the name comes from text children in the idle status. Other children give the name "Copy". It does not change after a copy. A live region announces the result.
variant: ButtonVariant = "outline": Uses the Button variants.
size: "xs" | "sm" | "md" | "lg" | "xl" = "md": Uses the Button sizes.
iconOnly: boolean = false: Shows only the icon.