Text - EXPRESSO Docs

text renders text content. Its children value is required by the JSX type contract and can be text or nested text nodes. Nested text nodes are combined into one inline string, so you can give different words different styles. Styles do not inherit from a parent; set the style you need on each nested text node.

Properties

Property	Accepted value	Description
`children`	`ReactNode \| string`	Text content to render.
`style`	`StyleProperties`	Typography, color, spacing, and layout values.
`key`	`string \| number`	React key for dynamic children.
`class`	`string`	Registered style name for this node only.

Example

<text
  class="product-card-title"
  style={{
    color: "#101828",
    fontSize: 18,
    fontWeight: 700,
    maxLines: 2,
    textDecoration: "none"
  }}
>
  Lightweight everyday jacket
</text>

Nested text

Use nested text nodes for inline emphasis, labels, or links represented by text styles:

<text style={{ color: "#475467", fontSize: 16 }}>
  Order total: {" "}
  <text style={{ color: "#101828", fontWeight: 700 }}>
    €49.00
  </text>
</text>

Only text descendants participate in the rendered string. Other node types inside text, such as box, row, column, img, or button, are ignored. Use a row, column, or box when you need to place non-text content alongside text. Use maxLines and minLines when the surrounding layout needs predictable text height.