Astryx Design System

Text@astryxdesign/core v0.0.15 · Text

Usage

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

ts
import {Text} from '@astryxdesign/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 Heading 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 — Text and Heading apply the correct theme tokens automatically.
Don't	Pass a `variant` prop — Text does not have a `variant` prop. Use `type` for semantic styling (body, label, large, supporting, code) or use Heading for headings.
Don't	Use Text for headings — use Heading with a `level` prop (1–6) for section titles and headings.

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 Heading 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

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

import {Text} from '@astryxdesign/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 Heading 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 — Text and Heading apply the correct theme tokens automatically.
Don't	Pass a `variant` prop — Text does not have a `variant` prop. Use `type` for semantic styling (body, label, large, supporting, code) or use Heading for headings.
Don't	Use Text for headings — use Heading with a `level` prop (1–6) for section titles and headings.