# Heading

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

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

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

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

```

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

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

  root.appendChild(heading);
});

```

## HeadingProps

### HeadingProps

### id

value: `string`

A unique identifier for the field.

### size

value: `Level`

The visual size of the heading.

There are no guarantee that the level set will render the same level in the HTML `<h*>` element.
The heading level that gets rendered is determined by the parent `HeadingGroup` or `Section` component.

## 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)