# SettingsPage.Header

**Category:** Base Components/Pages/Settings Page

## Examples

### Basic

This example shows a basic usage of `SettingsPage.Header`.

```tsx
import React from 'react';
import {
  SettingsPage,
  useSettingsPage,
  SettingsPageState,
  useSettings,
} from '@wix/patterns';
import { useForm } from '@wix/patterns/form';
import { Card, Text } from '@wix/design-system';

interface MySettings {
  id: string;
  name?: string;
  createdAt: Date;
  updatedAt: Date;
}

function Basic() {
  const form = useForm();
  const state: SettingsPageState<MySettings> = useSettingsPage<MySettings>({
    form,
    onCancel: async () => console.log('Cancel clicked!'),
    onSave: async () => {
      const formValues = form.getValues();
      console.log('formValues', formValues); // Save updated settings
    },
    saveErrorToast: () => 'Failed to save',
    fetch: () =>
      Promise.resolve({
        settings: {
          id: 'id',
          name: 'Settings Name',
          createdAt: new window.Date(),
          updatedAt: new window.Date(),
        },
      }),
  });

  const settings = useSettings<MySettings>(state);

  return (
    <SettingsPage state={state}>
      <SettingsPage.Header title={{ text: settings?.name || 'New Settings' }} />
      <SettingsPage.MainContent>
        <SettingsPage.Content>
          <SettingsPage.Card minHeight="24px">
            <Card.Header title="Card" />
            <Card.Divider />
            <Card.Content>
              <Text>Simple card</Text>
            </Card.Content>
          </SettingsPage.Card>
        </SettingsPage.Content>
      </SettingsPage.MainContent>
    </SettingsPage>
  );
}
```

---

### More Actions

This example displays a header with more actions CTA. To learn how to create a more actions menu, see [`MoreActions`](./?path=/story/features-actions-more-actions--more-actions).

```tsx
import React from 'react';
import {
  SettingsPage,
  useSettingsPage,
  SettingsPageState,
  useSettings,
  MoreActions,
} from '@wix/patterns';
import { useForm } from '@wix/patterns/form';
import { DummyEntity } from '@wix/ambassador-cairo-dummyservice-v1-dummy-entity/types';
import { Card, Text } from '@wix/design-system';
import { InvoiceSmall } from '@wix/wix-ui-icons-common';

function Basic() {
  const form = useForm();
  const state: SettingsPageState<DummyEntity> = useSettingsPage<DummyEntity>({
    form,
    onCancel: async () => console.log('Cancel clicked!'),
    onSave: async () => {
      const formValues = form.getValues();
      console.log('formValues', formValues); // Save updated settings
    },
    saveErrorToast: () => 'Failed to save',
    fetch: () =>
      Promise.resolve({
        settings: {
          id: 'id',
          name: 'Settings Name',
        },
      }),
  });

  const settings = useSettings<DummyEntity>(state);

  return (
    <SettingsPage state={state}>
      <SettingsPage.Header
        moreActions={
          <MoreActions
            items={[
              [
                {
                  text: 'Open Subscriptions',
                  prefixIcon: <InvoiceSmall />,
                  onClick: () => {
                    console.log('Open Subscriptions');
                  },
                },
              ],
            ]}
          />
        }
        title={{ text: settings?.name || 'New Settings' }}
      />
      <SettingsPage.MainContent>
        <SettingsPage.Content>
          <SettingsPage.Card minHeight="24px">
            <Card.Header title="Card" />
            <Card.Divider />
            <Card.Content>
              <Text>Simple card</Text>
            </Card.Content>
          </SettingsPage.Card>
        </SettingsPage.Content>
      </SettingsPage.MainContent>
    </SettingsPage>
  );
}
```

## API

### Overview

The header component for a [`SettingsPage`](./?path=/story/base-components-pages-settings-page--settingspage). Renders the page title, optional subtitle, and a more-actions menu. Place it as a direct child of ``.

```tsx
import { SettingsPage } from '@wix/patterns/page';
```

### Composition

```tsx

  }
  />
  ...

```

### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `moreActions` | `MoreActionsElement` | No | - | <MoreActions /> |
| `breadcrumbs` | `ReactElement<Breadcrumbs, string \| JSXElementConstructor<any>>` | No | - | Page breadcrumbs |
| `title` | `{ text: string; badges?: (Pick<BadgeProps, "skin" \| "prefixIcon" \| "suffixIcon"> & { text: string; })[] \| undefined; }` | Yes | - | Page title text and optional badges |
| `subtitle` | `PageSubTitleProps` | No | - | Page subtitle text |