Back to Compositions

PageHeader

Navigation

Page title with primary and secondary actions

Composed from
HeadingButtonButtonGroup
Example
ProductsImportAdd product
Usage
import { PageHeader } from '@/components/polaris';

function Example() {
    return (
        <PageHeader
            title="Products"
            subtitle="Manage your product catalog"
            badge="25"
            badgeTone="info"
            primaryAction={{ label: 'Add product', onAction: () => console.log('add') }}
            secondaryActions={[
                { label: 'Export', onAction: () => console.log('export') },
            ]}
        />
    );
}