Clipboard Text
@cloudflare/kumo

Clipboard Text

A text component with a copy-to-clipboard button.

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

export function ClipboardTextBasicDemo() {
  return <ClipboardText text="0c239dd2" />;
}

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" />;
}

Examples

Short Text

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

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

API Key

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

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

Copy Alternate Text

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

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

Long Text

https://example.com/very/long/url/path
 
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.

npx kumo add button
 
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

PropTypeDefaultDescription
size"sm" | "base" | "lg""lg"Size of the clipboard text field. - `"sm"` — Small clipboard text for compact UIs - `"base"` — Default clipboard text size - `"lg"` — Large clipboard text for prominent display
text*string-The text to display and copy to clipboard.
textToCopystring-If provided, this text will be copied to clipboard instead of the `text` prop.
classNamestring-Additional CSS classes merged via `cn()`.
tooltipobject-Tooltip config. Shows tooltip on hover, anchored toast on click.
labelsobject-Accessible labels for i18n.