Copy button
Copy button is a neobrutalist React component from Cruise UI. Copies a value (account number, code, key) and shows "Copied" or a toast; if the browser blocks it, it shows the text to copy by hand. Install it with npx shadcn@latest add @cruiseui/cruise-copy-button.
Install
Terminal
npx shadcn@latest add @cruiseui/cruise-copy-buttonFirst time? Installation shows the one-off components.json setup (the @cruiseui registry) and how to turn the theme on.
Example
Corners
0123456789
"use client";
import { CruiseCopyButton } from "@/components/cruise/copy-button";
export default function CopyButtonExample() {
return (
<div className="flex flex-col gap-4">
<p className="flex flex-wrap items-center gap-3">
<span className="font-(family-name:--font-mono) text-h3">0123456789</span>
<CruiseCopyButton value="0123456789" label="Copy account number" iconOnly />
</p>
<CruiseCopyButton value="OYA-2026-AB12" label="Copy referral code" />
</div>
);
}
<button type="button" class="brutal btn btn-secondary" data-copy="0123456789" aria-label="Copy account number">Copy</button>
<span class="visually-hidden" aria-live="polite"></span>
<script>
document.querySelectorAll('[data-copy]').forEach((button) => button.addEventListener('click', async () => {
const live = button.nextElementSibling;
try { await navigator.clipboard.writeText(button.dataset.copy); live.textContent = 'Copied'; }
catch { live.textContent = "Copying didn't work."; }
}));
</script>Needs theme.css. Interactive parts (menus, tabs, drawers) also need the script in the spec for that component.
When to use it
When to use
Account numbers, referral codes, API keys, snippets.
When not to
Copying long documents (offer a download instead).
Props
CruiseCopyButton
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | The text to copy. |
label? | string | "Copy" | Button text, or its accessible name when iconOnly (e.g. "Copy account number"). |
copiedLabel? | string | "Copied" | — |
iconOnly? | boolean | false | A 44px square icon button. |
toast? | string | boolean | false | Also show a toast (needs a <CruiseToaster /> mounted). |
variant? | CruiseButtonVariant | "secondary" | — |
onCopied? | (() => void) | — | — |
className? | string | — | — |
Accessibility
- Icon-only buttons have an aria-label, e.g. "Copy account number".
- "Copied" (or the failure) is announced in an aria-live region.
- Failure is explained in words, with the value shown to select by hand.