XDS — Design System

Text@xds/core v0.0.13 · XDSText

Usage

Text renders styled body text and headings from the theme. Use XDSText with a semantic type for body copy, labels, and captions, and XDSHeading for section titles that output the correct h1–h6 element.

ts
import {XDSText} from '@xds/core/Text'

Best practices

Guidance	Practices
Do	Pick a semantic type (body, label, supporting, large, code) instead of manually setting size and weight — the theme handles the details.
Do	Set accessibilityLevel on XDSHeading when the visual level differs from the document outline so screen readers announce the correct hierarchy.
Do	Use maxLines with a number to truncate long content — a tooltip appears automatically on hover so no text is lost.
Do	Enable hasTabularNumbers for columns of numeric data so digits align vertically across rows.
Don't	Override size and weight when a semantic type already matches — extra overrides fight the theme and break when themes change.
Don't	Skip heading levels in the document outline — go h1 then h2 then h3, never h1 then h3.
Don't	Use raw HTML tags like <p>, <h1>–<h6>, or <span> for text — XDSText and XDSHeading apply the correct theme tokens automatically.

Examples

Common configurations, variations, and states.

Text — Colors

All text color options (primary, secondary, disabled, placeholder, active) applied to body text to show their intended use.

Text — Heading Levels

All 6 heading levels (h1 through h6) rendered with XDSHeading to show the full type scale.

Text — Inline

Mixing body and code text inline within a single line using the default inline display mode.

Text — Truncation

Single-line and multi-line text truncation with ellipsis using maxLines in a width-constrained container.

Text — Types

All 5 semantic text types (body, large, label, supporting, code) with their default styling from the theme.

Text — Weight

The 4 font weight variants (normal, medium, semibold, bold) applied to body text.

Text — Word Break

Compares break-word and break-all word break modes on a long unbreakable string.

Text — Wrap

The 4 text-wrap modes (wrap, nowrap, balance, pretty) shown in width-constrained containers.

Usage

import {XDSText} from '@xds/core/Text'

Best practices

Guidance	Practices
Do	Pick a semantic type (body, label, supporting, large, code) instead of manually setting size and weight — the theme handles the details.
Do	Set accessibilityLevel on XDSHeading when the visual level differs from the document outline so screen readers announce the correct hierarchy.
Do	Use maxLines with a number to truncate long content — a tooltip appears automatically on hover so no text is lost.
Do	Enable hasTabularNumbers for columns of numeric data so digits align vertically across rows.
Don't	Override size and weight when a semantic type already matches — extra overrides fight the theme and break when themes change.
Don't	Skip heading levels in the document outline — go h1 then h2 then h3, never h1 then h3.
Don't	Use raw HTML tags like <p>, <h1>–<h6>, or <span> for text — XDSText and XDSHeading apply the correct theme tokens automatically.