Typography

Font Family

Use the fontFamily prop to set the font family of a text element.

<Text fontFamily="mono">Hello World</Text>

Prop	CSS Property	Token Category
fontFamily	font-family	fonts

Font Size

Use the fontSize prop to set the font size of a text element.

// hardcoded values
<Text fontSize="12px">Hello World</Text>
<Text fontSize="10rem">Hello World</Text>

// token values
<Text fontSize="xs">Hello World</Text>
<Text fontSize="4xl">Hello World</Text>
<Text fontSize="5xl">Hello World</Text>

Prop	CSS Property	Token Category
fontSize	font-size	fonts

Text Styles

Use the textStyle prop to apply both a font size, line height, and letter spacing composition at once.

<Text textStyle="xs">Hello World</Text>
<Text textStyle="sm">Hello World</Text>
<Text textStyle="md">Hello World</Text>
<Text textStyle="lg">Hello World</Text>
<Text textStyle="xl">Hello World</Text>
<Text textStyle="2xl">Hello World</Text>
<Text textStyle="3xl">Hello World</Text>
<Text textStyle="4xl">Hello World</Text>
<Text textStyle="5xl">Hello World</Text>

Prop	Config
textStyle	theme.textStyles

Font Style

Use the fontStyle prop to set the font style of a text element.

<Text fontStyle="italic">Hello World</Text>

Prop	CSS Property	Token Category
fontStyle	font-style	none

Font Weight

Use the fontWeight prop to set the font weight of a text element.

// hardcoded values
<Text fontWeight="600">Hello World</Text>

// token values
<Text fontWeight="semibold">Hello World</Text>

Prop	CSS Property	Token Category
fontWeight	font-weight	fontWeights

Font Variant Numeric

Use the fontVariantNumeric prop to set the font variant numeric of a text element.

<Text fontVariantNumeric="lining-nums">Hello World</Text>

Prop	CSS Property	Token Category
fontVariantNumeric	font-variant-numeric	none

Letter Spacing

Use the letterSpacing prop to set the letter spacing of a text element.

// hardcoded values
<Text letterSpacing="0.1rem">Hello World</Text>

// token values
<Text letterSpacing="tight">Hello World</Text>
<Text letterSpacing="wide">Hello World</Text>
<Text letterSpacing="wider">Hello World</Text>
<Text letterSpacing="widest">Hello World</Text>

Prop	CSS Property	Token Category
letterSpacing	letter-spacing	letterSpacings

Truncation

Use the truncate prop to truncate text.

<Text truncate>Lorem ipsum dolor sit amet...</Text>

Prop	CSS Property	Token Category
truncate	text-overflow	none

Line Clamp

Use the lineClamp prop to truncate multi-line text. Set lineClamp to none to disable truncation.

<Text lineClamp="2">Lorem ipsum dolor sit amet...</Text>

// revert truncation
<Text lineClamp="none">Lorem ipsum dolor sit amet...</Text>

Prop	CSS Property	Token Category
lineClamp	webkit-line-clamp	none

Line Height

Use the lineHeight prop to set the line height of a text element.

// hardcoded values
<Text lineHeight="1.5">Hello World</Text>

// token values
<Text lineHeight="tall">Hello World</Text>

Prop	CSS Property	Token Category
lineHeight	line-height	lineHeights

Text Align

Use the textAlign prop to set the text alignment of a text element.

<Text textAlign="left">Hello World</Text>
<Text textAlign="center">Hello World</Text>
<Text textAlign="right">Hello World</Text>
<Text textAlign="justify">Hello World</Text>

Prop	CSS Property	Token Category
textAlign	text-align	none

Text Color

Use the color prop to set the color of a text element.

<Text color="red">Hello World</Text>

Prop	CSS Property	Token Category
color	color	colors

Text Decoration

Use the textDecoration or textDecor prop to set the text decoration of a text element.

<Text textDecoration="underline">Hello World</Text>

Prop	CSS Property	Token Category
textDecor, textDecoration	text-decoration	none

Text Decoration Color

Use the textDecorationColor prop to set the text decoration color of a text element.

<Text textDecoration="underline" textDecorationColor="red">
  Hello World
</Text>

Prop	CSS Property	Token Category
textDecorationColor	text-decoration-color	colors

Text Decoration Style

Use the textDecorationStyle prop to set the text decoration style of a text element.

<Text textDecoration="underline" textDecorationStyle="dashed">
  Hello World
</Text>

Prop	CSS Property	Token Category
textDecorationStyle	text-decoration-style	none

Text Decoration Thickness

Use the textDecorationThickness prop to set the text decoration thickness of a text element.

<Text textDecoration="underline" textDecorationThickness="1px">
  Hello World
</Text>

Prop	CSS Property	Token Category
textDecorationThickness	text-decoration-thickness	none

Text Underline Offset

Use the textUnderlineOffset prop to set the text underline offset of a text element.

<Text textDecoration="underline" textUnderlineOffset="1px">
  Hello World
</Text>

Prop	CSS Property	Token Category
textUnderlineOffset	text-underline-offset	none

Text Transform

Use the textTransform prop to set the text transform of a text element.

<Text textTransform="uppercase">Hello World</Text>

Prop	CSS Property	Token Category
textTransform	text-transform	none

Text Overflow

Use the textOverflow prop to set the text overflow of a text element.

<Text textOverflow="ellipsis">Hello World</Text>

Prop	CSS Property	Token Category
textOverflow	text-overflow	none

Text Shadow

Use the textShadow prop to set the text shadow of a text element.

<Text textShadow="0 0 1px red">Hello World</Text>

Prop	CSS Property	Token Category
textShadow	text-shadow	shadows

Text Indent

Use the textIndent prop to set the text indent of a text element.

// hardcoded values
<Text textIndent="1rem">Hello World</Text>

// token values
<Text textIndent="3">Hello World</Text>

Prop	CSS Property	Token Category
textIndent	text-indent	spacing

Vertical Align

Use the verticalAlign prop to set the vertical alignment of a text element.

<Text verticalAlign="top">Hello World</Text>

Prop	CSS Property	Token Category
verticalAlign	vertical-align	none

White Space

Use the whiteSpace prop to set the white space of a text element.

<Text whiteSpace="nowrap">Hello World</Text>

Prop	CSS Property	Token Category
whiteSpace	white-space	none

Word Break

Use the wordBreak prop to set whether line breaks appear wherever the text would otherwise overflow its content box.

<Text wordBreak="break-all">Hello World</Text>

Prop	CSS Property	Token Category
wordBreak	word-break	none

Hyphens

Use the hyphens prop to set whether hyphens are used in the text.

<Text hyphens="auto">Hello World</Text>

Prop	CSS Property	Token Category
hyphens	hyphens	none