# EntityPage.Header

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

## Examples

### Basic

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

```tsx
import React from 'react';
import {
  EntityPage,
  useEntityPage,
  EntityPageState,
  useEntity,
} from '@wix/patterns';
import { useForm } from '@wix/patterns/form';
import { Card, Text } from '@wix/design-system';

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

function Basic() {
  const form = useForm();
  const state: EntityPageState<MyEntity> = useEntityPage<MyEntity>({
    parentPageId: '',
    form,
    onSave: () =>
      Promise.resolve({
        updatedEntity: {
          ...state.entity,
        } as MyEntity,
      }),
    saveErrorToast: () => 'Failed to save',
    fetch: () =>
      Promise.resolve({
        entity: {
          id: 'id',
          name: 'Entity Name',
          createdAt: new window.Date(),
          updatedAt: new window.Date(),
        },
      }),
  });

  const entity = useEntity(state);

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

---

### 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 {
  EntityPage,
  useEntityPage,
  EntityPageState,
  useEntity,
  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: EntityPageState<DummyEntity> = useEntityPage<DummyEntity>({
    parentPageId: '',
    form,
    onSave: () =>
      Promise.resolve({
        updatedEntity: {
          ...state.entity,
        },
      }),
    saveErrorToast: () => 'Failed to save',
    fetch: () =>
      Promise.resolve({
        entity: {
          id: 'id',
          name: 'Entity Name',
        },
      }),
  });

  const entity = useEntity(state);

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

---

### With Badges

This example shows a header with badges.

```tsx
import React from 'react';
import {
  EntityPage,
  useEntityPage,
  EntityPageState,
  useEntity,
} 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 { FlagFilledSmall, CheckboxSmall } from '@wix/wix-ui-icons-common';

function Badges() {
  const form = useForm();
  const state: EntityPageState<DummyEntity> = useEntityPage<DummyEntity>({
    parentPageId: '',
    form,
    onSave: async () => {
      const formValues = form.getValues();
      console.log('formValues', formValues); // Save updated entity
      return {
        updatedEntity: {
          id: 'id',
          name: 'Entity Name',
        },
      };
    },
    saveErrorToast: () => 'Failed to save',
    fetch: () =>
      Promise.resolve({
        entity: {
          id: 'id',
          name: 'Entity Name',
        },
      }),
  });

  const entity = useEntity<DummyEntity>(state);

  return (
    <EntityPage state={state}>
      <EntityPage.Header
        title={{
          text: entity?.name || 'New Entity',
          badges: [
            {
              text: 'Active',
              skin: 'success',
            },
            {
              text: 'High Priority',
              skin: 'neutralDanger',
            },
          ],
        }}
      />
      <EntityPage.MainContent>
        <EntityPage.Content>
          <EntityPage.Card minHeight="24px">
            <Card.Header title="Card" />
            <Card.Divider />
            <Card.Content>
              <Text>Entity page with badges next to the title</Text>
            </Card.Content>
          </EntityPage.Card>
        </EntityPage.Content>
      </EntityPage.MainContent>
    </EntityPage>
  );
}
```

## API

### Overview

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

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

### Composition

```tsx

  }
    moreActions={}
  />
  ...

```

### 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 |