Page Header

PageHeader is not exported from @beacon/design-system (#2324). A page never renders it. It renders <Page contract={...}>, and the shell draws this header from the contract’s title, description and actions (epic #2316). This page documents what the shell draws.

Forms is the one exception (#1809). It imports PageHeader from @beacon/design-system/forms-legacy-layout until its own story moves it onto Page, and a test refuses that path anywhere else.

Live demo

Usage

A page hands the shell its header fields. It never renders PageHeader itself:

import { Page } from "@beacon/design-system";

<Page
  contract={{
    title: "Notices",
    dataSource: null,
    description: "Monthly pre-lien and lien notices.",
    moduleMenuName: "Lien",
    actions: <Button>Send queue</Button>,
    left: null,
    right: null,
    body: <NoticesTable />,
  }}
/>

description and actions are required and nullable. A page with no subtitle or no buttons says null.

Props (as the shell passes them)

Prop	Type	Default	Description
title	ReactNode	—	Page title. Rendered as an <h1>. Required.
description	ReactNode	undefined	Optional subtitle or context line rendered below the title.
actions	ReactNode	undefined	Right-aligned slot for primary actions (buttons, dropdowns).

Design tokens used

Token	Role
--ds-color-content-default	Title text color.
--ds-color-content-dim	Description text color.
--ds-font-size-2xl	Title font size.
--ds-font-size-sm	Description font size.
--ds-space-md	Internal padding.
--ds-space-lg	Bottom margin separating header from page body.

When to use

Never directly. Every routed page renders <Page contract={...}>, which draws exactly one of these headers, and layout-canon.test.ts fails a page that renders its own <h1> or imports PageHeader.