Orbit
Typography
Source
Text is the variant-driven primitive for every text node. Choose a variant for size and weight, a color token for tone, and an as element for semantics.
Type scale
Headings use the display face at the larger sizes; body, label, caption, and mono cover supporting copy.
heading-2xl
heading-xl
heading-l
heading-m
heading-s
heading-xs
heading-xxs
body
default
label
caption
mono
Colors
Color tokens convey tone and status. Headings always render at full contrast regardless of color.
default
The quick brown fox jumps over the lazy dog
muted
The quick brown fox jumps over the lazy dog
disabled
The quick brown fox jumps over the lazy dog
accent
The quick brown fox jumps over the lazy dog
success
The quick brown fox jumps over the lazy dog
warning
The quick brown fox jumps over the lazy dog
danger
The quick brown fox jumps over the lazy dog
error
The quick brown fox jumps over the lazy dog
Alignment and wrap
Control flow with align and wrap. Use balance for short headings and pretty for long paragraphs.
The wrap prop maps to CSS text-wrap. Use balance to even out short, multi-line headings and pretty to avoid orphans in body copy.
Balanced, centered copy that wraps evenly across its lines
<Text variant="body" wrap="balance" align="center">
Balanced, centered copy
</Text>
Props
The full Text API.
Underlying HTML element.
Type-scale style.
Foreground color. Use inherit to adopt a parent Box color.
Text alignment.
Wrapping behavior.
Renders a skeleton placeholder.
placeholderText
stringWidth source for the single-line skeleton.
Lines rendered when loading.
Strikes through the text.