Text

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

Default example

bold

red color

white on black

<Text is='p' fontWeight="bold">bold</Text>
<Text is='p' color="red.6">red color</Text>
<Text is='p' color="white" bg="gray.9" p={2}>white on black</Text>

System props

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

Component props

NameTypeDefaultDescription
isStringspanSets the HTML tag for the component
Edit this page on GitHub