Text

Use the Text component to control font size, weight, alignment, and color.

Text
<Text fontSize={4}>
  Text
</Text>
Centered Text
<Text align='center'>
  Centered Text
</Text>
Bold Text
<Text bold>
  Bold Text
</Text>
Caps Text
<Text caps>
  Caps Text
</Text>
Blue Text
<Text color='blue'>
  Blue Text
</Text>

HTML Elements

By default, the <Text /> component renders a <div> element. To use a <span> or <p> element, use the following:

This is a span element

This is a p element

This is an s element
<Text.span>This is a span element</Text.span>
<Text.p>This is a p element</Text.p>
<Text.s>This is an s element</Text.s>

Props

PropTypeDescription
fontSizenumber or stringSets font size based on the typographic scale
alignstringSets the text-align property
regularbooleanSets font-weight: props.theme.regular
boldbooleanSets font-weight: props.theme.bold
capsbooleanSets styles for all-caps type treatments
italicbooleanSets styles for italic type treatments
colorstringSets color based on the theme's color palette
mnumber, string, or arraySets margin based on the theme.space scale
mtnumber, string, or arraySets margin-top
mrnumber, string, or arraySets margin-right
mbnumber, string, or arraySets margin-bottom
mlnumber, string, or arraySets margin-left
mxnumber, string, or arraySets margin-left and margin-right
mynumber, string, or arraySets margin-top and margin-bottom