Topbar
Each example below is a real component instance — flip the theme toggle to see how it adapts.
Default#
Loading…
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| title | ReactNode | — | Title rendered on the left. |
| titleAs | enum | — | Heading level for the page title. Default `'h1'` on touch density (mobile page header) and `'h2'` on desktop density (in-app chrome where the page `h1` typically lives in a separate hero/content area). |
| eyebrow | ReactNode | — | Eyebrow label rendered above the title (small uppercase mono). Touch density only — silently ignored on desktop density to avoid two header tiers stacking. |
| leading | ReactNode | — | Left-of-title slot — typically a logo or breadcrumbs. |
| back | boolean | MouseEventHandler<HTMLButtonElement> | undefined | — | Renders the back-arrow button at the start (before `leading`). Pass `back={true}` for the declarative form and wire the handler via `onBack`, or pass `back={handler}` directly. Touch-density only; ignored on desktop density. |
| onBack | MouseEventHandler<HTMLButtonElement> | undefined | — | Handler for the back button when `back={true}`. Ignored when `back` is itself a function — in that case `back` is the handler. |
| actions | ReactNode | — | Right-side action group. Rendered with `gap-3` (desktop) or `gap-1` (touch). |
| density | enum | comfortable | `'comfortable'` (default) → desktop 52px header. `'touch'` → mobile 56px page-header with optional back button + eyebrow. |