CopyButton

A button that copies a value to the clipboard and shows a brief confirmation. Transitions from a clipboard icon to a check icon on click.

Import


import { CopyButton } from "chunks-ui";

Basic Usage


<CopyButton value="npm install chunks-ui" />

npm install chunks-ui

Custom Children

Use the render-prop children for custom content. The copied boolean reflects the current state:


<CopyButton value="REF-2024-XK9">
  {({ copied }) => (
    <span className="text-xs">{copied ? "Copied!" : "Copy code"}</span>
  )}
</CopyButton>

REF-2024-XK9

Timeout

Control how long the “copied” confirmation persists with the timeout prop (default 2000ms):


<CopyButton value="text" timeout={5000} />

Props

Name	Type	Default
`value`	`string \| (readonly string[] & string)` The string value to be copied to the clipboard when the button is clicked.
`children`	`(state: { copied: boolean; }) => ReactNode` Render prop function that receives the copied state object and returns custom ReactNode for button content. If not provided, a default icon/UI is rendered, unless `render` is set.
`timeout`	`number` How long, in milliseconds, the copied state shows after a successful copy. Each copy restarts it.	`2000`
`labels`	`Partial<CopyButtonLabels>` Replaces the built-in English strings, e.g. to translate them. Keys you leave out keep the default from `DEFAULT_COPY_BUTTON_LABELS`. `aria-label` takes precedence. With `children`, the button has no default name, so `labels` does not apply. The content names the button then, so icon-only children need an `aria-label`.

All other props are forwarded to the underlying IconButton, so variant and color work too. They default to text and secondary. With a render element and no children, the button draws no icon: the element draws its own, and may be a void element such as <img>. The button keeps its default name.

Labels

labels replaces the built-in English text, for example to translate it. Keys you leave out keep their default from DEFAULT_COPY_BUTTON_LABELS. aria-label takes precedence and keeps one name in both states. With children, the button has no default name, so labels does not apply. The content names the button then, so icon-only children need an aria-label. See Labels.

Name	Type	Default
`copy`	`string` Name of the button before a copy.	`"Copy to clipboard"`
`copied`	`string` Name of the button while it shows the copied state.	`"Copied"`