Text

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

Alpha
Reviewed for accessibility

On this page

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		Style overrides to apply to the component. See also overriding styles.