Text

Text applies Luke UI typography without adding heading semantics. It needs a Luke UI theme root. See Getting started.

Element type

Text renders React Aria's Text component, which uses a span by default. Set elementType to choose a semantic element without changing the type treatment. Text trims Capsize space on known block elements such as p, div, headings, and blockquote, and skips it for inline or unknown element types.

<Text elementType="p">A paragraph of supporting copy.</Text>

<Text elementType="label">Email address</Text>

Typography

Pass typography to choose a style. body is the default. See Typography for the full style reference.

Set fontWeight only when you need to override the style's weight. Themes expose body, label, heading, and emphasis roles for that purpose.

Use a larger style such as display or heading1 for prominent content that is not a heading, such as a large status value.

Alignment

Set textAlign when the layout needs a different inline alignment.

Numeric glyphs

Use fontVariantNumeric to align numeric columns, format fractions and ordinals, or distinguish zero with a slash.

Trimming

Block text trims space above capitals and below the baseline by default. That makes vertical spacing more predictable in cards and other bounded layouts. Inline text skips trim so its pseudo-elements cannot interrupt the surrounding line. Set shouldDisableTrim explicitly when you need to override the element-type inference.

Truncation

Use lineClamp to constrain text to one line or up to five lines. Text truncates overflow with an ellipsis. It disables trimming automatically when you set lineClamp.

Transform and decoration

Use textTransform and textDecoration when the content calls for them. These props affect the rendered text only, so avoid using uppercase styling as a substitute for a clear label.

API