0c239dd2
<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
<ClipboardText text="abc123" />API Key
sk_live_51H8...
<ClipboardText text="sk_live_51H8..." />Long Text
https://example.com/very/long/url/path
<ClipboardText text="https://example.com/very/long/url/path" />With Tooltip
Shows "Copy" tooltip on hover, "Copied!" toast on click.
npx kumo add button
<ClipboardText
text="npx kumo add button"
tooltip={{ text: "Copy", copiedText: "Copied!", side: "top" }}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| 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. |
| className | string | - | Additional CSS classes merged via `cn()`. |
| tooltip | object | - | Tooltip config. Shows tooltip on hover, anchored toast on click. |
| labels | object | - | Accessible labels for i18n. |