Inline Copy Text

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

/** Compact copy control for a short identifier. */
export function InlineCopyTextBasicDemo() {
  return (
    <InlineCopyText
      labels={{ copyAction: "Copy database ID", copied: "Database ID copied" }}
    >
      f86b3f10-32e9-4db7-ae95-84a1b2c3d4e5
    </InlineCopyText>
  );
}

Installation

Barrel

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

Granular

import { InlineCopyText } from "@cloudflare/kumo/components/inline-copy-text";

Use InlineCopyText for short identifiers and values in dense interfaces such as table cells. Use ClipboardText when the value should appear in a read-only, input-like field with an always-visible copy button.

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

export default function Example() {
  return (
    <InlineCopyText
      labels={{ copyAction: "Copy database ID", copied: "Database ID copied" }}
    >
      f86b3f10-32e9-4db7-ae95-84a1b2c3d4e5
    </InlineCopyText>
  );
}

Examples

Resource row

An enclosing Tailwind group can reveal the copy icon when the entire row is hovered or receives focus within.

Production database

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

/** Inline copy text inside a dense, hoverable resource row. */
export function InlineCopyTextResourceRowDemo() {
  return (
    <div className="group flex w-full max-w-xl items-center justify-between gap-4 rounded-lg bg-kumo-base px-4 py-3 ring ring-kumo-line">
      <span className="min-w-0 truncate text-sm text-kumo-default">
        Production database
      </span>
      <InlineCopyText
        labels={{
          copyAction: "Copy database ID",
          copied: "Database ID copied",
        }}
      >
        f86b3f10-32e9-4db7-ae95-84a1b2c3d4e5
      </InlineCopyText>
    </div>
  );
}

Rich content

String children are copied by default. When the children are not a string, provide the required value prop with the value to copy. InlineCopyText also accepts Text props such as variant, size, bold, truncate, and as; heading variants are not supported.

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

/** Display rich content while copying its underlying value. */
export function InlineCopyTextRichContentDemo() {
  return (
    <InlineCopyText
      value="f86b3f10-32e9-4db7-ae95-84a1b2c3d4e5"
      variant="body"
      labels={{ copyAction: "Copy database ID", copied: "Database ID copied" }}
    >
      <span>
        Database ID: <strong>f86b3f10…</strong>
      </span>
    </InlineCopyText>
  );
}

API Reference

Prop	Type	Default	Description
labels	`InlineCopyTextLabels`	-	Accessible labels for localization.
children	`ReactNode`	-	Content to display. String children are copied unless `value` is provided.
value	`string`	-	The value to copy. Required when `children` is not a string.
size	`"xs" \| "sm" \| "base" \| "lg"`	-	Text size. Supported values depend on the text variant.
bold	`boolean`	-	Whether to use medium font weight. Only applies to body text variants.
as	`"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "p" \| "span" \| "label" \| "dt" \| "dd" \| "li" \| "figcaption" \| "legend" \| "pre" \| "code" \| "em" \| "strong" \| "small" \| "abbr" \| "time"`	-	The HTML element to render. Accepts headings (`"h1"`–`"h6"`), block text (`"p"`, `"pre"`), inline text (`"span"`, `"code"`, `"em"`, `"strong"`, `"small"`, `"abbr"`, `"time"`), form-related (`"label"`, `"legend"`), list/definition (`"dt"`, `"dd"`, `"li"`), and `"figcaption"`. - Optional for `"heading"` (defaults to `"span"`). Pass the heading element that reflects this text's place in the document outline. - Required for deprecated heading variants (`"heading1"`, `"heading2"`, `"heading3"`). - Optional for body variants (defaults to `"p"`) and monospace variants (defaults to `"span"`).
truncate	`boolean`	-	Whether to truncate overflowing text with an ellipsis. Adds `truncate min-w-0` classes.
disabled	`boolean`	-	-
name	`string`	-	-
type	`"submit" \| "reset" \| "button"`	-	-
className	`string`	-	-
id	`string`	-	-
lang	`string`	-	-
title	`string`	-	-
variant	`"body" \| "secondary" \| "success" \| "error" \| "mono" \| "mono-secondary"`	`"mono-secondary"`	Text style variant. Supports every Text variant except heading variants.

Kumo