Clipboard ButtonFreev1.0.0
Copies text and says so: the copy icon becomes a check that draws itself in, the label reads Copied, and screen readers hear it. Falls back when the clipboard is blocked, and the value can be made on press, even asynchronously.
Base UI
pnpm dlx shadcn@latest add https://beautiful-ui.dev/r/lumen-clipboard-button.jsonRadix
pnpm dlx shadcn@latest add https://beautiful-ui.dev/r/radix-nova/lumen-clipboard-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 @beautiful-ui registry added, @beautiful-ui/<name> picks for you.
Icon only
Usage
Import it and pass your content. The props that matter most are listed next.
Example
import { ClipboardButton } from "@/components/ui/lumen/controls/clipboard-button";
<ClipboardButton value={apiKey}>Copy key</ClipboardButton>
<ClipboardButton value={inviteUrl} aria-label="Copy invite link" />Props
motion"full""full" | "subtle" | "off"As on Button: subtle is shorter on a calm curve; off is instant. Reduced motion is respected automatically.
value–string | (() => string | Promise<string>)The text, or a function that makes it on press.
children–ReactNodeThe label. Without it the button is icon-only: give it an aria-label.
copiedLabel / errorLabel"Copied" / "Couldn't copy"stringShown and announced after a press.
resetMs1800numberHow long the result shows.
onCopy–(text: string) => voidCalled once the text is on the clipboard.
Show all 7 propsShow fewer
variant / size"secondary" / "default"Button propsAs on Button.
Source
components/ui/lumen/controls/clipboard-button.tsx
