Text & Heading

Renders styled text with optional truncation, tooltip, and typographic presets.

Examples

Body

Silver UI text follows the system font and local color tokens.

<Text>Silver UI text follows the system font and local color tokens.</Text>

Large

Large text for introductory or emphasized paragraphs.

<Text
  type="large"
>
  Large text for introductory or emphasized paragraphs.
</Text>

Label

Field label

<Text type="label">Field label</Text>

Supporting

Supporting copy uses the muted foreground token by default.

<Text
  type="supporting"
>
  Supporting copy uses the muted foreground token by default.
</Text>

Code

const status = "ready";

<Text type="code">const status = "ready";</Text>

Bold

Bold text for strong emphasis.

<Text weight="bold">Bold text for strong emphasis.</Text>

Strikethrough

This text has been struck through.

<Text hasStrikethrough>This text has been struck through.</Text>

Tabular Numbers

1,234.5678,901.23456.00

<div style={{textAlign: 'right', width: 120}}>
  <Text {...args}>1,234.56</Text>
  <Text {...args}>78,901.23</Text>
  <Text {...args}>456.00</Text>
</div>

Truncated Single Line

This text is clamped to a single line with an ellipsis, demonstrating how overflow is handled when the content exceeds the available horizontal space.

<Text
  as="p"
  maxLines={1}
>
  This text is clamped to a single line with an ellipsis, demonstrating how overflow is handled when the content exceeds the available horizontal space.
</Text>

Truncated

This paragraph is intentionally long enough to demonstrate multiline clamping while preserving the full text for a truncation tooltip when the content overflows its container. It continues with additional sentences to ensure the text reliably exceeds two lines across a range of viewport widths, including wider desktop screens where a single line can accommodate a significant amount of text before wrapping.

<Text
  as="p"
  maxLines={2}
>
  This paragraph is intentionally long enough to demonstrate multiline clamping while preserving the full text for a truncation tooltip when the content overflows its container. It continues with additional sentences to ensure the text reliably exceeds two lines across a range of viewport widths, including wider desktop screens where a single line can accommodate a significant amount of text before wrapping.
</Text>

Heading examples

Levels

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5

Heading level 6

<div>
  <Heading level={1}>Heading level 1</Heading>
  <Heading level={2}>Heading level 2</Heading>
  <Heading level={3}>Heading level 3</Heading>
  <Heading level={4}>Heading level 4</Heading>
  <Heading level={5}>Heading level 5</Heading>
  <Heading level={6}>Heading level 6</Heading>
</div>

Muted

Secondary heading

<Heading level={3} color="secondary">Secondary heading</Heading>

Accessibility Level

Visually h2, announced as level 4

<Heading
  level={2}
  accessibilityLevel={4}
>
  Visually h2, announced as level 4
</Heading>

Truncated Single Line

A long heading that can be clamped to a single line in constrained layouts when the content is too wide

<Heading
  level={2}
  maxLines={1}
>
  A long heading that can be clamped to a single line in constrained layouts when the content is too wide
</Heading>

Truncated Multi Line

A heading that wraps to multiple lines but is clamped after two lines when the content is long enough to exceed the available space in the container, which triggers the truncation tooltip on hover.

<Heading
  level={3}
  maxLines={2}
>
  A heading that wraps to multiple lines but is clamped after two lines when the content is long enough to exceed the available space in the container, which triggers the truncation tooltip on hover.
</Heading>

API

Text

Renders styled text with optional truncation, tooltip, and typographic presets.

Prop	Type	Default	Description
as	"div" | "label" | "p" | "span" | "time"	'span'	HTML element to render.
children*	ReactNode	—	Text content.
className	string	—	Additional CSS class names applied to the element.
color	"primary" | "secondary" | "disabled" | "inherit" | "placeholder" | "active"	—	Text color token.
data-testid	string	—	Test ID applied to the element.
display	"inline" | "block"	'inline'	Display mode of the element.
hasStrikethrough	boolean	false	Whether to render text with a strikethrough line.
hasTabularNumbers	boolean	false	Whether to use tabular (monospaced) number figures.
maxLines	number	0	Maximum number of visible lines before truncation. 0 disables truncation.
ref	Ref<HTMLElement>	—	Ref forwarded to the rendered element.
size	"sm" | "md" | "lg" | "inherit" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl"	—	Font size token.
style	CSSProperties	—	Inline styles applied to the element.
textWrap	"wrap" | "nowrap" | "balance" | "pretty"	—	CSS text-wrap value.
truncateTooltip	false | TruncateTooltipPlacement	'above'	Tooltip placement shown when text is truncated. Set to false to disable.
type	"body" | "code" | "label" | "large" | "supporting" | "inherit" | "display-1" | "display-2" | "display-3"	'body'	Typographic preset that determines font size and line height.
weight	"medium" | "inherit" | "normal" | "semibold" | "bold"	—	Font weight.
wordBreak	"break-word" | "break-all"	—	Word-break strategy.

Heading

Renders a semantic heading element (h1-h6) with typographic styling and optional truncation.

Prop	Type	Default	Description
accessibilityLevel	1 | 2 | 3 | 4 | 5 | 6	—	Overrides the ARIA heading level independently of the rendered element.
children*	ReactNode	—	Heading content.
className	string	—	Additional CSS class names applied to the heading.
color	"primary" | "secondary" | "disabled" | "inherit" | "placeholder" | "active"	'primary'	Text color token.
data-testid	string	—	Test ID applied to the heading.
display	"inline" | "block"	'block'	Display mode of the heading.
hasStrikethrough	boolean	false	Whether to render text with a strikethrough line.
level*	1 | 2 | 3 | 4 | 5 | 6	—	Semantic heading level that determines the rendered h1-h6 element.
maxLines	number	0	Maximum number of visible lines before truncation. 0 disables truncation.
ref	Ref<HTMLHeadingElement>	—	Ref forwarded to the heading element.
style	CSSProperties	—	Inline styles applied to the heading.
textWrap	"wrap" | "nowrap" | "balance" | "pretty"	—	CSS text-wrap value.
truncateTooltip	false | HeadingTruncateTooltipPlacement	'above'	Tooltip placement shown when text is truncated. Set to false to disable.
wordBreak	"break-word" | "break-all"	—	Word-break strategy.