Page Header

A 56px-high page bar with optional back button, centered title, and a right-side slot for actions.

Wallbox

Usage

import {
  PageHeader,
  PageHeaderActions,
  PageHeaderBackButton,
  PageHeaderTitle,
} from '@epilot/spark-ui/page-header'

PageHeader is a 3-column grid (back · title · actions). The first and last columns are reserved so the centered PageHeaderTitle stays centered regardless of whether the back button or actions slot is rendered.

<PageHeader>
  <PageHeaderBackButton onClick={() => router.back()} />
  <PageHeaderTitle>Devices</PageHeaderTitle>
  <PageHeaderActions>{/* cog, kebab, … */}</PageHeaderActions>
</PageHeader>

Examples

With a right-side action

Drop any element into PageHeaderActions: settings cogs, kebab menus, etc.

Garage wallbox

Title only

Omit PageHeaderBackButton to hide the back button.

Settings

API Reference

Component	Notes
`PageHeader`	Outer 3-column grid `<header>`. Forwards native `<header>` props.
`PageHeaderBackButton`	Pinned icon `Button` (`styleVariant="ghost" color="neutral"`, `size="icon-small"`). A fixed, theme-independent chrome affordance. `aria-label` defaults to `"Back"`. Takes `Button` props except `size`/`variant`.
`PageHeaderTitle`	Centered bold title (`<h2>`, `text-xl font-bold`). Forwards native `<h2>` props.
`PageHeaderActions`	Right-side slot, a fixed `size-10` box. Pass `render` to render as your own element.