Text

Use text as a wrapper component that will apply typography styles to the text inside.

Alpha
Not reviewed for accessibility

On this page

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

Default example

<>
  <Text as="p" fontWeight="bold">
    bold
  </Text>
  <Text as="p" color="danger.fg">
    danger color
  </Text>
  <Text as="p" color="fg.onEmphasis" bg="neutral.emphasis" p={2}>
    inverse colors
  </Text>
</>

<>
  <Text as="p" fontWeight="bold">
    bold
  </Text>
  <Text as="p" color="danger.fg">
    danger color
  </Text>
  <Text as="p" color="fg.onEmphasis" bg="neutral.emphasis" 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

4 contributors

Last edited by colebemis on December 16, 2021