Installation

Barrel

import { ClipboardText } from "@cloudflare/kumo";

Granular

import { ClipboardText } from "@cloudflare/kumo/components/clipboard-text";

Usage

import { ClipboardText } from "@cloudflare/kumo";

export default function Example() {
  return <ClipboardText text="Copy this text" />;
}

Accessibility and localization

ClipboardText includes Kumo-owned strings for the icon-only copy button, tooltip, and copied status. Pass these user-facing and assistive labels in your consumer’s language.

• labels.copyAction names the copy button for assistive technology. It defaults to “Copy to clipboard”.

• tooltip.text shows the hover tooltip when tooltip mode is enabled. It defaults to “Copy”.

• tooltip.copiedText shows the copied toast in tooltip mode and announces the copied status. It defaults to “Copied”.

<ClipboardText
  text="sk_live_***********"
  textToCopy="sk_live_51H8_abc123"
  labels={{ copyAction: t("clipboard.copyAction") }}
  tooltip={{
    text: t("clipboard.copy"),
    copiedText: t("clipboard.copied"),
  }}
/>

The generated props table focuses on Kumo-owned props and does not enumerate inherited ARIA/native attributes. Use the localization props above for ClipboardText’s built-in controls.

Examples

Short Text

import { ClipboardText } from "@cloudflare/kumo";

export function ClipboardTextShortDemo() {
  return <ClipboardText text="abc123" />;
}

API Key

import { ClipboardText } from "@cloudflare/kumo";

export function ClipboardTextApiKeyDemo() {
  return <ClipboardText text="sk_live_51H8..." />;
}

Copy Alternate Text

import { ClipboardText } from "@cloudflare/kumo";

export function ClipboardTextAlternateTextToCopyDemo() {
  return (
    <ClipboardText
      text="sk_live_***********"
      textToCopy="sk_live_51H8_abc123"
    />
  );
}

Long Text

import { ClipboardText } from "@cloudflare/kumo";

export function ClipboardTextLongDemo() {
  return <ClipboardText text="https://example.com/very/long/url/path" />;
}

With Tooltip

Shows “Copy” tooltip on hover, “Copied!” toast on click.

import { ClipboardText } from "@cloudflare/kumo";

/** With tooltip on hover showing "Copy", and anchored toast on click showing "Copied" */
export function ClipboardTextWithTooltipDemo() {
  return (
    <ClipboardText
      text="npx kumo add button"
      tooltip={{ text: "Copy", copiedText: "Copied!", side: "top" }}
    />
  );
}

API Reference