Status bar

UsageCopy Anchor Link

import { StatusBar } from "@gpuixui/shell";

<StatusBar
  label="Editor status"
  left={[
    { id: "branch", label: "main" },
    { id: "position", label: "Ln 12, Col 4" },
  ]}
  center={[{ id: "file", label: "packages/shell/src/status-bar/status-bar.tsx" }]}
  right={[
    { id: "encoding", label: "UTF-8" },
    { id: "errors", label: "3 errors", tone: "destructive" },
  ]}
/>;

AnatomyCopy Anchor Link

gpui-kit's bar has three regions and the centre follows the pinned ends:

• left pins to the leading edge and right to the trailing edge.
• center is centred when both pinned groups have items, end-aligned when only left does, and start-aligned otherwise. The rule is centerAlignment and it treats an empty group as absent.
• A hairline 1px separator sits between the items of one group, never around the group.
• Every label truncates (overflow: hidden, textOverflow: ellipsis, nowrap) and shrinks before the group would overflow.
• Labels are text-xs in the theme's mono scale — a status readout is scanned, not read as prose.
• tone paints a status role's readable foreground; default keeps the bar's own foreground.

APICopy Anchor Link

Edit this page on GitHubpackages/shell/docs/status-bar.mdx