# 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).

Source: https://ui.jcsoftdev.com/docs/components/live-status-bar

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

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

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

## Usage

```tsx
<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](/storybook/?path=/story/states-livestatusbar--live)
- [Reconnecting](/storybook/?path=/story/states-livestatusbar--reconnecting)
- [Offline](/storybook/?path=/story/states-livestatusbar--offline)

## Source

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