Skip to main content
MACAW

PageHeader

Organismbeta@macaw-ds/ui · since 0.1.0

The page's own header under the TopBar: title, description, meta, actions and section tabs. Not the global header; that is TopBar.

Open gallery

A compact secondary header on surface layer-1, full width at the top of the main area. The title is the page's h1. Actions sit on the right; the tabs slot takes a TabNav, which sticks below the TopBar for the whole page. Spacing follows the density mode.

Playground

Controls are generated from the manifest; the snippet is what the CLI prints. Show focus and Reduced motion appear only when they apply.

Frame theme

Invoices

Every invoice across your customers, newest first.

Examples
import { Button, PageHeader } from '@macaw-ds/ui';

<PageHeader
  title="Invoices"
  description="Every invoice across your customers, newest first."
  actions={<Button>New invoice</Button>}
/>

Controls

The page title.

One line under the title.

headingLevel

Heading element for the title. h1 unless the page already has one.

Examples

The named exports of the examples file, rendered as they ship.

  • Default

    Invoices

    Every invoice across your customers, newest first.

  • Record

    INV-0041

    Overdue

    Acme Corporation · Due 14 Oct 2026