Text
Styled text with a coordinated type scale and semantic colour roles.
Text applies Luke UI typography without adding heading semantics. It needs a Luke UI theme root;
see Getting started.
<Text>The quick brown fox jumps over the lazy dog.</Text>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 elementType="p">A paragraph of supporting copy.</Text>
<Text elementType="label">Email address</Text>Size
Use size to set font size, line height, letter spacing, and Capsize trim as one coordinated step.
'300' is the default. Sizes '200' through '400' work well for running text. Smaller steps suit
compact UI labels, while larger steps are useful for display text that is not a semantic heading.
The active theme supplies the font family and values behind each fontWeight role. Use body for
copy, label for controls, heading for prominent non-heading text, and emphasis when text needs
more weight.
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
Text trims space above capitals and below the baseline by default. That makes vertical spacing more
predictable in cards and other bounded layouts. Set shouldDisableTrim only when the untrimmed line
box is required.
Truncation
Use lineClamp to constrain text to one line or up to five lines. Overflow is truncated with an
ellipsis. Trimming is disabled automatically when lineClamp is set.
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.
When to use Text or Heading
Use Heading for a section heading. It manages heading levels automatically.
Use Text with a larger size and heading or emphasis fontWeight when content should look
prominent without becoming a heading, such as a large status value.
Related components
Use Numeral to format locale-aware numbers and Emoji for an emoji with a reliable accessible label.