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, and caption cover supporting copy. The monospace prop swaps any variant to the mono font.
heading-2xl
heading-xl
heading-l
heading-m
heading-s
heading-xs
heading-xxs
body
default
title
label
caption
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.
Switches to the mono font family, keeping the variant size.
formatter
TextFormatterFormats the children value, e.g. number to 3,290,033.
Aligns figures in columns with tabular numerals.
Clamps to one line (true) or N lines (number) with ellipsis.
Foreground color. Use inherit to adopt a parent Box color.
align
TextAlignText alignment.
wrap
TextWrapWrapping behavior.
Renders a skeleton placeholder.
placeholderText
stringWidth source for the single-line skeleton.
Lines rendered when loading.
Strikes through the text.