StatusBar
Feedback

StatusBar

Application footer showing connection state, fleet metrics, region, and revision.

Component behavior

StatusBar renders a fixed-height, 28-pixel footer beneath a scrolling region. Cells display connection state, counts, region, or revision.

Use cases
  • Application footers paired with a TopBar.
  • Connection state, worker counts, region, and configuration revision.
  • A fixed 28-pixel footer beneath scrolling content.
Alternatives

Banner: the condition needs content-area text or actions.

TopBar: the bar belongs above content and displays location.

StatusBadge: one status belongs beside a heading.

Props

Two clusters and an optional connection cell. Strings in left and right become StatusBarItems on their own; pass that component when the cell has a label, a tone, or a figure that should read as mono.

StatusBarProps props
PropTypeDefaultDescription
leftReactNode[]—Leading cluster. Strings are wrapped in StatusBarItem.
rightReactNode[]—Trailing cluster, pinned to the far edge.
connectedbooleantrueDisplays a live connection cell. Set false to hide the cell.
connectedLabelReactNode"Connected"Value of the built-in connection cell.

StatusBarItem

The unit of the bar. A dim name, a stronger value, and the same tone scale StatusText uses. pulse rings the dot for a state that is changing, not merely true.

StatusBarItemProps props
PropTypeDefaultDescription
labelReactNode—Dim name for the fact, shown before the value.
childrenReactNode—Displayed value. String entries in left and right use this field.
iconReactNode—Leading glyph. Replaces the dot. Pass an already-sized icon; 11px fills the cell without crowding it.
toneToneProp—Any tone, or an alias. Colors the value and, unless an icon is given, brings the leading dot.
dotboolean—Leading status dot. Defaults to on when tone is set and no icon is given.
pulseboolean—Animates expanding rings around the dot.
monoboolean—Renders the value in monospace with tabular numerals.
onClick() => void—Turns the item into a button with the same hover wash TopBarIconButton uses.

Examples

Connected

StatusBar (connected)

Own connection state

A socket with more than two states draws its own cell and passes connected={false} so the built-in one stays out of the way.

StatusBar (disconnected)

Strings

Bare strings still work; each becomes a cell, so a first sketch does not have to import StatusBarItem. Use the labelled form in a product status bar.

StatusBar strings
ImportTSX
import { StatusBar, StatusBarItem } from "@solarius/onset";

<StatusBar
  left={[
    <StatusBarItem label="Region">us-east-1</StatusBarItem>,
    <StatusBarItem label="Release" mono>
      v2.4.1
    </StatusBarItem>,
  ]}
  right={[
    <StatusBarItem label="CPU" mono>
      12%
    </StatusBarItem>,
  ]}
/>;