Skip to content
comp0

comp0

Actions

CopyButton

Copies text to the clipboard and politely announces Copied.

When to use it: Use it for code blocks, links, and generated text. For other actions use Button.

On this page
  1. Example
  2. Anatomy
  3. Step by step
  4. Keyboard
  5. Forms and accessibility
  6. API reference

Example

Loading example…
CopyButton.tsxtsx
import { CopyButton } from "@comp0/react";

export function Example() {
  return (
    <div className="flex max-w-sm items-center gap-3">
      <code className="rounded bg-zinc-100 px-2 py-1 text-sm text-zinc-900 dark:bg-zinc-800 dark:text-zinc-100">
        npm i @comp0/react
      </code>
      <CopyButton
        value="npm i @comp0/react"
        className="group rounded border border-zinc-950/10 bg-white px-3 py-2 text-base text-zinc-900 outline-teal-600 focus-visible:outline-2 disabled:opacity-50 sm:text-sm dark:border-white/10 dark:bg-zinc-900 dark:text-zinc-100 dark:outline-teal-400"
      >
        <span>Copy install command</span>
        <span aria-hidden="true" className="hidden group-data-copied:inline">
          {" "}
          ✓
        </span>
        <span aria-hidden="true" className="hidden group-data-failed:inline">
          {" "}
          ✗
        </span>
      </CopyButton>
    </div>
  );
}

Anatomy

Dashed frames are invisible state providers; shaded shapes own real DOM. Numbered pins match the list below.

A wireframe sketch of the assembled component. Each numbered marker matches a part in the list that follows.

  1. CopyButton

    Button that writes value to the clipboard, plus a hidden polite status. Owns a DOM element.

Step by step

  1. 1

    Add the main part

    Give CopyButton the text as value and a stable visible name.

  2. 2

    Add the supporting parts

    Set copiedText and failedText if the defaults need translating.

  3. 3

    Make the behavior clear

    Style the transient state with data-copied and data-failed; the status announcement is built in.

    Exampletsx
    <CopyButton value="npm i @comp0/react">Copy install command</CopyButton>;

Keyboard

↵
Copies the value.
Space
Copies the value.

Forms and accessibility

The button is type=button and submits nothing.

Accessibility checklist

  • The accessible name stays the same; the result is announced through a separate polite status so it is not read twice.
  • A failed copy is announced too; give a manual fallback such as selectable text.
  • The Clipboard API needs a secure context and a user gesture.

API reference

Importtsx
import { CopyButton } from "@comp0/react";

CopyButton

DOM element

Button that writes value to the clipboard, plus a hidden polite status.

PropTypeDescription
valuestringThe text copied to the clipboard.
copiedTextstringAnnounced after a successful copy. Defaults to Copied.
failedTextstringAnnounced when copying fails. Defaults to Copy failed.
resetDelaynumberMilliseconds the copied or failed state lasts. Defaults to 2000.
onCopied(value: string) => voidCalled after the clipboard accepted the text.
onCopyError(error: unknown) => voidCalled when the clipboard write fails.
asElementTypeRenders another element in place of the button.

Style hooks

Attributes that appear while a state is true. Target them with Tailwind data variants such as data-open:bg-zinc-100, or with any CSS selector.

CopyButton

Style hookMeaning
[data-copied]The last copy succeeded, for a short time.
[data-failed]The last copy failed, for a short time.

Keep exploring