Page Header
A flexible page header component for use with all APAC products. Features a optional icon/avatar, title, subtitle, and action buttons. Ideal for page-level navigation and actions.
Minimal: Title + Subtitle Only
The simplest configuration with just title and subtitle, no icon or buttons.
Dashboard
View and manage your dashboard settings
With Icon
Page header with a Lucide icon representing the page content.
Reports
Generate and export detailed reports
With Avatar
Page header using the Avatar component for user profiles or entity pages.
JD
John Doe
Account settings and preferences
With Secondary Button Only
Page header with a secondary action button (outline variant).
Settings
Configure your application preferences
With Primary Button Only
Page header with a primary action button (solid variant).
Team Members
Manage your team and permissions
With Secondary and Primary Buttons
Page header with both secondary and primary action buttons.
JD
Edit Profile
Update your personal information
With All Buttons Including Tertiary
Page header with secondary, primary, and tertiary dropdown menu buttons.
Project Overview
View project details and manage settings
Full Configuration
Complete page header with avatar and all action buttons configured.
CS
Company Settings
Manage organization-wide settings and preferences
Extended Tertiary Menu
Page header with an extended tertiary dropdown menu containing multiple actions.
Document Manager
Organize and manage your documents
Props
Any native header prop can be used in addition to the following component specific props.
| Property | Description | Type | Default |
|---|---|---|---|
pageTitle | Main page heading text (required). | string | — |
pageSubtitle | Secondary heading or description (required). | string | — |
showIcon | Toggles icon/avatar visibility. | boolean | true |
iconType | Type of icon display: Lucide icon or Avatar component. | "icon" | "avatar" | "icon" |
icon | React node for the icon (when iconType is "icon"). | ReactNode | — |
avatarProps | Props passed to Avatar component (src, fallback, alt, className). | AvatarProps | — |
showSecondaryButton | Toggles secondary button visibility. | boolean | false |
secondaryButtonText | Text label for the secondary button. | string | — |
secondaryButtonOnClick | Click handler for the secondary button. | () => void | — |
showPrimaryButton | Toggles primary button visibility. | boolean | false |
primaryButtonText | Text label for the primary button. | string | — |
primaryButtonOnClick | Click handler for the primary button. | () => void | — |
showTertiaryButton | Toggles tertiary dropdown menu button visibility. | boolean | false |
tertiaryButtonActions | Array of actions for the tertiary dropdown menu. | TertiaryAction[] | — |
className | Additional Tailwind classes for the root header element. | string | — |