Typography
JSX style props for styling text
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 |