Skip to main content

SectionHeader
component

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

Anchor to sectionheaderSectionHeader

Anchor to title
title
string
required

Title to be displayed.

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

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

Anchor to hideDivider
hideDivider
boolean

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

Was this section helpful?

SectionHeader

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 />
})

Preview