PageHeader
Dashboard page header primitives for titles, descriptions, and actions.
Quick Preview
Applications
Track buyer approvals and next actions.
Composition
Use this public composition when building PageHeader:
DashboardHeader
├── DashboardHeaderNavigation (optional)
├── DashboardHeaderMain
│ ├── DashboardHeaderGroup
│ │ ├── DashboardHeaderTitle
│ │ └── DashboardHeaderDescription
│ └── DashboardHeaderActionsUsage
<DashboardHeader>
<DashboardHeaderMain>
<DashboardHeaderGroup>
<DashboardHeaderTitle>Applications</DashboardHeaderTitle>
</DashboardHeaderGroup>
</DashboardHeaderMain>
</DashboardHeader>Examples
Default PageHeader
Use this as the starting point for PageHeader. Keep product data, routing, fetching, and authorization logic in the consuming app.
Applications
Track buyer approvals and next actions.
List Page
Use the default text variants for index and list pages. Actions, notifications, menus, and tabs are composed from their public package primitives.
Details Page
Use variant="details" on the title and description for record-detail pages.
Compose back navigation and breadcrumbs inside DashboardHeaderNavigation.
Props
| Prop/API | Type | Default | Description |
|---|---|---|---|
hideBorder on DashboardHeader | boolean | false | Hides the default bottom border. |
className | string | - | Local layout or spacing overrides. |
| native/root props | React component props | - | Passed through to the underlying root or primitive. |
Accessibility
- Preserve the documented PageHeader composition so labels, triggers, content, and controls remain connected.
- Provide visible labels or accessible names for interactive controls.
- Preserve the component-provided focus, keyboard, disabled, and invalid-state behavior.
- Do not communicate state with color alone; include text, icons, or helper copy.