PageHeading

A page's name, its one h1: seen side by side, on a phone left to the header's tab and the tab bar.

Side by side

From 1024px, where the header has no tabs, it heads the page: Calendar, Inbox, Studio's pages. Under 1024px it's there for a screen reader only — widen the window past 1024px to see it.

import { Button } from "@/components/shared/button";
import { PageHead, PageHeading } from "@/components/shared/page-heading";

<PageHeading>Inbox</PageHeading>

PageHead: the name and the page's actions

PageHead puts what acts on the whole page at the heading's end (Add service, Add member) and stays at the top on white while the page scrolls under it. On a phone it takes no room: an Add floats instead (Fab).

import { PageHead } from "@/components/shared/page-heading";

<PageHead
  title="Members"
  actions={<Button leadingIcon={PlusIcon}>Add member</Button>}
/>

API reference

Prop	Type	Default	Description
children	ReactNode	—	The page's name, as the nav names it: “Inbox”.
className	string	—	Spacing where it stands: mb-4 over a list.
PageHead title	ReactNode	—	The page's name, drawn by PageHeading.
PageHead actions	ReactNode	—	Buttons for the whole page, at the end of the row, side by side only.

Guidelines

One per page, named as the nav names it, so the heading, the tab bar and the header's tab all say the same word.
A page's action (Add service) keeps its place at the row's end when the heading steps away on a phone.