TitleBar

Use cases

• Top of every page below the TopBar — icon + supertitle + bold title.
• Add an action slot for page-level controls (filters, "New X" buttons, segmented controls).

When NOT to use

• For a section heading inside the page body → use SectionHeader.
• For the global app-chrome header → use TopBar.
• For a modal title → use the modal's own header structure.

Anatomy

┌─────────────────────────────────────────────────────┐
│ [icon]  Supertitle (eyebrow)                        │
│         Title (bold, large)                action ─►│
└─────────────────────────────────────────────────────┘

• icon — 24 px mobile, 30 px desktop. Use a Lucide outline icon (strokeWidth={1.5}) or any 24 × 24 SVG.
• supertitle — eyebrow context ("User Administration", "HR / Payroll").
• title — the page's bold heading.
• action — slot for the primary page-level affordance.

Heading semantics

Pass an <h1> as title when this is the canonical page heading:

<TitleBar
  title={<h1 className="m-0 text-inherit font-inherit">Security & Permissions</h1>}
  supertitle="User Administration"
/>

Sticky behaviour

The bar itself does not manage stickiness. Wrap it in a sticky top-0 z-10 container inside your PageShell.

Composition

• Use action for a single page-level CTA (e.g. <Button>New Role</Button>). For multiple actions, wrap in a flex container.
• Pair supertitle with icon for hierarchical context ("HR / Payroll" + a payroll icon).
• Pass title as an <h1> element when this is the canonical page heading.

Related

• SectionHeader — section-level heading within the page body.
• TopBar — global app-chrome header above the TitleBar.
• PageShell — layout wrapper that positions TitleBar, sidebar, and content.