'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Layout
PageHeader and PageActions
The top of a page: breadcrumbs or back, a title with media and meta, a subtitle, the main action, secondary actions that fold into a menu on phones, and tabs; sticky and compact when you need them. PageActions closes a form page; FooterHelp points to help.
import { PageHeader, PageActions, FooterHelp } from '@alea/ui';
Examples
Page header
Breadcrumbs, back, title, meta, subtitle, the main action and secondary actions. Resize the window: on phones the secondary actions fold into a More menu and the main action goes full width.
Order #1042
Northwind Traders · 4 items · $1,240
Compact with tabs
compact for dense apps; tabs sit under the header.
Customers
2,481 people
Page actions and help
PageActions closes a form page (primary right, secondary left, stacked on phones); FooterHelp points to more help.
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
Color
--alea-bg…--alea-border…--alea-text-muted…
Space
--alea-space-1…--alea-space-2…--alea-space-3…--alea-space-4…--alea-space-6…
Type
--alea-font-family-body…--alea-font-size-2xl…--alea-font-size-md…--alea-font-size-sm…--alea-font-size-xl…--alea-font-tracking-tight…--alea-font-weight-semibold…
Motion
--alea-motion-duration-base…--alea-motion-ease-out…
Layer
--alea-z-sticky…
Props
PageHeader props
The top of a page: breadcrumbs or back, title, subtitle, meta, actions and tabs. Secondary actions fold into a menu on phones.
| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | ReactNode | - | The page title (an h1 by default). |
actions | ReactNode | - | The main actions (usually one primary button). They stay visible on phones. |
back | string | (() => void) | - | Where Back goes: an href, or a function. Shows an arrow button before the title. |
backLabel | string | - | The label of the back button. Default "Back". |
breadcrumbs | { label: ReactNode; href?: string; }[] | - | The trail above the title. |
className | string | - | Extra class names. |
compact | boolean | - | Tighter spacing and a smaller title, for dense apps. |
headingLevel | 2 | 3 | 1 | 1 | Heading level. Default 1. |
media | ReactNode | - | An avatar, icon or thumbnail before the title. |
meta | ReactNode | - | Badges and facts next to the title: status, dates, owner. |
secondaryActions | PageAction[] | - | More actions: shown as buttons from 768 px up, folded into a More menu on phones. |
sticky | boolean | - | Sticks to the top while scrolling, and gets a border once stuck. |
subtitle | ReactNode | - | A line under the title. |
tabs | ReactNode | - | Tabs or a segmented control under the header. |
PageActions props
The row of actions at the end of a form page: primary on the right, secondary on the left. Full width and stacked on phones.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Extra class names. |
primary | ReactNode | - | The main action, on the right. |
secondary | ReactNode | - | Other actions, on the left (Delete, Archive). |
Specs
Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.
PageHeader
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-page-header-secondary.alea-page-header-more.alea-page-header.alea-page-header-crumbs.alea-page-header-main.alea-page-header-back.alea-page-header-media.alea-page-header-titles.alea-page-header-title-row.alea-page-header-title.alea-page-header-meta.alea-page-header-subtitle- Data attributes
data-compactdata-stickydata-stuck
PageActions
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-page-actions.alea-page-actions-secondary.alea-page-actions-primary
FooterHelp
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-footer-help
Accessibility
- The title is a real heading (h1 by default; set headingLevel when the page already has one).
- Back is a named button; breadcrumbs are a navigation landmark with the current page marked.
- Secondary actions are the same actions in a menu on phones, so nothing is lost on small screens.
Keyboard
| Key | Does |
|---|---|
| Tab | Moves through back, breadcrumbs and actions |
Do and don't
Do
- One main action in actions; the rest in secondaryActions.
- Keep titles short; put facts in meta.
Don't
- Don't put form fields in the header.
- Don't use more than one h1 on a page.