macOS

TitleBar

Drag region with centered title — the macOS-style window chrome. Drag-to-move via -webkit-app-region: drag; islands are no-drag.

Examples

Default with TrafficLights

Library

3,204 books · 47 authors

<TitleBar title="Library" subtitle="3,204 books">
  {#snippet leading()}
    <TrafficLights onClose={…} onMinimise={…} onZoom={…} />
  {/snippet}
</TitleBar>

Props

Prop	Type	Default	Description
`title`	`string`	`—`	Centered window title.
`subtitle`	`string`	`—`	Smaller line below.
`height`	`string`	`'38px'`	CSS length for the bar height.
`leading`	`Snippet`	`—`	Left-side island (typically TrafficLights).
`trailing`	`Snippet`	`—`	Right-side island (window-level affordances).

Install

CLI

npx @a3tai/mittsu add title-bar