Page Header

Reusable page header with title, subtitle, back button, and action area

Overview

PageHeader provides consistent page-level titles with optional subtitle, back button, actions, and badges. It's the primary way to establish page identity and provide navigation context.

Key Features

Title and optional subtitle for page identification
Back button with customizable label and href
Action area for buttons (filter, export, create)
Badge slot for status indicators (Active, Preview, etc.)
Gradient separator option for visual emphasis

Examples

Basic Header (Title Only)

The simplest form with just a title.

Dashboard

With Subtitle

Add context with a descriptive subtitle.

Projects

Manage your testing programs and validation efforts

With Back Button

Navigation breadcrumb for nested pages.

Project Details

Mobile App Redesign

With Actions

Action buttons on the right side for page-level operations.

Tasks

Track and manage project tasks

With Badge

Status badge next to the title for quick identification.

Beta Features

Preview

Preview upcoming functionality

Full Example (All Features)

Combining all features: back button, badge, and actions.

Project Settings

Active

Configure project preferences and team access

Props Reference

Prop	Type	Default	Description
`title`	`string`	`required`	Main heading text for the page
`subtitle`	`string`	`-`	Optional descriptive text below the title
`back`	`{ href: string; label?: string }`	`-`	Back navigation with href and optional label
`badge`	`ReactNode`	`-`	React node to display as a status badge
`actions`	`ReactNode`	`-`	React node for action buttons on the right
`separator`	`'line' \| 'gradient' \| 'none'`	`'line'`	Separator style: 'line', 'gradient', or 'none'

Usage

import { PageHeader, PageCard } from '@/ui/components';
import { Button, Badge } from '@/ui/primitives';

<PageHeader
  title="Dashboard"
  subtitle="Welcome to your workspace"
  back={{ href: '/home', label: 'Back to Home' }}
  badge={<Badge variant="success">Active</Badge>}
  separator="gradient"
  actions={
    <Button variant="default">
      <Icon icon={faPlus} />
      New Project
    </Button>
  }
/>

{/* Content follows with mt-6 spacing */}
<PageCard className="mt-6">
  {/* Page content here */}
</PageCard>

Prop

Type

Default

Description

title

string

required

Main heading text for the page

subtitle

string

-

Optional descriptive text below the title

back

{ href: string; label?: string }

-

Back navigation with href and optional label

badge

ReactNode

-

React node to display as a status badge

actions

ReactNode

-

React node for action buttons on the right

separator

'line' | 'gradient' | 'none'

'line'

Separator style: 'line', 'gradient', or 'none'

import { PageHeader, PageCard } from '@/ui/components'; import { Button, Badge } from '@/ui/primitives'; <PageHeader title="Dashboard" subtitle="Welcome to your workspace" back={{ href: '/home', label: 'Back to Home' }} badge={<Badge variant="success">Active</Badge>} separator="gradient" actions={ <Button variant="default"> <Icon icon={faPlus} /> New Project </Button> } /> {/* Content follows with mt-6 spacing */} <PageCard className="mt-6"> {/* Page content here */} </PageCard>