Buttons

Copy Button

Copy text to the clipboard with success feedback.

Import

tsx

import { CopyButton } from "@cooud-ui/ui";

bash

npx cooud-ui add copy-button

Examples

Default

An icon button that writes `value` to the clipboard and swaps to a check for a moment. It manages its own copied state.

tsx

<CopyButton value="npm install @cooud-ui/ui" />

Inline with a value

Drop it next to a value the user might copy, such as an API key or command. Use `copyLabel` / `copiedLabel` to localise the accessible text, and the outline variant to sit flush with a field.

cooud_sk_live_…a1b2

tsx

<div className="flex items-center gap-2">
  <code className="rounded bg-surface-inset px-2 py-1 font-mono text-sm">cooud_sk_live_…a1b2</code>
  <CopyButton
    value="cooud_sk_live_a1b2"
    variant="outline"
    copyLabel="Copy API key"
    copiedLabel="API key copied"
  />
</div>

API Reference

Generated from the component's exported types.

CopyButtonProps

Extends Omit<ButtonProps, "value" | "children">

Prop	Type	Default	Description
`value`*	`string`	—	Text written to the clipboard when the button is pressed.
`timeout`	`number`	`1500`	Milliseconds the "copied" state stays visible before reverting. Defaults to 1500.
`copyLabel`	`string`	`"Copy"`	Accessible label shown to assistive tech in the idle state. Defaults to "Copy".
`copiedLabel`	`string`	`"Copied"`	Accessible label announced after a successful copy. Defaults to "Copied".