StatusBar
App-owned connection and background task status with localized counts and persistent actions.@gemologic/sheen-patterns · applicationPlayground
This example has no scalar controls. Its validated source remains interactive below.
<StatusBar connection="connected" tasks={2} counts={[{ label: "Rows", value: 1200 }]} />Variant matrix
Workspace status
Anatomy
- Package
@gemologic/sheen-patterns- Source
packages/patterns/src/StatusBar.tsx- Tokens
--sheen-color-fg-muted--sheen-color-border--sheen-space-inline-sm
Accessibility
Role: group, statusKeyboard: Tab, Shift+TabDo
- Supply backend health from the app.
- Place the bar in AppShell's statusBar slot.
- Localize count labels in the app.
Do not
- Do not infer backend health from navigator.onLine.
- Do not put rapidly changing counts in a live region.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
label | string | — | Accessible group name; defaults to the scoped application-status message. |
connection | ConnectionState | — | App-supplied connection state. Omitted state renders no connection indicator; browser connectivity is never detected. |
tasks | number | — | Nonnegative safe-integer pending task count. Zero or omission hides the task indicator. |
counts | readonly StatusCount[] | — | Nonnegative safe-integer counts with unique nonempty app-localized labels, formatted in the scoped locale. |