CopyButton

Copy to clipboard with a check-morph confirmation and a legacy fallback.

Live — this one is real

Ink

Paper

Accent

Accent fill

Usage

tsx

import { CopyButton } from "mizu-ui";

export function Swatch({ hex }: { hex: string }) {
  return <CopyButton text={hex}>{hex}</CopyButton>;
}

Source & setup

Add this component to your project with the shadcn CLI. The command copies its source into your configured UI directory, with base.css, Mizu’s tokens: it styles itself inline and brings no stylesheet of its own. In a project without a components.json, run npx shadcn@latest init 0xuser64bit/mizu/preset first: plain init installs shadcn’s theme into your global CSS. Then load the fonts.

npx shadcn@latest add 0xuser64bit/mizu/copy-button

Every component imports from its own path, its name in kebab case.

tsx

import { CopyButton } from "@/components/ui/mizu/copy-button";

For npm imports, import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports. A Client Component: its source starts with “use client”.

Inspect feedback/CopyButton.tsx

Source is included in the npm package under src/feedback/CopyButton.tsx.

Open full source ↗

Props

Prop	Type	Default	Description
text	string	—	The string to copy.
feedback	string	"Copied"	Confirmation label shown for 1.4s.

Accessibility

aria-label announces the copied state. Clipboard failure is reported explicitly and never claims success.

Motion

The diamond is replaced by a check; feedback stays visible for 1.4 seconds.

Works alongside

CountUp Toast