---
title: HeadingText
source: https://docs.newrelic.com/docs/new-relic-solutions/build-nr-ui/sdk-component/text/HeadingText
---

Typography styles are used throughout the UI. If used consistently they will help you maintain a hierarchy that is clear to your users.

### Usage

```jsx
import { HeadingText } from 'nr1'
```

### Examples

#### Basic

```jsx
<HeadingText>Heading 4 (default)</HeadingText>
```

#### Basic

```jsx
<>
  <HeadingText type={HeadingText.TYPE.HEADING_1}>Heading 1</HeadingText>
  <HeadingText type={HeadingText.TYPE.HEADING_2}>Heading 2</HeadingText>
  <HeadingText type={HeadingText.TYPE.HEADING_3}>Heading 3</HeadingText>
  <HeadingText type={HeadingText.TYPE.HEADING_4}>Heading 4</HeadingText>
  <HeadingText type={HeadingText.TYPE.HEADING_5}>Heading 5</HeadingText>
  <HeadingText type={HeadingText.TYPE.HEADING_6}>Heading 6</HeadingText>
</>
```

#### Changing semantic

```jsx
<HeadingText
  type={HeadingText.TYPE.HEADING_1}
  tagType={HeadingText.TAG_TYPE.DIV}
>
  This is a div element styled as a h1
</HeadingText>
```

### Props

| `children` node       | Text to display.                                                                                                                                                                                                                                                                                                                                                                                      |
| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className` string    | Appends class names to the component. Should be used only for positioning and spacing purposes.                                                                                                                                                                                                                                                                                                       |
| `spacingType` enum\[] | Spacing property. Spacing is defined as a tuple of zero to four values, which follow the same conventions as CSS properties like `margin` or `padding`. To omit a value, use `SPACING_TYPE.OMIT`. HeadingText.SPACING_TYPE.EXTRA_LARGE, HeadingText.SPACING_TYPE.LARGE, HeadingText.SPACING_TYPE.MEDIUM, HeadingText.SPACING_TYPE.NONE, HeadingText.SPACING_TYPE.OMIT, HeadingText.SPACING_TYPE.SMALL |
| `style` object        | Inline style for custom styling.Should be used only for positioning and spacing purposes.                                                                                                                                                                                                                                                                                                             |
| `tagType` enum        | Tag in which to wrap the text.Useful for changing the semantic meaning of the text. This does not apply any style. HeadingText.TAG_TYPE.DIV, HeadingText.TAG_TYPE.H1, HeadingText.TAG_TYPE.H2, HeadingText.TAG_TYPE.H3, HeadingText.TAG_TYPE.H4, HeadingText.TAG_TYPE.H5, HeadingText.TAG_TYPE.H6                                                                                                     |
| `testId` string       | Adds a `data-test-id` attribute. Use it to target the component in unit and E2E tests.For a test id to be valid, prefix it with your nerdpack id, followed up by a dot.For example, `my-nerdpack.some-element`. **Note:** You might not see `data-test-id` attributes as they are removed from the DOM, to debug them pass a `e2e-test` query parameter to the URL.                                   |
| `type` enum           | Type of text that you want to display.This applies styles according to the type. HeadingText.TYPE.HEADING_1, HeadingText.TYPE.HEADING_2, HeadingText.TYPE.HEADING_3, HeadingText.TYPE.HEADING_4, HeadingText.TYPE.HEADING_5, HeadingText.TYPE.HEADING_6                                                                                                                                               |