Copy button

A button that copies a value, says “Copied” in a live region, and falls back to a selected field when the clipboard is unavailable.

Web · ✓Mobile · ✗ to buildDesktop · ✓BetaActions

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

Web only — React, from @krizaka/ui/copy-button. Beta: its API may still change in a minor version.

Mobile · ✗ to build. The native twins of PromoCodeField, MoneyInput and CopyButton are a follow-up of the coupons surfaces. issue #782

Why it is here. The coupons (@krizaka/coupons): the owner-link block of Yomizaka and the founder offer code of Akinaza — copy in one click, with a read-only field as the fallback (krizaka-ui#576, #783).

When to use

To copy a link, a code or an identifier: an owner link, a coupon, an API key.
Beside a value the person must paste elsewhere.

When not to use

To copy a block of code with its file name and language.Use instead: Code block
For an action that is not a copy.Use instead: Button

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

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

Examples

With words

The label, then “Copied” for 1.8 s.

Icon only

A ghost button beside a code.

Props

A button that copies value. State: data-copied.

Prop	Type	Default	Description
`copiedLabel`required	`string`	—	What it says once copied, announced politely: "Copied".
`fallbackLabel`required	`string`	—	Said when the clipboard is unavailable, above the selected value: "Press Ctrl+C to copy".
`label`required	`string`	—	The words of the button (and its accessible name), passed translated: "Copy link". Icon only: set `iconOnly`.
`value`required	`string`	—	The text to copy.
`announce`	`string`	—	A message announced politely by assistive technology when it changes (“Saved”, “Upload failed”) — passed translated.
`copiedIcon`	`ReactNode`	—	Replaces the check icon shown once copied.
`icon`	`ReactNode`	—	Replaces the copy icon (a `@krizaka/icons` one, say).
`iconOnly`	`boolean`	—	Shows only the icon (the label stays the accessible name).
`indicator`	`boolean`	`true`	Shows the glyph while `loading` / with a `status`. `false`: you draw your own.
`loading`	`boolean`	—	Disables and signals the wait (aria-busy, data-loading) and shows the Krizaka loader glyph before the label; the button keeps its colour.
`magnetic`	`boolean`	—	@deprecated Since 3.31 (krizaka-ui#393): does nothing — a button never moves under the pointer. Removed in 4.0.
`progress`	`number \| null`	—	Between 0 and 1, while `loading`: the glyph's trace and a light fill across the button grow to the value (an upload, an export).
`resetMs`	`number`	`1800`	How long "Copied" stays, in milliseconds (1800 by default).
`shape`	`"rounded" \| "pill" \| "cut"`	`rounded`	`rounded` (an 8 px radius, the radius of a field) · `pill`. `cut` is deprecated (krizaka-ui#393: the chamfer is retired) — it draws `rounded` and warns in development; it will be removed in 4.0.
`shimmer`	`boolean`	—	@deprecated Since 3.31 (krizaka-ui#393): does nothing — the hover is quiet. Removed in 4.0.
`size`	`"sm" \| "lg" \| "icon" \| "md"`	`md`	sm · md · lg, or `icon` (a square).
`status`	`"success" \| "error" \| null`	—	How the action ended: `success` draws a check, `error` a cross (and the button shakes its head once); a ring of the status colour opens around it. Clear it to return to rest.
`variant`	`"danger" \| "primary" \| "gradient" \| "secondary" \| "outline" \| "ghost"`	`secondary`	The look: `primary` (the accent), `gradient` (accent → accent-2), `secondary` (a raised surface), `outline`, `ghost`, `danger`.

Accessibility

“Copied” is announced politely (role=status) and names the button while it shows.
Icon only: the label is the accessible name.
Without the Clipboard API a read-only field appears, selected: nothing fails silently.

Keyboard

Keys	Action
`Enter / Space`	Copies the value.

Best practices

label says what is copied (“Copy link”), not just “Copy”.
Keep fallbackLabel short: it appears above the selected value when the clipboard is refused.
Pass a @krizaka/icons icon through icon to match the page.

Generated from the code of @krizaka/ui 3.67.1: its meta.ts, its examples and its types.Edit this documentation on GitHub