Heading

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

Simple Heading example

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

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

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

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

A unique identifier for the field.

size

The visual level of the heading.

Level

1 | 2 | 3 | 4 | 5 | 6

Related

  • Text
  • HeadingGroup