Prepared Docs

Overview

PageHeader is a visual element that ties route identity together. It does not render a semantic heading on its own—the title is emphasized text, not an h1. That means the surrounding route owns document heading order. PageHeader handles the visual composition, read-only badge integration, and a tidy action cluster; your app supplies the heading, labels for badges and actions, and the focus story around the cluster.

The default titleType is TextType.H3, which selects a typography token (subsection scale), not an HTML heading level by itself.

What the component handles

Visual composition of title, description, badge, and action cluster.
ReadOnlyBadge wraps Badge with consistent lock iconography and an optional tooltip slot for reason copy.
Responsive reflow of the cluster; actions stay reachable at common desktop widths.

What you must provide

A real document h1 somewhere in the route. The PageHeader title text is emphasis styling, not a semantic heading.
Clear, verb-first labels on every action in the cluster; avoid icon-only buttons without an accessible name.
Tooltip copy on ReadOnlyBadge that explains why edits are blocked and which permission would unlock the page.
Sensible Tab order through the action cluster: primary first, secondaries next, overflow last.

Keyboard behavior

Tab / Shift+Tab: move through actions in the cluster, then into the body of the page.
Enter or Space: activate the focused button; open the overflow menu.
Escape: close an open overflow menu, returning focus to the trigger.

Semantics and roles

The title is rendered as styled text with emphasis; wrap it in or pair it with a real <h1> if no other heading exists on the route.
ReadOnlyBadge renders as a status badge; pair with a tooltip so screen reader users hear the reason on focus.
Action cluster buttons should use native <button> via Button / IconButton. Overflow menus use Radix Dropdown Menu semantics through Menu.

Known caveats

No landmark is rendered. Put PageHeader inside the <main> that the shell provides; don't wrap it in a second <main>.
The title is not an h1. Route layouts must supply one to keep the outline order correct and to help screen reader users orient.
Read-only state is announced via the badge on focus. If the restriction is critical to the workflow, consider a page-level Callout in addition to the badge.
The action cluster has no built-in focus ring across buttons; each button manages its own focus. Verify the visual focus state stays visible after any custom styling.

Page Header / API and Development

Takeover Page / Usage

Overview

What the component handles

What you must provide

Keyboard behavior

Semantics and roles

Known caveats

Overview

The default titleType is TextType.H3, which selects a typography token (subsection scale), not an HTML heading level by itself.

What the component handles

Visual composition of title, description, badge, and action cluster.
ReadOnlyBadge wraps Badge with consistent lock iconography and an optional tooltip slot for reason copy.
Responsive reflow of the cluster; actions stay reachable at common desktop widths.

What you must provide

A real document h1 somewhere in the route. The PageHeader title text is emphasis styling, not a semantic heading.
Clear, verb-first labels on every action in the cluster; avoid icon-only buttons without an accessible name.
Tooltip copy on ReadOnlyBadge that explains why edits are blocked and which permission would unlock the page.
Sensible Tab order through the action cluster: primary first, secondaries next, overflow last.

Keyboard behavior

Tab / Shift+Tab: move through actions in the cluster, then into the body of the page.
Enter or Space: activate the focused button; open the overflow menu.
Escape: close an open overflow menu, returning focus to the trigger.

Semantics and roles

The title is rendered as styled text with emphasis; wrap it in or pair it with a real <h1> if no other heading exists on the route.
ReadOnlyBadge renders as a status badge; pair with a tooltip so screen reader users hear the reason on focus.
Action cluster buttons should use native <button> via Button / IconButton. Overflow menus use Radix Dropdown Menu semantics through Menu.

Known caveats

No landmark is rendered. Put PageHeader inside the <main> that the shell provides; don't wrap it in a second <main>.
The title is not an h1. Route layouts must supply one to keep the outline order correct and to help screen reader users orient.
Read-only state is announced via the badge on focus. If the restriction is critical to the workflow, consider a page-level Callout in addition to the badge.
The action cluster has no built-in focus ring across buttons; each button manages its own focus. Verify the visual focus state stays visible after any custom styling.