Components
Copy Button
An accessible clipboard copy button with success and failure announcements for screen readers.
Install
Add this registry item to your app with shadcn.
bash
bunx --bun shadcn@latest add https://krakstack.net/r/copy-button.jsonOverview
CopyButton copies a string to the clipboard and announces copy results with an aria-live status region. It keeps the accessible name stable while the icon changes after a successful copy. Pass valueDescription for concise context, such as install command or tsx code; avoid passing the full copied value when it may be long or sensitive.
Variants
- Omit
copyVariantfor the default icon-only size. copyVariant="sm"renders a smaller compact icon-only button.copyVariant="large"renders the copy label next to the icon.
Usage
tsx
import { CopyButton } from "@/components/ui/copy-button";
<CopyButton
value="bun run dev"
valueDescription="install command"
copyVariant="large"
variant="secondary"
messages={{ copy: "Copy", copied: "Copied" }}
/>Dependencies
Packages and shadcn components required by this registry item.
Dependencies
Registry Dependencies
Preview
Copy Button
Accessible clipboard controls with default, small, and large layouts.
Default
Small
Large