# SectionHeader

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

```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
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);
  },
);

```

## SectionHeader

### SectionHeaderProps

### action

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

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

### hideDivider

value: `boolean`

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

### title

value: `string`

Title to be displayed.