Orbit
Text
Source
Variant-driven typography for every text node. Pick a variant for the role, an optional color token and a semantic element via as. Colors resolve light and dark automatically.
Overview
Use Text for any text node rather than tailwind text classes. The variant sets size, weight and font family; color and alignment layer on top.
Headings use the display scale and respond to viewport width. Body, label, caption and mono cover supporting copy. Built-in loading and lineThrough states cover common UI affordances without extra markup.
Variants
Each variant maps to a typographic role. The token name is shown in mono above each sample.
heading-2xl
The quick brown fox
heading-xl
The quick brown fox
heading-l
The quick brown fox
heading-m
The quick brown fox
heading-s
The quick brown fox
heading-xs
The quick brown fox
heading-xxs
The quick brown fox
body
The quick brown fox
default
The quick brown fox
label
The quick brown fox
caption
The quick brown fox
mono
The quick brown fox
<Text variant="heading-l" as="h1">Page title</Text>
<Text variant="body">Comfortable reading copy.</Text>
<Text variant="label">Field label</Text>
<Text variant="mono">npm install</Text>
Colors
Color tokens auto-resolve for light and dark mode. inverse is shown on an inverse surface.
default
Sample text in this color
muted
Sample text in this color
disabled
Sample text in this color
accent
Sample text in this color
success
Sample text in this color
warning
Sample text in this color
danger
Sample text in this color
inverse
Sample text in this color
<Text color="default">De-emphasised copy</Text>
<Text color="accent">Accent</Text>
<Text color="success">Saved</Text>
<Text color="danger">Something went wrong</Text>
States
loading renders a skeleton, single or multi-line. lineThrough strikes the content.
loading
loading, placeholderNumberOfLines=3
lineThrough
Previous price
<Text loading placeholderText="Loading a single line of text" />
<Text loading placeholderNumberOfLines={3} />
<Text lineThrough color="default">Previous price</Text>Props
default | body | label | caption | mono | heading-2xl | heading-xl | heading-l | heading-m | heading-s | heading-xs | heading-xxs.
default | muted | disabled | accent | danger | error | warning | success | inverse | white | black | inherit.
Underlying element. DOM props for the element are forwarded.
Text alignment.
Wrapping behavior.
Render a pulsing skeleton placeholder instead of children.
placeholderText
stringSizes the single-line skeleton. Falls back to children, then Loading...
When greater than 1, renders a multi-line skeleton.
Applies a line-through text decoration.
className
stringMerged after the variant classes via tailwind-merge.