Preview Updated 2026-05-10

Title bar

Desktop app window header. macOS-style traffic lights with centered title; Windows / Linux-style min/max/close buttons with left-aligned title.

Basic usage

When platform="macos", three dots on the left (close / minimize / maximize) with a centered title. When platform="windows" / 'linux', three buttons on the right with a left-aligned title. The header has -webkit-app-region: drag by default, so a Tauri / Electron host can drag the window from there.

orders.parquet—protoforge●

macOS · centered title

orders.parquet—protoforge

Windows · min / max / close

<CfTitleBar platform="macos" title="orders.parquet" subtitle="protoforge" :modified="true" />
<CfTitleBar platform="windows" title="orders.parquet" subtitle="protoforge" />

<CfTitleBar platform="macos" title="orders.parquet" subtitle="protoforge" modified />
<CfTitleBar platform="windows" title="orders.parquet" subtitle="protoforge" />

macOS / Windows / Linux

Same component, platform switches the look. Use hideControls=true for a plain header bar.

orders.parquet—protoforge●

orders.parquet—protoforge

只标题（隐藏控件）

<CfTitleBar platform="macos" title="…" subtitle="…" :modified="true" />
<CfTitleBar platform="windows" title="…" subtitle="…" />
<CfTitleBar platform="linux" title="…" />

<CfTitleBar platform="macos" title="…" subtitle="…" modified />
<CfTitleBar platform="windows" title="…" subtitle="…" />
<CfTitleBar platform="linux" title="…" />

API

Prop	Type	Default	Description
`platform`	`'macos' \| 'windows' \| 'linux'`	`'macos'`	Visual variant
`title` / `subtitle`	`string`	—
`modified`	`boolean`	`false`	Show unsaved indicator dot
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	28 / 32 / 36 px
`hideControls`	`boolean`	`false`	Hide window controls; useful as a plain header

Events: minimize / maximize / close.