Navigation & Chrome

PageHeader

Displays a page title, description, statistics, status, and actions.

Component behavior

PageHeader displays a page title, summary statistics, status, and actions. Supply separate stats entries for individual values.

stats displays labeled values below the title. Values use tabular numerals. Borders separate adjacent statistics.

PageHeaderProps props

Prop	Type	Default	Description
`title`	`ReactNode`	—	The page's name.
`eyebrow`	`ReactNode`	—	Section label above the title.
`lede`	`ReactNode`	—	Description below the title.
`stats`	`PageHeaderStat[]`	—	Labelled figures under the title.
`status`	`ReactNode`	—	Status content beside the actions.
`actions`	`ReactNode`	—	Buttons at the trailing edge.
`breadcrumb`	`ReactNode`	—	Nav above the eyebrow.
`tabs`	`TabItem[]`	—	Renders a Tabs strip under the header.
`activeTab`	`string`	—	Controlled tab key.
`onTabChange`	`(key: string) => void`	—	Called with the newly selected tab key.

PageHeaderStat props

Prop	Type	Default	Description
`label`	`ReactNode`	—	Statistic label.
`value`	`ReactNode`	—	Statistic value.
`unit`	`ReactNode`	—	Unit displayed after the value in a smaller font.
`tone`	`ToneProp`	—	Tone color applied to the value.
`hint`	`ReactNode`	—	Secondary text below the value.
`title`	`string`	—	Native tooltip text.

Monitor

Monitors down2

PageHeader with stats

Use lede for descriptive text on pages without summary statistics.

Operations

Configuration checks across detection, response, delivery, and public communication.

Ready

PageHeader with a lede

ImportTSX

import { PageHeader } from "@solarius/onset";
import type { PageHeaderProps, PageHeaderStat } from "@solarius/onset";