Page Header

The PageHeader component presents page titles, metadata, actions, and supporting content in a consistent header.

Usage & Examples

Settings Header

Workspace

Billing settings

Manage seats, invoices, and payment methods.

settings-header.tsx

<PageHeader
    eyebrow="Workspace"
    title="Billing settings"
    subtitle="Manage seats, invoices, and payment methods."
    actions={<Button size="small">Add seat</Button>}
  />

Visual variants

Themes

primary

Workspace

Billing settings

Manage seats, invoices, and payment methods.

secondary

Workspace

Billing settings

Manage seats, invoices, and payment methods.

tertiary

Workspace

Billing settings

Manage seats, invoices, and payment methods.

quaternary

Workspace

Billing settings

Manage seats, invoices, and payment methods.

States

success

Workspace

Billing settings

Manage seats, invoices, and payment methods.

warning

Workspace

Billing settings

Manage seats, invoices, and payment methods.

error

Workspace

Billing settings

Manage seats, invoices, and payment methods.

info

Workspace

Billing settings

Manage seats, invoices, and payment methods.

Variants

solid

Workspace

Billing settings

Manage seats, invoices, and payment methods.

outline

Workspace

Billing settings

Manage seats, invoices, and payment methods.

glass

Workspace

Billing settings

Manage seats, invoices, and payment methods.

Rounding

none

Workspace

Billing settings

Manage seats, invoices, and payment methods.

medium

Workspace

Billing settings

Manage seats, invoices, and payment methods.

large

Workspace

Billing settings

Manage seats, invoices, and payment methods.

Shadows

none

Workspace

Billing settings

Manage seats, invoices, and payment methods.

light

Workspace

Billing settings

Manage seats, invoices, and payment methods.

strong

Workspace

Billing settings

Manage seats, invoices, and payment methods.

visual-variants.tsx

// Themes
<PageHeader theme="primary"
    eyebrow="Workspace"
    title="Billing settings"
    subtitle="Manage seats, invoices, and payment methods."
    actions={<Button size="small">Add seat</Button>}
  />
<PageHeader theme="secondary"
    eyebrow="Workspace"
    title="Billing settings"
    subtitle="Manage seats, invoices, and payment methods."
    actions={<Button size="small">Add seat</Button>}
  />
<PageHeader theme="tertiary"
    eyebrow="Workspace"
    title="Billing settings"
    subtitle="Manage seats, invoices, and payment methods."
    actions={<Button size="small">Add seat</Button>}
  />
<PageHeader theme="quaternary"
    eyebrow="Workspace"
    title="Billing settings"
    subtitle="Manage seats, invoices, and payment methods."
    actions={<Button size="small">Add seat</Button>}
  />

// States
<PageHeader state="success"
    eyebrow="Workspace"
    title="Billing settings"
    subtitle="Manage seats, invoices, and payment methods."
    actions={<Button size="small">Add seat</Button>}
  />
<PageHeader state="warning"
    eyebrow="Workspace"
    title="Billing settings"
    subtitle="Manage seats, invoices, and payment methods."
    actions={<Button size="small">Add seat</Button>}
  />
<PageHeader state="error"
    eyebrow="Workspace"
    title="Billing settings"
    subtitle="Manage seats, invoices, and payment methods."
    actions={<Button size="small">Add seat</Button>}
  />
<PageHeader state="info"
    eyebrow="Workspace"
    title="Billing settings"
    subtitle="Manage seats, invoices, and payment methods."
    actions={<Button size="small">Add seat</Button>}
  />

// Variants
<PageHeader variant="solid"
    eyebrow="Workspace"
    title="Billing settings"
    subtitle="Manage seats, invoices, and payment methods."
    actions={<Button size="small">Add seat</Button>}
  />
<PageHeader variant="outline"
    eyebrow="Workspace"
    title="Billing settings"
    subtitle="Manage seats, invoices, and payment methods."
    actions={<Button size="small">Add seat</Button>}
  />
<PageHeader variant="glass"
    eyebrow="Workspace"
    title="Billing settings"
    subtitle="Manage seats, invoices, and payment methods."
    actions={<Button size="small">Add seat</Button>}
  />

// Rounding
<PageHeader rounding="none"
    eyebrow="Workspace"
    title="Billing settings"
    subtitle="Manage seats, invoices, and payment methods."
    actions={<Button size="small">Add seat</Button>}
  />
<PageHeader rounding="medium"
    eyebrow="Workspace"
    title="Billing settings"
    subtitle="Manage seats, invoices, and payment methods."
    actions={<Button size="small">Add seat</Button>}
  />
<PageHeader rounding="large"
    eyebrow="Workspace"
    title="Billing settings"
    subtitle="Manage seats, invoices, and payment methods."
    actions={<Button size="small">Add seat</Button>}
  />

// Shadows
<PageHeader shadow="none"
    eyebrow="Workspace"
    title="Billing settings"
    subtitle="Manage seats, invoices, and payment methods."
    actions={<Button size="small">Add seat</Button>}
  />
<PageHeader shadow="light"
    eyebrow="Workspace"
    title="Billing settings"
    subtitle="Manage seats, invoices, and payment methods."
    actions={<Button size="small">Add seat</Button>}
  />
<PageHeader shadow="strong"
    eyebrow="Workspace"
    title="Billing settings"
    subtitle="Manage seats, invoices, and payment methods."
    actions={<Button size="small">Add seat</Button>}
  />

Interaction states

Disabled

Workspace

Billing settings

Manage seats, invoices, and payment methods.

Workspace

Billing settings

Manage seats, invoices, and payment methods.

Full width

Workspace

Billing settings

Manage seats, invoices, and payment methods.

interaction-states.tsx

// Disabled
<PageHeader disabled
    eyebrow="Workspace"
    title="Billing settings"
    subtitle="Manage seats, invoices, and payment methods."
    actions={<Button size="small">Add seat</Button>}
  />
// Loading
<PageHeader loading
    eyebrow="Workspace"
    title="Billing settings"
    subtitle="Manage seats, invoices, and payment methods."
    actions={<Button size="small">Add seat</Button>}
  />
// Full width
<PageHeader fullWidth
    eyebrow="Workspace"
    title="Billing settings"
    subtitle="Manage seats, invoices, and payment methods."
    actions={<Button size="small">Add seat</Button>}
  />

Props API

Page Header props API
				Default	Description
`actions`	`ReactNode`	No	props	`—`	Primary action area rendered at the end of the header.
`actionsClassName`	`string`	No	props	`—`	Additional class name for the actions area.
`as`	`"div" \| "header" \| "section"`	No	props	`"header"`	Semantic element used for the root.
`before`	`ReactNode`	No	props	`—`	Optional content rendered before the title block.
`children`	`ReactNode`	No	props	`—`	Additional header content.
`className`	`string`	No	styling	`—`	Additional class name for the root.
`compact`	`boolean`	No	props	`false`	Whether title/actions should stack more tightly.
`contentClassName`	`string`	No	props	`—`	Additional class name for the content area.
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`disabled`	`boolean`	No	props	`false`	Whether the header is visually disabled.
`eyebrow`	`ReactNode`	No	props	`—`	Small text rendered above the title.
`footer`	`ReactNode`	No	props	`—`	Optional content rendered after the main row.