PageHeader

A standardized page header that provides consistent title and subtitle styling, right-aligned action buttons, breadcrumb navigation support, and an optional badge or status indicator next to the title.

Import

import { PageHeader } from '@wavebooking/aqua-fusion';

Preview

Live PreviewOpen in Storybook

Loading preview...

Usage

<PageHeader
  title="Lessons"
  subtitle="Manage your surf lessons"
  actions={<Button>Create Lesson</Button>}
  badge={<Badge variant="success">Live</Badge>}
/>

<PageHeader
  title="Session Details"
  breadcrumbs={<Breadcrumb items={[{ label: 'Sessions', href: '/sessions' }]} />}
  size="lg"
/>

Props

Prop	Type	Default	Description
`title`*	string	-	Main title of the page.
`subtitle`	string	-	Subtitle or description shown below the title.
`actions`	ReactNode	-	Action buttons or elements aligned to the right.
`breadcrumbs`	ReactNode	-	Breadcrumb or back navigation shown above the title.
`badge`	ReactNode	-	Badge or status indicator displayed next to the title.
`className`	string	-	Additional CSS classes for the header wrapper.
`size`	'sm' \| 'md' \| 'lg'	`'md'`	Title size variant.