Text – Once UI

The Text component provides consistent typography throughout your UI, with support for variants, color tokens, alignment, and spacing. It is typically used for body content, labels, descriptions, and captions.

Text

This is default body text.This is a strong label.This is small, strong text.

<Text variant="body-default-m">
  This is default body text.
</Text>
<Text variant="label-strong-s">
  This is a strong label.
</Text>
<Text size="s" weight="strong">
  This is small, strong text.
</Text>

Variants

Use variant to apply a named combination of type, weight, and size.

Variants

Label Default SLabel Default MLabel Default LLabel Strong SLabel Strong MLabel Strong LBody Default XSBody Default SBody Default MBody Default LBody Default XLBody Strong XSBody Strong SBody Strong MBody Strong LBody Strong XLCode Default XSCode Default SCode Default MCode Default LCode Default XLCode Strong XSCode Strong SCode Strong MCode Strong LCode Strong XL

<Text variant="label-default-s">Label Default S</Text>
<Text variant="body-strong-xl">Body Strong XL</Text>
<Text variant="code-default-m">Code Default M</Text>

Font family

You can override the default font-family that comes with the variant with the family prop.

Font family

Body Strong M, but monospace

<Text variant="body-strong-m" family="code">
  Body Strong M, but monospace
</Text>

Font weight

You can override the default font-weight inside a variant with the weight prop.

Font weight

Body Strong XL, but this is default

<Text variant="heading-strong-xl">
  Text Strong XL, <Text weight="default">but this is default</Text>
</Text>

Colors

Text color can be set using onBackground or onSolid. Without either, text takes the strong neutral of the theme it sits in, so a theme="dark" section on a light page gets light text.

Colors

Neutral weak

Accent weak

Brand weak

Neutral medium

Accent medium

Brand medium

<Text onBackground="neutral-strong">
  Neutral strong
</Text>
<Text onBackground="accent-weak">
  Accent weak
</Text>
<Text onSolid="brand-medium">
  On brand medium
</Text>

Opacity

Control text visibility with the opacity prop, accepting values from 0 to 100.

Opacity

Opacity 100Opacity 70Opacity 40Opacity 10

<Text opacity={100}>
  Opacity 100
</Text>
<Text opacity={70}>
  Opacity 70
</Text>
<Text opacity={40}>
  Opacity 40
</Text>
<Text opacity={10}>
  Opacity 10
</Text>

Alignment

Set horizontal alignment with the align prop.

Alignment

Left alignedCenter alignedRight aligned

<Text>
  Left aligned
</Text>
<Text align="center">
  Center aligned
</Text>
<Text align="right">
  Right aligned
</Text>

Wrapping

Control how the text wraps using the wrap prop.

Wrapping

This text uses normal wrapping behaviorThis text uses balance wrapping for optimal readability

<Text>
  This text uses normal wrapping behavior
</Text>
<Text wrap="balance">
  This text uses balance wrapping for optimal readability
</Text>

Spacing

Use margin and padding props to control layout spacing.

Spacing

With paddingWith bottom marginWith horizontal and vertical padding

<Text padding="8">
  With padding
</Text>
<Text marginBottom="16">
  With bottom margin
</Text>
<Text paddingX="12" paddingY="8">
  With horizontal and vertical padding
</Text>

Semantic HTML

Control the rendered tag using the as prop.

Semantic HTML

Rendered as a paragraph

Rendered as a labelRendered as strong

<Text as="p">Rendered as a paragraph</Text>
<Text as="label">Rendered as a label</Text>
<Text as="strong">Rendered as strong</Text>

API reference

	Type	Default
as	ElementType	"span"
variant	TextVariant	—
size	xssmlxl	—
weight	defaultnormalmediumstrong	—
family	displayheadingbodylabelcode	—
onBackground	`${ColorScheme}-${ColorWeight}`	—
onSolid	`${ColorScheme}-${ColorWeight}`	—
opacity	Opacity	100
align	leftcenterrightjustify	—
wrap	normalnowrapbalance	—
truncate	boolean	—
padding	SpacingTokennumber	—
paddingX	SpacingTokennumber	—
paddingY	SpacingTokennumber	—
paddingLeft	SpacingTokennumber	—
paddingRight	SpacingTokennumber	—
paddingTop	SpacingTokennumber	—
paddingBottom	SpacingTokennumber	—
margin	SpacingTokennumber	—
marginX	SpacingTokennumber	—
marginY	SpacingTokennumber	—
marginLeft	SpacingTokennumber	—
marginRight	SpacingTokennumber	—
marginTop	SpacingTokennumber	—
marginBottom	SpacingTokennumber	—
children	React.ReactNode	—
className	string	—
style	React.CSSProperties	—
…and every React.HTMLAttributes prop	inherited	—