LiveStatusBar

Connection status for a realtime view: a colored dot plus its text, and children for what the view shows next to it (counts, a last-update time). A polite role="status", so a change of status is announced without interrupting. Meaning never relies on color alone.

Import

import { LiveStatusBar } from "@jcsoftdev/ui/states";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/states/live-status-bar.

Usage

<LiveStatusBar status="live">
  <span className="text-ink-2">3 orders waiting</span>
</LiveStatusBar>

Props

Prop	Type	Default	Description
status *	"live" | "reconnecting" | "offline"
labels	Partial<Record<LiveStatus, string>>		Replaces the localized text of a status, e.g. { live: "Connected" }.
classNames	Partial<Record<LiveStatusBarPart, string>>		Per-part classes merged with cn; consumer classes win. className still targets the root and is merged last.

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Live
• Reconnecting
• Offline

Source

packages/ui/src/states/live-status-bar/live-status-bar.tsx