The Text component is a wrapper component that will apply typography styles to the text inside.

Default example

boldred colorwhite on blacklarger font-size
<Text mx={1} fontWeight="bold">bold</Text>
<Text mx={1} color="red.6">red color</Text>
<Text mx={1} color="white" bg="gray.9" p={2}>white on black</Text>
<Text mx={1} fontSize="3">larger font-size</Text>

Different element and color flavors

Color value options for color, bg, etc. can be viewed in the theme dictionary.

bold paragraph

red color paragraph

white on black paragraph

larger font-size paragraph

<Text is='p' fontWeight="bold">bold paragraph</Text>
<Text is='p' color="red.6">red color paragraph</Text>
<Text is='p' color="white" bg="gray.9" p={2}>white on black paragraph</Text>
<Text is='p' fontSize="3">larger font-size paragraph</Text>

System props

Text components get TYPOGRAPHY, LAYOUT and COMMON system props. Read the System Props doc page for a full list of available props.

Component props

isStringspanSets the HTML tag for the component