Text

Table of contents

Default example
System props
Component props

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

Default example

bold

danger color

inverse colors

<Text as='p' fontWeight="bold">bold</Text>
<Text as='p' color="text.danger">danger color</Text>
<Text as='p' color="text.inverse" bg="bg.canvasInverse" p={2}>inverse colors</Text>

<Text as='p' fontWeight="bold">bold</Text>
<Text as='p' color="text.danger">danger color</Text>
<Text as='p' color="text.inverse" bg="bg.canvasInverse" p={2}>inverse colors</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

Name	Type	Default	Description
as	String	`span`	Sets the HTML tag for the component

Edit this page on GitHub

2 contributors

Last edited by VanAnderson on March 4, 2021