Text

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

Alpha
Reviewed for accessibility

Source

On this page

This documentation is moving to a new home. Please update any link or bookmark that points to this page. The new content can be found here.

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

Examples

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

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

Props

Text

Name	Type	Default	Description
as	React.ElementType	'span'	The underlying element to render — either a HTML element name or a React component.
sx	SystemStyleObject
size	'large' \| 'medium' \| 'small'
weight	'light' \| 'normal' \| 'medium' \| 'semibold'