Status Bar

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Add this component (its dependencies come along)
npx koalaui-cli@latest add status-bar

Usage#

import {
  StatusBar,
  StatusBarItem,
  StatusBarSection,
  StatusBarSeparator,
} from "@/components/ui/status-bar"

export function Example() {
  return (
    <StatusBar>
      <StatusBarSection>
        <StatusBarItem>main</StatusBarItem>
        <StatusBarSeparator />
        <StatusBarItem>UTF-8</StatusBarItem>
      </StatusBarSection>
      <StatusBarSection align="end">
        <StatusBarItem>Ln 42, Col 7</StatusBarItem>
      </StatusBarSection>
    </StatusBar>
  )
}

Anatomy#

import {
  StatusBar,
  StatusBarItem,
  StatusBarSection,
  StatusBarSeparator,
  StatusBarSignal,
} from "@/components/ui/status-bar"

<StatusBar>
  <StatusBarSection>
    <StatusBarItem />
    <StatusBarSeparator />
    <StatusBarItem />
  </StatusBarSection>
  <StatusBarSection align="center" />
  <StatusBarSection align="end">
    <StatusBarSignal level={…} />
  </StatusBarSection>
</StatusBar>

Regions#

StatusBarSection takes align: start (the default), center or end. The bar is a three-column grid and each section claims its column, so any of them can be left out: the center stays on the true center whatever sits beside it, and an end section stays at the end with no start. Each side gets half of what the center leaves, and a section on its own takes the whole bar.

Tones#

StatusBarItem takes tone. default is the strip's meta ink, muted steps back for a label in front of its value, strong is the value that matters, and success is a healthy state. A leading dot is plain markup inside the item.

Signal#

StatusBarSignal is a four-step meter: level lights that many bars (rounded and clamped to 0 to 4), and a change eases between steps. It is a meter named by label ("Signal" by default), so a screen reader hears "Link, 3 of 4".

On the app frame#

The strip paints nothing, so it takes the ground it sits on. On the near-black frame of a docked shell, pin it dark and it reads the same in every theme; inside a pane, give it a border-t and let it sit on the sheet.

Announcing a value#

The bar is not a live region: a clock or a ping inside it would be read out on every tick. When one read-out deserves an announcement (a connection dropping, a build failing), put aria-live="polite" on that item alone.

<StatusBarItem aria-live="polite" tone={online ? "success" : "default"}>
  {online ? "Connected" : "Reconnecting…"}
</StatusBarItem>

API reference#

FAQ#