Record header
The head of a record’s detail screen: tile or avatar, name, status, and the identifying facts each with its icon.
When to use it
It sits on the same faint product pattern as the banner, one row of it and lighter, so a detail screen is recognisably the same product as its home. The name appears once on the page besides the bar’s PageLead: if the screen already has a §10.3 aside with an initials tile, name and status, either rebuild that head from these ingredients or put RecordHeader at the top of the main column and drop the duplicate. Meta is the few facts that identify the record (where, when, who), not every field.
An item, in Inventory
SKU CP-50-2HP
Centrifugal pump CP-50, 2 HP
Below reorder level- Bhosari main store
- Pumps
- 14 on hand · reorder at 20
- Last received 24 Sep 2026
A shipment and a person
Shipping with a tile; People with an avatar instead. Same component, different product.
SHP-0011
Gate valves to Jebel Ali
In transit- Nhava Sheva → Jebel Ali
- 1 × 20 ft
- ETA 9 Oct 2026
- Al Noor Pumps Trading LLC
EMP-004 · Employee
Ananya Joshi
Active- Quality engineer
- Chakan MIDC plant
- Joined 3 Jun 2022
- 98220 41180
Options
Everything you can pass to Record header.
| Prop | Type | Default | What it does |
|---|---|---|---|
| module | ModuleId | — | Whose hue and motif. |
| icon / tone | IconName / Tone | product glyph / 'module' | The large tile. Pass avatar for a person instead. |
| avatar | ReactNode | — | Replaces the tile. |
| title / subtitle | ReactNode | — | The name, and the record number or kind above it. |
| badges | ReactNode | — | Status Tags beside the name. Status colour lives here, not in the tile. |
| meta | { icon, label, title? }[] | — | The few identifying facts, each with its glyph. |
| actions / children | ReactNode | — | Buttons on the right; a row under a rule (tabs, progress). |