PageHeader
Preview appears after the next Storybook update.
<PageHeader />When to use
Use it for
- Once at the top of every page, so titles, leads and actions sit in the same place across the product.
- lead: one or two sentences on what the page is for, not how to use it.
- meta: a quiet line for facts that build trust, like when the page was last updated or where its data comes from.
- actions: the page-level actions (Edit in Studio, Create token). Keep the primary one last.
- headingLevel 2 when the header tops a section inside a page that already has an h1.
Not for
- Section titles inside a page: use a plain h2 heading.
- Dialogs and drawers: they have their own title slot.
- Promotional heroes with art and several calls to action: build them in the page, outside the system.
Do and don't
Every example is rendered with the real component, so it always matches what ships.
Typography
Name the page as the navigation does
The title repeats the sidebar label, so users know they landed where they clicked.
Install
Keep the lead to one idea
One or two sentences that say what the page is for. Details belong in the content.
Color
A paragraph as the lead
A long lead pushes the content below the fold and nobody reads it.
DESIGN TOKENS OVERVIEW
Title in all caps or title case
Sentence case reads faster and matches the rest of the interface.
Accessibility
- Renders a header element with a real heading (h1 by default), so the page outline and screen reader heading navigation start here.
- One h1 per page: use headingLevel 2 when the page already has one.
- Actions keep their own roles: a Button for actions on this page, a link (Button with render={<a />}) for navigation.
- The meta line is plain text in the muted color, which passes AA on every surface.
Content guidelines
- Title: the page name in sentence case, one to three words, no trailing period.
- Lead: one or two sentences, present tense, says what the page is for.
- Meta: facts, not marketing: "Updated 3 days ago", "38 components".
- Actions: verb plus object ("Edit in Studio", "Create token").
From the code Generated from the component, not editable here.
Anatomy and tokens
Read from packages/react/src/components/PageHeader/PageHeader.module.css at build time. Every value is a token: open one to see its alias chain in both themes.
- Container
.pageHeader - Title, lead and meta column
.text - Page title (h1 by default)
.title - Title at heading level 2
.titleSm - Page title (h1 by default)
@media (min-width: 900px) .title - Title at heading level 2
@media (min-width: 900px) .titleSm - Lead text
.lead - Meta line
.meta - Page actions
.actions
Motion and interaction
PageHeader does not animate: its states change at once.
From the code Generated from the component, not editable here.
Props
Parsed from the TypeScript types in packages/react/src/components/PageHeader/PageHeader.tsx, so this table cannot drift from the code.
| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | ReactNode | none | The page name, as in the navigation: "Spacing", "Install". |
lead | ReactNode | none | One or two sentences under the title: what this page is for. Falls back to `children`. |
meta | ReactNode | none | Small muted line under the lead: freshness, counts, owner. |
actions | ReactNode | none | One to three page-level actions, usually a primary or secondary Button, or links styled as buttons. |
headingLevel | 1 | 2 | 1 | Heading level of the title. Default 1: one PageHeader per page. |
children | ReactNode | none | Lead content when `lead` is not set (handy from templates that pass content as children). |
Playground
PageHeader has no typed options to play with: it is a container. Compose it with other components and any native attribute. Here it is in both themes.
Workbench
For contributors: every state with the accessibility panel, in the component workbench (Storybook). The stories double as visual test fixtures; the guidance on this page is the user documentation (open PageHeader in Storybook).
Embed Storybook stories here (4)
Loads from https://bridge-storybook.floriangouloubi.com (set STORYBOOK_URL at build time). If Storybook is not running, the frames stay empty.
Default
TitleOnly
TwoActions
AllStates
From the code Generated from the component, not editable here.
Changelog
- New
PageHeader: the top of a page with the title (h1 by default), a one-line lead, an optional meta line and the page actions, which wrap under the text on narrow screens
v1.0.0, Nov 11, 2026