Layouts
Page Header
A page's header region — title + tags/actions, and an optional description.
Usage
import {
PageHeader,
PageHeaderRow,
PageHeaderTitle,
PageHeaderTags,
PageHeaderActions,
PageHeaderDescriptionRow,
PageHeaderDescription,
} from '@acronis-platform/ui-react';PageHeader is the header region at the top of a page's content (inside the App
Shell's main, not the app-wide AppShellHeader). It stacks a
title row (PageHeaderRow — title left, an optional edit icon-button, a tags slot,
an actions slot) and an optional description row, capped at 512px. A breadcrumb, if
you need one, is a separate Breadcrumb rendered as a
sibling above PageHeader — it's not one of its parts. Mapped to the
Page Header Figma
"PageHeader" master component.
Examples
<PageHeader>
<PageHeaderRow>
<PageHeaderTitle>Reports</PageHeaderTitle>
<PageHeaderTags>
<Tag variant="info">Customer</Tag>
</PageHeaderTags>
<PageHeaderActions>
<Button>New report</Button>
</PageHeaderActions>
</PageHeaderRow>
<PageHeaderDescriptionRow>
<PageHeaderDescription>All scheduled reports.</PageHeaderDescription>
</PageHeaderDescriptionRow>
</PageHeader>Editable title/description (full-page wizards)
<PageHeaderRow>
<PageHeaderTitle>Untitled dashboard</PageHeaderTitle>
<ButtonIcon variant="secondary" aria-label="Edit title">
<PencilIcon size={16} />
</ButtonIcon>
</PageHeaderRow>Parts
| Export | Element | Purpose |
|---|---|---|
PageHeader | div | The banner region. |
PageHeaderRow | div | Title row: title, optional edit button, tags, actions. |
PageHeaderTitle | h1 | The page title. |
PageHeaderTags | div | Optional tags slot (e.g. Tag chips). |
PageHeaderActions | div | Trailing action buttons. |
PageHeaderDescriptionRow | div | Optional description row (max 512px). |
PageHeaderDescription | p | Muted supporting text. |
All parts accept their native element attributes plus className.