CopyButton
Copy to clipboard with a check-morph confirmation and a legacy fallback.
Live — this one is real
Ink
Paper
Accent
Accent fill
Usage
import { CopyButton } from "mizu-ui";
export function Swatch({ hex }: { hex: string }) {
return <CopyButton text={hex}>{hex}</CopyButton>;
}
Source & setup
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.
Inspect feedback/CopyButton.tsx
Source is included in the npm package under src/feedback/CopyButton.tsx.
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.