Preview Updated 2026-05-10

Status bar

Editor footer bar. Three slots (left / center / right) with 6 semantic tones.

Basic usage

Pass items as arrays via leftItems / centerItems / rightItems, or override with named slots (Vue: #left/#center/#right) / slot props (React: leftSlot/centerSlot/rightSlot). The whole bar can be tinted via tone (e.g. error); individual items can also set their own tone.

编辑器主区

src/App.vue vue

<CfStatusBar :left-items="left" :center-items="center" :right-items="right" />

src/App.tsx tsx

<CfStatusBar leftItems={left} centerItems={center} rightItems={right} />

Tones

tone tints the whole bar. For example, error turns the bar red to indicate a build failure.

src/App.vue vue

<CfStatusBar :tone="'error'" :left-items="items" />

src/App.tsx tsx

<CfStatusBar tone="error" leftItems={items} />

API

Prop	Type	Default	Description
`size`	`'sm' \| 'md'`	`'md'`	20 / 24 px height
`tone`	`'default' \| 'accent' \| 'success' \| 'warning' \| 'error' \| 'info'`	`'default'`	Whole-bar tint
`leftItems` / `centerItems` / `rightItems`	`StatusBarItem[]`	`[]`

StatusBarItem: { id, label, tone?, shortcut?, disabled? }.

Events: item-click(id, item).