import { TextDisplay } from "@components/text-display";

# 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

```js
import { Text } from "@blockstack/ui";
```

## Usage

```jsx
<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.

<TextDisplay />

## Examples

```jsx
<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>
```
