--- title: Heading description: >- 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. api_version: 2025-07 api_name: customer-account-ui-extensions source_url: html: >- https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/heading md: >- https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/typography-and-content/heading.md --- Migrate to Polaris Version 2025-07 is the last API version to support React-based UI components. Later versions use [web components](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components), native UI elements with built-in accessibility, better performance, and consistent styling with [Shopify's design system](https://shopify.dev/docs/apps/design). Check out the [migration guide](https://shopify.dev/docs/apps/build/customer-accounts/migrate-to-web-components) to upgrade your extension. # 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. ### Support Targets (25) ### Supported targets * Customer​Account::Kitchen​Sink * customer-account.​footer.​render-after * customer-account.​order-index.​announcement.​render * customer-account.​order-index.​block.​render * customer-account.​order-status.​announcement.​render * customer-account.​order-status.​block.​render * customer-account.​order-status.​cart-line-item.​render-after * customer-account.​order-status.​cart-line-list.​render-after * customer-account.​order-status.​customer-information.​render-after * customer-account.​order-status.​fulfillment-details.​render-after * customer-account.​order-status.​payment-details.​render-after * customer-account.​order-status.​return-details.​render-after * customer-account.​order-status.​unfulfilled-items.​render-after * customer-account.​order.​action.​menu-item.​render * customer-account.​order.​action.​render * customer-account.​order.​page.​render * customer-account.​page.​render * customer-account.​profile.​addresses.​render-after * customer-account.​profile.​announcement.​render * customer-account.​profile.​block.​render * customer-account.​profile.​company-details.​render-after * customer-account.​profile.​company-location-addresses.​render-after * customer-account.​profile.​company-location-payment.​render-after * customer-account.​profile.​company-location-staff.​render-after * customer-account.​profile.​payment.​render-after ## HeadingProps * **accessibilityRole** **Extract\** 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. * **id** **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. * **inlineAlignment** **InlineAlignment** Align text along the main axis. * **level** **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 The set of accessibility roles that can be applied to components to convey semantic meaning to assistive technologies. Each role maps to a corresponding HTML element or ARIA role in web-based hosts. - \`main\`: The primary content of the page. - \`header\`: A header section of the page. - \`footer\`: A section for copyright information, navigation links, and privacy statements. - \`section\`: A generic section; should have a heading or accessible label. - \`complementary\`: A supporting section related to the main content. - \`navigation\`: A major group of navigation links. - \`orderedList\`: A list of ordered items. - \`listItem\`: An item inside a list. - \`unorderedList\`: A list of unordered items. - \`separator\`: A divider separating sections of content. - \`status\`: A live region with advisory information that isn't urgent enough to be an alert. - \`alert\`: Important, usually time-sensitive information. - \`decorative\`: Marks the element as purely visual; assistive technologies skip it. - \`presentation\`: Strips semantic meaning but leaves visual styling intact. ```ts 'main' | 'header' | 'footer' | 'section' | 'complementary' | 'navigation' | 'orderedList' | 'listItem' | 'unorderedList' | 'separator' | 'status' | 'alert' | 'decorative' | 'presentation' ``` ### InlineAlignment Controls how content is aligned along the inline axis (horizontal in standard writing modes). - \`'start'\`: Aligns content to the inline start of the container. - \`'center'\`: Centers content along the inline axis. - \`'end'\`: Aligns content to the inline end of the container. ```ts 'start' | 'center' | 'end' ``` ### Level ```ts 1 | 2 | 3 | 4 ``` Examples ## Preview ![](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/api/checkout-extensions/post-purchase/components/heading-B9w8UZwg.png) ### Examples * #### Basic Heading ##### React ```tsx import { reactExtension, Heading, } from '@shopify/ui-extensions-react/customer-account'; export default reactExtension( 'customer-account.page.render', () => , ); function Extension() { return Store name; } ``` ##### JS ```js import {extension, Heading} from '@shopify/ui-extensions/customer-account'; export default extension('customer-account.page.render', (root) => { const heading = root.createComponent(Heading, undefined, 'Store name'); root.appendChild(heading); }); ``` ## Best Practices * Add a heading at the top of each section that clearly describe what’s below. * Use the heading to highlight the most important concepts or pieces of information that customers need to know. ## Related [Component - HeadingGroup](headinggroup) [Component - Text](text) [Component - TextBlock](textblock)