---
title: SectionHeader
description: >-
  A heading style text component with an optional divider line to structure
  content.
api_version: 2024-10
api_name: pos-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2024-10/components/sectionheader
  md: >-
    https://shopify.dev/docs/api/pos-ui-extensions/2024-10/components/sectionheader.md
---

# Section​Headercomponent

A heading style text component with an optional divider line to structure content.

## SectionHeader

* title

  string

  required

  Title to be displayed.

* action

  { label: string; onPress: () => void; disabled?: boolean; }

  Action button to be displayed. The SectionHeader must have a `title` for `action` to work.

* hideDivider

  boolean

  Whether or not the divider line under the SectionHeader should be hidden.

### Examples

* #### SectionHeader

  ##### React

  ```tsx
  import React from 'react'
  import { Navigator, Screen, ScrollView, Stack, reactExtension, useApi, SectionHeader } from '@shopify/ui-extensions-react/point-of-sale'

  const ModalComponent = () => {
    const api = useApi<'pos.home.modal.render'>();

    return (
      <Navigator>
        <Screen title="SectionHeader" name="SectionHeader">
          <ScrollView>
            <Stack direction="vertical" paddingHorizontal="HalfPoint">
              <SectionHeader title='Default' />
              <SectionHeader title='With action' action={{label: 'Action', onPress: () => { }}} />
              <SectionHeader title='Without divider' hideDivider />
            </Stack>
          </ScrollView>
        </Screen>
      </Navigator>
    )
  }

  export default reactExtension('pos.home.modal.render', () => {
    return <ModalComponent />
  }) 
  ```

  ##### TS

  ```ts
  import {
    extension,
    Screen,
    ScrollView,
    Stack,
    Navigator,
    SectionHeader,
  } from '@shopify/ui-extensions/point-of-sale';

  export default extension(
    'pos.home.modal.render',
    (root, api) => {
      const screen = root.createComponent(Screen, {
        name: 'SectionHeader',
        title: 'SectionHeader',
      });

      const scrollView =
        root.createComponent(ScrollView);

      const defaultSectionHeader = root.createComponent(
        SectionHeader,
        {
          title: 'Default',
        },
      );

      const actionSectionHeader =
        root.createComponent(SectionHeader, {
          title: 'With action',
          action: {
            label: 'Show toast',
            onPress: () =>
              api.toast.show('Hello world!'),
          },
        });

      const noDividerSectionHeader =
        root.createComponent(SectionHeader, {
          title: 'Without divider',
          hideDivider: true,
        });

      const rootStack = root.createComponent(
        Stack,
        {
          paddingHorizontal: 'HalfPoint',
          direction: 'vertical',
        },
      );
      rootStack.append(defaultSectionHeader);
      rootStack.append(actionSectionHeader);
      rootStack.append(noDividerSectionHeader);
      
      scrollView.append(rootStack);
      screen.append(scrollView);
      const navigator =
        root.createComponent(Navigator);
      navigator.append(screen);
      root.append(navigator);
    },
  );
  ```

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-10/section-header-default.png)