# Text

- Page: https://jiguang132.com/resources/astryx/docs/text
- Resource: Astryx (https://jiguang132.com/resources/astryx.md)
- All guides: https://jiguang132.com/resources/astryx/docs.md

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.

## Installation

```bash
npm install @astryxdesign/core@0.7.1 @astryxdesign/theme-neutral@0.7.1 @stylexjs/stylex@0.19.0
```

Requires React 19+, base CSS and a Theme provider. See [Setup](/resources/astryx/docs/getting-started).

## Text

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.

| Prop | Type | Default | Description |
|---|---|---|---|
| type | 'body' \| 'large' \| 'label' \| 'supporting' \| 'code' \| 'display-1' \| 'display-2' \| 'display-3' \| 'inherit' | '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 |  | 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' | 'inline' | Display type. Silently overridden to 'block' when maxLines > 0 or hasCapsize is true. |
| as | 'span' \| 'p' \| 'div' \| 'label' | 'span' | HTML element to render. |
| maxLines | number | 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' | 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' | 'start' | Text alignment (justification). Uses logical values (start/end) for i18n/RTL compatibility. |
| hasCapsize | boolean | false | Enable optical alignment using text-box-trim. Forces block display. |
| hasStrikethrough | boolean | false | Apply strikethrough text decoration. |
| hasTabularNumbers | boolean | 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={{}}. |

### Usage guidance

- 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.
- Avoid: Override size and weight when a semantic type already matches; extra overrides fight the theme and break when themes change.
- Avoid: Skip heading levels in the document outline; go h1 then h2 then h3, never h1 then h3.
- Avoid: Use raw HTML tags like <p>, <h1>–<h6>, or <span> for text; Text and Heading apply the correct theme tokens automatically.
- Avoid: 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.
- Avoid: Use Text for headings; use Heading with a `level` prop (1–6) for section titles and headings.

### Theming API

```json
{
  "targets": [
    {
      "className": "astryx-heading",
      "visualProps": [
        "level",
        "color",
        "type",
        "weight"
      ]
    },
    {
      "className": "astryx-text",
      "visualProps": [
        "type",
        "size",
        "color"
      ]
    }
  ]
}
```

## Heading



### Anatomy

- **Text**: Polymorphic text element that renders the supplied content with themed typography.
- **Heading**: Referenced Heading member that renders the supplied content as a semantic h1–h6 element.
- **Truncation tooltip**: Tooltip-owned surface available only when Text or Heading is measured as truncated and truncation tooltips are enabled.


## Examples

- Text: 
- 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.

---

Index of all JGuang resources: https://jiguang132.com/llms.txt