ComponentsLayout
PageHeader
Backoffice page header with title, metadata, description, and action area
The PageHeader component gives admin and backoffice screens a consistent top structure for page title, operational context, and primary actions.
Import
import {
PageHeader,
PageHeaderActions,
PageHeaderDescription,
PageHeaderMeta,
PageHeaderTitle,
} from '@nim-ui/components';Basic Usage
Updated 2 minutes ago
Orders
Review exceptions, fulfillment status, and risk signals before the next warehouse handoff.
Code
<PageHeader>
<div className="space-y-2">
<PageHeaderMeta>Updated 2 minutes ago</PageHeaderMeta>
<PageHeaderTitle>Orders</PageHeaderTitle>
<PageHeaderDescription>Review exceptions, fulfillment status, and risk signals before the next warehouse handoff.</PageHeaderDescription>
</div>
<PageHeaderActions aria-label="Order actions">
<Button variant="outline" size="sm">Export</Button>
<Button variant="primary" size="sm">Create order</Button>
</PageHeaderActions>
</PageHeader>Props
PageHeader
| Name | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional classes for the header container. |
children* | ReactNode | - | Header content, usually title block and PageHeaderActions. |
PageHeaderActions
| Name | Type | Default | Description |
|---|---|---|---|
aria-label | string | - | Accessible label for the grouped actions. |
children* | ReactNode | - | Action buttons or controls for the page. |
Backoffice Guidance
- Keep one primary action in
PageHeaderActions. - Put freshness, ownership, or operational scope in
PageHeaderMeta. - Use the description for decision context, not marketing copy.