components/bits/SectionHeader#

SectionHeader()#

function SectionHeader(props): Element;

The app's one section-title surface: optional icon, a title, an optional subtitle, right-aligned actions and an optional rule beneath.

This exists because the same header was being rebuilt inline everywhere — 85 variant="subtitle2", 53 variant="h6", 28 textTransform: 'uppercase' treatments and 38 <Divider>s, each with its own weight, colour, letter spacing and padding. Sizes come from the theme's typography scale rather than an sx fontSize, so check:theme keeps them there.

Parameters#

Returns#

Element

SectionHeaderProps#

Properties#

action?#

optional action?: ReactNode;

Trailing controls — buttons, toggles, a count chip. Right-aligned.

dense?#

optional dense?: boolean;

Removes the vertical padding, for headers inside an already-padded row.

divider?#

optional divider?: boolean;

Render a <Divider> beneath the header.

icon?#

optional icon?: ReactNode;

Leading glyph. Sized by the header so every section lines up.

subtitle?#

optional subtitle?: ReactNode;

Secondary line under the title (counts, hints, the "why" of the section).

sx?#

optional sx?: any;

title#

title: ReactNode;

The section label. Kept as a string so the header can style it itself.

variant?#

optional variant?: "section" | "page" | "overline";

Visual weight.

section (default) is the workhorse — what 85 variant="subtitle2" sites were hand-rolling. page is the one-per-surface title that was 53 loose variant="h6" tags. overline is the small uppercase label used to divide a form or a settings pane into bands.