Text·component·@astryxdesign/core

Text

Semantic body text component that renders text with type-based styling from the theme, with optional truncation, decoration, and layout props.

Open in Playground @astryxdesign/core/Text

Showcases and examples

9 documented examples

Text

Text API entry

Open Playground ↗

Preview loads on approachPreview loads on approach

Exact source · text-showcase

// Copyright (c) Meta Platforms, Inc. and affiliates.

'use client';

import {Text} from '@astryxdesign/core/Text';
import {Stack} from '@astryxdesign/core/Stack';

export default function TextShowcase() {
  return (
    <Stack direction="vertical" gap={2}>
      <Text type="body">Body: The bulk of content</Text>
      <Text type="large">Large: Emphasized content</Text>
      <Text type="label">Label: Form and chart labels</Text>
      <Text type="supporting">Supporting: Helper text</Text>
      <Text type="code">Code: const x = 42;</Text>
    </Stack>
  );
}

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.

Pick a semantic type (body, label, supporting, large, code) instead of manually setting size and weight; the theme handles the details.
Set accessibilityLevel on Heading when the visual level differs from the document outline so screen readers announce the correct hierarchy.
Use maxLines with a number to truncate long content; a tooltip appears automatically on hover so no text is lost.
Enable hasTabularNumbers for columns of numeric data so digits align vertically across rows.
Override size and weight when a semantic type already matches; extra overrides fight the theme and break when themes change.
Skip heading levels in the document outline; go h1 then h2 then h3, never h1 then h3.
Use raw HTML tags like <p>, <h1>–<h6>, or <span> for text; Text and Heading apply the correct theme tokens automatically.
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.
Use Text for headings; use Heading with a level prop (1–6) for section titles and headings.

Typed props

Prop	Type and behavior
`type`	`'body' \| 'large' \| 'label' \| 'supporting' \| 'code' \| 'display-1' \| 'display-2' \| 'display-3' \| 'inherit'` · default 'body' Semantic text type. Determines size, weight, and line-height from the theme. 'inherit' takes all three from the surrounding text instead. Themes may add custom types. Note: this prop is called `type`, not `variant`.
`children`	`ReactNode` · required Text content.
`size`	`'4xs' \| '3xs' \| '2xs' \| 'xsm' \| 'sm' \| 'base' \| 'lg' \| 'xl' \| '2xl' \| '3xl' \| '4xl'` Explicit font size override. Overrides the size from `type` but preserves other type properties. Prefer using `type` alone.
`color`	`'primary' \| 'secondary' \| 'disabled' \| 'placeholder' \| 'accent' \| 'inherit'` Text color. Defaults to 'secondary' for the 'supporting' type, 'primary' for all others. Themes may add custom colors.
`weight`	`'normal' \| 'medium' \| 'semibold' \| 'bold'` Font weight override.
`display`	`'inline' \| 'block'` · default 'inline' Display type. Silently overridden to 'block' when maxLines > 0 or hasCapsize is true.
`as`	`'span' \| 'p' \| 'div' \| 'label'` · default 'span' HTML element to render.
`maxLines`	`number` · default 0 Maximum lines before truncation. 0 means no truncation. When set, shows a tooltip on hover if content is truncated.
`hasTruncateTooltip`	`boolean \| 'above' \| 'below' \| 'start' \| 'end'` · default true Controls tooltip behavior for truncated text. true shows the tooltip at the default position, false disables it, or a placement string ('above' \| 'below' \| 'start' \| 'end') sets a specific position.
`wordBreak`	`'break-word' \| 'break-all'` Word break behavior when truncating. Defaults to 'break-all' for single-line truncation, 'break-word' otherwise.
`textWrap`	`'wrap' \| 'nowrap' \| 'balance' \| 'pretty'` Text wrapping behavior.
`justify`	`'start' \| 'center' \| 'end'` · default 'start' Text alignment (justification). Uses logical values (start/end) for i18n/RTL compatibility.
`hasCapsize`	`boolean` · default false Enable optical alignment using text-box-trim. Forces block display.
`hasStrikethrough`	`boolean` · default false Apply strikethrough text decoration.
`hasTabularNumbers`	`boolean` · default false Use tabular (monospace) numbers for aligned numeric data.
`id`	`string` HTML id attribute.
`xstyle`	`StyleXStyles` StyleX styles for layout customization (margins, positioning, sizing). Must be a stylex.create() value: not an inline style object like style={{}}.

Anatomy

Text · required

Polymorphic text element that renders the supplied content with themed typography.

Heading · optional

Referenced Heading member that renders the supplied content as a semantic h1–h6 element.

Truncation tooltip · optional

Tooltip-owned surface available only when Text or Heading is measured as truncated and truncation tooltips are enabled.

Theming

Targets

astryx-heading

Visual props: level, color, type, weight

astryx-text

Visual props: type, size, color