Copy Button
Freev1.0.0Copy a value to the clipboard and show clearly that it worked.
Build for your project
Code/install build
Usage
Import it and pass your content. The props that matter most are listed next.
Example
import { CopyButton } from "@/components/ui/notchset/copy-button";
export function RunIdCopy({ runId }: { runId: string }) {
return <CopyButton value={runId} label="RUN ID" footnote="PLANNER · AUG 14 · 09:12:04" />;
}Props
value–stringWhat is copied and shown.
label–stringThe legend above the field.
kbd–stringA shortcut shown in the legend (display only).
footnote–stringThe line under the field.
timeout–numberHow long the copied state holds (ms). Default 1700.
onCopy–(value) => voidCalled after a successful copy.
Show all 7 propsShow fewer
labels–Partial<CopyButtonLabels>Every word, for other languages.
Anatomy
- The Notchset instrument parts: legend, node, check and glyph flip.
- navigator.clipboard with an honest failure state.
- One file serves both builds.
CopyButtondata-slot="copy-button"The legend, field, key and footnote.
Fielddata-slot="copy-button-field"The value and the attached key.
Keydata-slot="copy-button-key"The copy button.
Source
components/ui/notchset/copy-button.tsx
Loading the code
Build for your project
Code/install build
Installation
Base UI
pnpm dlx shadcn@latest add https://notchset.dev/r/copy-button.jsonRadix
pnpm dlx shadcn@latest add https://notchset.dev/r/radix-nova/copy-button.jsonFree, no account or key. Use the command for your project's primitives: a radix-*, new-york or default style in components.json is Radix, a base-* style is Base UI. With the @notchset registry added, @notchset/<name> picks for you.
Install by hand
- 1. No extra packages: React and Tailwind CSS v4 are enough.
- 2. Copy the files to these paths (the source, or save them all as a .zip)
- components/ui/notchset/copy-button.tsx
- lib/beautiful-ui/notchset/instrument.tsx
- lib/beautiful-ui/notchset/root.ts
- 3. No stylesheet needed.
- 4. Install what it builds on first: shadcn's cn helper (lib/utils.ts, from npx shadcn init), the theme foundation (its tokens and base styles)
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
For coding agents
Give your coding assistant the Markdown guide instead of screenshots.
Use it for
- Run IDs, keys and commands people paste elsewhere
Use something else when
- Long text or code: use a code block with its own copy
Mistakes to avoid
- Clipboard access needs a secure context (https or localhost)
Agents find it by
- copy button, copy to clipboard, run id, api key copy, copy field, Notchset
Where agents read it
- Guide for this component: https://notchset.dev/md/copy-button.md
- Every component, for tools without MCP: /llms.txt
- MCP server:
https://notchset.dev/api/mcp(setup)
Behaviour
Keyboard
- Enter / Space
- Copy
Accessibility
- The key is a button named Copy plus the label
- The result is announced through a polite live region
- A failed copy says so instead of pretending
Motion
- Hover
- The copy glyph's back sheet shifts −1.5px
- Press
- The glyph scales to .86
- Copied
- The key fills ink and the check traces in over 260ms; the field and footnote flip; everything reverts after 1.7s
Responsive
- The value truncates with an ellipsis; the key stays visible at any width.
- 44px hit area on touch screens.
Performance
- Copy writes once to the clipboard; the confirmation is a CSS transition and one timer.
- Rapid copies replace the pending timer rather than stack.
Changelog
v1.0.0 · 2026-10-02
First release
