Text
Styled text with token-driven typography controls.
Text expects the Luke UI theme class at the app or root level. See
Getting Started.
Use Text for styled text that should not create heading semantics.
<Text>The quick brown fox jumps over the lazy dog.</Text>
| Guidance | Practices |
|---|
| Do | Use fontSize tokens, such as 'h2', instead of arbitrary values so text stays consistent across the app. |
| Don't | Use Text for section headings. Use Heading, which manages semantic level automatically. |
Heading-like textAlert-like inline text
See the token reference below for valid color, fontFamily, fontSize, lineHeight, and
fontWeight values.
Text — Transform and decoration Emphasized text
Long content that should be line clamped to two lines.Long content truncated to one line.Untrimmed text spacing
Text — Alignment and numeric glyphs 12121.21
neutralSubtle, neutralBold, neutralDisabled, neutralBoldInverted, positive, informative,
caution, critical, inherit
sans, mono
xxsmall, xsmall, small, standard, medium, large, xlarge, xxlarge, h1, h2, h3,
h4, h5, h6
nospace, tight, loose
regular, medium, bold, inherit
none, underline, line-through, inherit
none, capitalize, uppercase, lowercase, inherit
Use Heading for actual section headings because it manages semantic level nesting automatically.
Use Text with a heading-sized fontSize token when content should look like a heading but is not
semantically one, such as a large stat number.