Text

When to useLink to "When to use"

• body (default): a short line of interface text. It takes the size md and the colour around it.
• lead: the intro sentence under a page or section title.
• caption: secondary detail under or beside something: a timestamp, a hint, a figure caption.
• eyebrow: the small uppercase label above a title or a group.
• code: a command, a file name or an identifier inside a line of text.
• numeric: values that sit in a column or change in place, so the digits do not jump.

Use something else when:

• the text is rendered Markdown or several paragraphs: Prose
• it is a title: Heading
• it is a status or category label with a background: Badge
• it is a block of code: CodeBlock
• it is a keyboard key: Kbd
• it labels a form control: the control's own label prop (TextField and the other fields)

UsageLink to "Usage"

import { Text } from "@arshad-shah/cynosure";

<Text>Last saved 2 minutes ago</Text>
<Text as="p" variant="lead">Everything that changed this month.</Text>
<Text variant="eyebrow">Release notes</Text>
<Text variant="caption" tone="danger">Could not save</Text>
<Text numeric weight="bold" size="xl">1,284.50</Text>
<Text as="p" truncate={2}>{description}</Text>
<Text as="time" dateTime="2026-03-12" variant="caption">12 March</Text>

Sizes, weights and tonesLink to "Sizes, weights and tones"

size maps to the six font size tokens, weight to the three weight tokens. A variant only sets defaults: a size, weight or tone you give always wins.

tone="inherit" (the default for body and code) takes the surrounding colour. neutral is the ink and muted the secondary ink. The other tones use the readable text colour of that tone.

TruncationLink to "Truncation"

truncate keeps one line and ends it with an ellipsis. A number keeps that many lines. The text is cut to the width of its container, so the container needs a width.

WrappingLink to "Wrapping"

wrap="pre" keeps spaces and line breaks as written (a query, a log line) and still wraps at the container's edge. wrap="break" breaks a long unbroken string, such as an id, a hash or a URL, anywhere rather than letting it overflow. truncate wins over both.

Values and nestingLink to "Values and nesting"

numeric switches to tabular figures. A Text directly inside another Text keeps the outer size, weight and face, and changes only what it is given, so a value or a strong word inside a lead stays a lead.

PropsLink to "Props"

Behaviour and accessibilityLink to "Behaviour and accessibility"

Text is not interactive, so it has no keyboard behaviour.

• Meaning: Text adds no role. Pick the element for what the text is.
• Truncated text: the full text stays in the DOM and is read by screen readers. Sighted users cannot reach the hidden part, so do not truncate text people must read.
• Eyebrow: the uppercase is visual only. The text in the DOM keeps its case.
• Contrast: every tone and the muted variants keep 4.5:1 on the page background (tested).
• Host CSS: host rules for span and div (weight, case, letter spacing, colour, size, line height) do not change Text (tested).

TouchLink to "Touch"

Text is not pressable, so it has no hit area. A label passes a tap on to its control, which has its own hit area.

ThemingLink to "Theming"

Tokens: --cy-text-line-height, --cy-text-lead-size, --cy-text-caption-size, --cy-text-eyebrow-size, --cy-text-eyebrow-tracking and --cy-text-muted. Sizes, weights, faces and tone colours come from the global tokens (--cy-font-size-*, --cy-font-weight-*, --cy-font-sans, --cy-font-mono, --cy-color-*-text).

createTheme({ components: { text: { leadSize: "18px", eyebrowTracking: ".12em" } } });

className and style are for layout only (margin, placement, width). Change the look through tokens so every product stays consistent.

RelatedLink to "Related"

Heading · Prose · Badge · Kbd · CodeBlock