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" />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()`. |