---
title: Heading
description: Use this to display a title. It's similar to the h1-h6 tags in HTML
api_version: 2023-10
api_name: admin-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/admin-extensions/2023-10/components/titles-and-text/heading
  md: >-
    https://shopify.dev/docs/api/admin-extensions/2023-10/components/titles-and-text/heading.md
---

# Heading

Use this to display a title. It's similar to the h1-h6 tags in HTML

## HeadingProps

* id

  string

  A unique identifier for the field.

* size

  Level

  The visual level of the heading.

### Level

```ts
1 | 2 | 3 | 4 | 5 | 6
```

### Examples

* #### Simple Heading example

  ##### React

  ```tsx
  import {render, Heading} from '@shopify/ui-extensions-react/admin';

  render('Playground', () => <App />);

  function App() {
    return <Heading>Store name</Heading>;
  }
  ```

  ##### JS

  ```js
  import {extend, Heading} from '@shopify/ui-extensions/admin';

  extend('Playground', (root) => {
    const heading = root.createComponent(Heading, undefined, 'Headings are cool');

    root.appendChild(heading);
  });
  ```

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/admin-extensions/2023-10/heading-default.png)

## Related

[- Text](https://shopify.dev/docs/api/admin-extensions/components/titles-and-text/text)

[- HeadingGroup](https://shopify.dev/docs/api/admin-extensions/components/titles-and-text/headinggroup)