Skip to content

Components · Reference

Copy Button

An accessible clipboard copy button with success and failure announcements for screen readers.

Last updated September 28, 2026

Overview

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.

Set the active locale once with KrakstackProvider; pass locale directly only when a component needs an override. English and French defaults are built in, and messages accepts arbitrary locale keys with exact-locale, base-language, then English fallback.

Install

shell
bunx shadcn@latest add @krak-stack/copy-button

Variants

  • Omit copyVariant for 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"
  locale={locale}
  messages={{ [locale]: { 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