PageHeader

PageHeader establishes what this page is and what someone can do at its edge. Put page-level actions in actions; keep controls that change the page's body, such as filters or tabs, in children.

Examples

Context before the title

An eyebrow names the broader scope; the title names this page. Omit the eyebrow when the title is already specific, because duplicate context weakens the scan target instead of clarifying it.

Actions and a secondary row

actions holds the one or two operations that affect the page as a whole. A secondary row belongs below the heading, where tabs or filters can change the body without competing with the title.

When to use

Use PageHeader at the beginning of a durable page or detail view whose identity, context and next action need to be read together.

Reach for something else when:

The heading belongs to one card or section — use a Card title or a native heading.
The controls are a compact peer group inside content — use Inline.
The page needs navigation rails and a scrolling model — use Shell around the page content.

Accessibility

PageHeader renders a native <header> and its title as an <h1> by default. Supply the one page-level title that represents the current document; for a section header, choose titleAs="h2" or titleAs="h3" while keeping the page title as the default <h1>.
eyebrow and description are ordinary text, not labels connected with ARIA. Do not rely on them as the only accessible name for an action.
actions and children keep their DOM order after the title. Use native Buttons, links, Tabs or form controls there so their keyboard behavior and focus state remain intact.
A header does not move focus. When navigation replaces a page, the application must choose whether focus belongs on the new <h1> or the first task control.

Props

Name	Type	Required	Description
`eyebrow`	`ReactNode`	—	Optional label displayed above the title.
`title`	`ReactNode`	Required	Required page heading, rendered in an `<h1>`.
`titleAs`	`'h1' \| 'h2' \| 'h3'`	—	Semantic element for the title. Use `"h2"` or `"h3"` when the header names a section; keep `"h1"` for the page title.
`description`	`ReactNode`	—	Optional text that explains the page's purpose.
`actions`	`ReactNode`	—	Optional controls aligned alongside the heading.
`children`	`ReactNode`	—	Optional secondary row, such as tabs or filters, rendered below the header row.

Plain HTML

The header row keeps page-wide actions beside the identity; the secondary row follows it:

html

<header class="lyra-pageheader">
  <div class="lyra-pageheader__row">
    <div class="lyra-pageheader__text">
      <span class="lyra-pageheader__eyebrow">Project</span>
      <h1 class="lyra-pageheader__title">Acme website</h1>
      <p class="lyra-pageheader__desc">Manage the settings and access for this project.</p>
    </div>
    <div class="lyra-pageheader__actions">
      <button class="lyra-btn lyra-btn--primary lyra-btn--md">Save changes</button>
    </div>
  </div>
  <nav aria-label="Project sections">
    <a href="#overview">Overview</a>
  </nav>
</header>