# Heading

Headings control the visual style of headings. Use headings to introduce major sections, like Contact information, Shipping address, or Shipping method.

Unlike HTML headings, you don’t explicitly specify the position of the heading in the document outline. Nest headings within the heading group component to control the document outline structure used by assistive technologies.

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

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

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

```

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

export default extension('purchase.checkout.block.render', (root) => {
  const heading = root.createComponent(Heading, undefined, 'Store name');

  root.appendChild(heading);
});

```

## HeadingProps

### HeadingProps

### id

value: `string`

Unique identifier.
Typically used to make the heading a target that another component
can refer to in order to provide an alternative accessibility label.

### level

value: `Level`

The visual level of the heading. When not set, the heading will use
its “automatic” heading level, which is determined by the level of nesting
within ancestor `HeadingGroup`s. No matter what value you provide here,
the semantic level (e.g., how the heading contributes to the document outline)
is determined exclusively by the “automatic” heading level.

### accessibilityRole

value: `Extract<AccessibilityRole, 'presentation'>`

Sets the semantic meaning of the component’s content. When set,
the role will be used by assistive technologies to help buyers
navigate the page.

### inlineAlignment

value: `InlineAlignment`

Align text along the main axis.

## Related

- [HeadingGroup](headinggroup)
- [Text](text)
- [TextBlock](textblock)