Text - Kumo

Headingtext-lg (16px)

Heading large

text-xl (20px)

Body

text-base (14px)

Body bold

text-base (14px)

Body lg

text-lg (16px)

Body sm

text-sm (13px)

Body xs

text-xs (12px)

Body secondary

text-base (14px)

Monospacetext-sm (13px)

Monospace lgtext-base (14px)

Monospace secondarytext-sm (13px)

Success

text-base (14px)

Error

text-base (14px)

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

export function TextVariantsDemo() {
  return (
    <div className="grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
        <Text variant="heading">Heading</Text>
        <Text variant="mono-secondary">text-lg (16px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
        <Text variant="heading" size="lg" as="h2">
          Heading large
        </Text>
        <Text variant="mono-secondary">text-xl (20px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
        <Text>Body</Text>
        <Text variant="mono-secondary">text-base (14px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
        <Text bold>Body bold</Text>
        <Text variant="mono-secondary">text-base (14px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
        <Text size="lg">Body lg</Text>
        <Text variant="mono-secondary">text-lg (16px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
        <Text size="sm">Body sm</Text>
        <Text variant="mono-secondary">text-sm (13px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
        <Text size="xs">Body xs</Text>
        <Text variant="mono-secondary">text-xs (12px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
        <Text variant="secondary">Body secondary</Text>
        <Text variant="mono-secondary">text-base (14px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
        <Text variant="mono">Monospace</Text>
        <Text variant="mono-secondary">text-sm (13px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
        <Text variant="mono" size="lg">
          Monospace lg
        </Text>
        <Text variant="mono-secondary">text-base (14px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
        <Text variant="mono-secondary">Monospace secondary</Text>
        <Text variant="mono-secondary">text-sm (13px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
        <Text variant="success">Success</Text>
        <Text variant="mono-secondary">text-base (14px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
        <Text variant="error">Error</Text>
        <Text variant="mono-secondary">text-base (14px)</Text>
      </div>
    </div>
  );
}

安装

桶式导出

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

细粒度导入

import { Text } from "@cloudflare/kumo/components/text";

用法

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

export default function Example() {
  return <Text>Your content here</Text>;
}

语义化 HTML

variant 属性只控制视觉样式，并不决定渲染出的 HTML 元素。标题变体必须提供 as 属性，以免真实的章节标题被静默排除在文档大纲之外。正文与等宽变体具有合理的默认值（分别渲染为 <p> 和 <span>）， as 为可选。

// Heading variants REQUIRE `as` — TypeScript will flag usages missing it
<Text variant="heading1">Page Title</Text> // Doesn't compile

// Real section headings (contribute to the document outline)
<Text variant="heading1" as="h1">Page Title</Text>
<Text variant="heading2" as="h2">Section Title</Text>

// Decorative heading-styled text that is NOT a section heading
<Text variant="heading1" as="span">Big bold card label</Text>

// Visually one size, semantically another
<Text variant="heading1" as="h3">Visually large, but semantically h3</Text>

as 属性可接受："h1" 到 "h6"、"p" 和 "span"。正文变体默认为 "p"，等宽变体默认为 "span"，标题变体则没有默认值 —— 你必须明确选择。

限制

bold 与 size 属性特意限制为仅在 base、secondary、success 和 error 正文变体上可用。

<Text size="sm" bold>Body</Text>
<Text variant="secondary" bold>Body secondary</Text>
<Text variant="success" size="lg">Success</Text>
<Text variant="error">Error</Text>

等宽变体（mono 和 mono-secondary）只能将 size 设置为 lg，且不能使用 bold 属性：

<Text variant="mono">Monospace</Text>
<Text variant="mono" size="lg">Monospace</Text>
<Text variant="mono" bold>Monospace</Text> // Doesn't compile

标题变体（即 heading1、heading2 和 heading3）完全不能使用这些属性：

<Text variant="heading1" bold>
  Heading 1
</Text> // Doesn't compile

文本截断

使用 truncate 属性可以用省略号截断溢出的文本。它会添加 truncate min-w-0 类，当 Text 位于 flex 或 grid 容器内时尤其有用。

This is a long piece of text that will be truncated with an ellipsis when it overflows its container.

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

export function TextTruncateDemo() {
  return (
    <div className="w-64 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
      <Text truncate>
        This is a long piece of text that will be truncated with an ellipsis
        when it overflows its container.
      </Text>
    </div>
  );
}

<Text truncate>This is a long piece of text that will be truncated...</Text>

API 参考

Prop	Type	Default	Description
variant	`"heading" \| "heading1" \| "heading2" \| "heading3" \| "body" \| "secondary" \| "success" \| "error" \| "mono" \| "mono-secondary"`	`"body"`	Text style variant. Determines color, font, and weight. - `"heading"` — Heading text (16px by default, 20px with `size="lg"`; semibold) - `"heading1"` — Deprecated; use `"heading"` (30px, semibold) - `"heading2"` — Deprecated; use `"heading"` (24px, semibold) - `"heading3"` — Deprecated; use `"heading"` (16px, semibold) - `"body"` — Default body text - `"secondary"` — Muted text for secondary information - `"success"` — Success state text - `"error"` — Error state text - `"mono"` — Monospace text for code - `"mono-secondary"` — Muted monospace text
size	`"xs" \| "sm" \| "base" \| "lg"`	`"base"`	Text size. Supported values depend on the variant: - `"heading"` — 16px when omitted, or 20px with `"lg"` - Body variants — `"xs"` (12px), `"sm"` (13px), `"base"` (14px), or `"lg"` (16px) - Monospace variants — 13px when omitted, or 14px with `"lg"`
bold	`boolean`	-	Whether to use bold font weight (only applies to body variants).
truncate	`boolean`	-	Whether to truncate overflowing text with an ellipsis. Adds `truncate min-w-0` classes.
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"`).
children	`ReactNode`	-	Text content.