Raft 设计系统
English

组件 · 数据展示

Text

Plain typography parts — Text.Heading, Text.Sans and Text.Mono — for text that no other component holds, in the system's two typefaces.

稳定也叫 Typography, TextHeading, TextSans, TextMono, Heading
import { Text } from "@botiverse/raft-ui";
本页尚未翻译
译文完成之前，这里显示英文原文。 阅读英文版

Text sets a run of text that no other component holds: a name under an avatar, a size next to a file name, a line of help in a custom layout. Text.Sans is Space Grotesk, for what people say; Text.Mono is Space Mono, for what machines write; Text.Heading is a heading. Which typeface is for what is in Typography.

text/compositions/inline-list-row

When to use

SituationUse
Text in a layout of your own, with no component for itText
A title, a label, a description inside a componentThe component's own part: PanelTitle, FieldLabel, DescriptionTerm
Text someone wrote in MarkdownMarkdown
A name from code inside a sentenceInlineCode
An ID, a time or a count inside a sentenceText.Mono with render={<span />}, without a fill (Typography)

Anatomy

  • Text.Heading (TextHeading): an h1 to h6, from level.
  • Text.Sans (TextSans): a paragraph in Space Grotesk, sized by size: large, body, small, caption or group, the heading of a group of rows or a section in a panel (text-footnote at 700, foreground-hint, as in Typography).
  • Text.Mono (TextMono): a paragraph in Space Mono, sized by size: code, meta or tabular.

Each part takes a variant for its color. Without one, the size sets it: foreground for the larger sizes, foreground-muted for small, caption and meta, foreground-hint for group.

text/compositions/semantic-elements

Variants

VariantUse for
variant="muted"Secondary text: previews, descriptions, labels (foreground-muted)
variant="placeholder"Tertiary text: times, IDs, group headings, a missing value (foreground-hint)
variant="information", "success", "warning", "danger", "primary", "accent"Text that carries its color's meaning (Meanings of color)
size="tabular"Numbers in a column, with figures of equal width

Content

  • Follow the casing in Typography: sentence case for text, Title Case only for what people click.
  • Set IDs, times, counts and sizes in Text.Mono, even next to Space Grotesk: #25, 10:24, 24 KB.

Accessibility

  • The parts are plain elements built with Base UI useRender. Use render to choose the element the document needs, such as a span inside a row, or dt and dd in a list of terms, while keeping the style.
  • level sets both the size and the element. To keep the page's outline, set the element with render: level={6} with render={<h2 />} for a name under a profile avatar.

Rules

  • Head a section with Text.Sans size="group", in sentence case. Don't set a small label in Space Mono or in all caps: nothing in the product is in all caps (Typography).
  • Don't use variant="danger" for error text. Error text is danger-strong, from the field's error state (Field).

API

TextHeading

Prop类型默认值
level1 | 2 | 3 | 4 | 5 | 61
variant"primary" | "accent" | "warning" | "danger" | "default" | "information" | "muted" | "success" | "placeholder"
renderAllows you to replace the component's HTML element with a different tag, or compose it with another component.ReactElement | ((props, state) => ReactElement)

Also takes the attributes of its element.

TextMono

Prop类型默认值
size"code" | "meta" | "tabular""code"
variant"primary" | "accent" | "warning" | "danger" | "default" | "information" | "muted" | "success" | "placeholder"
renderAllows you to replace the component's HTML element with a different tag, or compose it with another component.ReactElement | ((props, state) => ReactElement)

Also takes the attributes of its element.

TextSans

Prop类型默认值
size"body" | "caption" | "small" | "group" | "large""body"
variant"primary" | "accent" | "warning" | "danger" | "default" | "information" | "muted" | "success" | "placeholder"
renderAllows you to replace the component's HTML element with a different tag, or compose it with another component.ReactElement | ((props, state) => ReactElement)

Also takes the attributes of its element.

相关组件