Skip to content
Compositions

SectionHeader

A generic section header: an optional eyebrow label, a Heading title, an optional muted description, and an optional right-aligned actions slot. Typography is delegated to Heading and Text; the data-slot hooks (section-header-eyebrow / -body / -actions) let adopters retune spacing without forking the component.

Porcelain and stone

Rectified porcelain and honed stone, in stock to sample.

Usage

import { SectionHeader, SectionHeaderProps } from "@instruments/materia-ui/compositions/section-header";

Best practices

  • Renders a <header>, which is a banner landmark only when it is a direct child of <body>. It is built for nested/section use - don't render more than one page-level SectionHeader directly under <body>, or you'll create duplicate banner landmarks.

  • Set level for the document outline and size for visual scale independently - a visually small header can still be an h2. Use reserveEyebrowSpace to keep an eyebrow-less header aligned beside sibling headers that have an eyebrow.

  • Use as to change the element (a tag); use render only to swap in a component (e.g. a router Link). Never render={<Box as=…/>} - pass as directly.

Props

PropTypeDefaultDescription
as"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"

Render as a different host element from the closed layout vocabulary ({@link LayoutElement}). The set is deliberately closed: as="button" is a type error, because the design-system answer is the Button component. Ref and event-handler types remain the default element's. as and render are mutually exclusive; if both are passed, render wins (a dev-only warning fires).

actionsReactNode

Right-aligned slot for controls (buttons, menus) beside the title.

descriptionReactNode

Muted supporting copy rendered below the title.

eyebrowReactNode

Short label above the title, rendered using the .eyebrow utility.

levelSectionHeaderLevel | undefined"2"

Semantic heading level for the title (h1–h6); independent of size.

reserveEyebrowSpaceboolean | undefinedfalse

Keep the fixed eyebrow-row height even when eyebrow is absent, so titles stay aligned across sibling columns.

sizeResponsiveValue<"title" | "heading" | "paragraph-sm" | "paragraph-lg" | "subheading" | "subheading-lg" | "heading-sm" | "heading-lg"> | undefined"subheading-lg"

Title type role (responsive-capable); the description's role tracks it.

title(required)ReactNode

The section title.

Also exports

  • interfaceSectionHeaderProps

Composition

Builds on

Flex, Heading, Text