Index › Layout & Shell › Top Chrome
3 top-of-frame parts
Top of the frame.
Three parts settle along the top edge of every clinic screen: a Top Bar for search and global actions, a Page Header that names the view, and a Banner that speaks up only when the system has something to say.
Lumos
Search clients, treatments…
⌘K
New booking
RA
TopBar.Leading holds the logomark, TopBar.Search is the ⌘K trigger (declared through aria-keyshortcuts), and TopBar.Actions carries the bell, the one accent CTA, and the user avatar. Inside an AppShell it drops its banner landmark automatically.
Today at the clinic
Tuesday · 9 booked, 2 on hold across 3 treatment rooms.
The locked part stack: Eyebrow → Title → Actions → Subtitle → Tabs → MetricRow, rendered as <header role="region" aria-labelledby>. The active tab underlines in neutral ink — accent stays reserved for the Top Bar CTA.
Banner is the page-level system message — distinct from inline Alert and transient Toast. Five severities, each with its own icon so meaning never rides on color alone; danger escalates to role="alert", the rest stay role="status" · aria-live="polite".
Reach for TopBar once per app — it owns the banner landmark and the ⌘K search hotkey. Reach for PageHeader on every screen to name the view and hang its actions and tabs off one region landmark. Reach for Banner only when the whole page needs to hear something — a deadline, an outage, a promotion — and let Alert handle the inline case, Toast the fleeting one.
