Page header

A page header defines the top of a page.

Install

One package and one stylesheet. The stylesheet carries the tokens every component reads.

pnpm add @wolf-rayet/react

import '@wolf-rayet/react/css/wolf-rayet.css';
import { PageHeader } from '@wolf-rayet/react';

A required prop is marked with an asterisk.

Prop	Type	Default	Description
children *	ReactNode	—	The page title. It is the one thing a header cannot do without.
breadcrumbs	ReactNode	—	The trail above the title, for a page inside a hierarchy.
actions	ReactNode	—	The actions belonging to the page. One primary, and few in total.
bottomBar	ReactNode	—	A row below the title for filters, tabs or a search field.

Anything else you pass is forwarded to the underlying element, so the standard attributes and event handlers work as they normally would.

What the component does for you, and what it needs from you.

The title is the page heading, which is what a screen reader reads first and what heading navigation lands on.
Breadcrumbs sit before the title in reading order, matching where they appear.
Grouped actions carry a group name, so the set is announced rather than read as loose buttons.