Text

Text is our base primitive component for any typographic element. You should use it for any headings and all body copy. As with all components, you can pass the as prop to change which underlying dom element it is. The default dom element is span.

Import


import { Text } from '@stacks/ui';import { Text } from '@stacks/ui';

Usage


<Text>This is a default instance of Text</Text><Text>This is a default instance of Text</Text>

Text Styles

You can pass a prop of textStyle to any component and it will take on preset values for styling. See the table below for all of the available text style variants. To read more about variants within the context of styled-system, see Variants.

Examples


<Stack>
  <Text as="h1" textStyle="display.large">
    This is a primary heading.
  </Text>
  <Text as="h2" textStyle="display.small">
    This is a secondary heading.
  </Text>
  <Text as="h3" textStyle="body.large.medium">
    This is a tertiary heading.
  </Text>
  <Text as="p" textStyle="body.large">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </Text>
</Stack><Stack>  <Text as="h1" textStyle="display.large">    This is a primary heading.  </Text>  <Text as="h2" textStyle="display.small">    This is a secondary heading.  </Text>  <Text as="h3" textStyle="body.large.medium">    This is a tertiary heading.  </Text>  <Text as="p" textStyle="body.large">    Lorem ipsum dolor sit amet, consectetur adipiscing elit.  </Text></Stack>

Search docs

⌘

On this page