StatusBar
A bottom silent information strip: left/right segmented cells + clickable items + background activity spinner + warning/progress semantic colors. Distinct from oas-footer (a content footer) — the statusbar carries status vocabulary (aggregate counts, current selection, sync state).
Basic usage
The default slot holds left-segment cells (workspace-wide aggregate state); slot="end" holds the right segment (secondary/context items, pushed to the far end, mirrored in RTL). Numeric cells combine value + label (value uses tabular numerals). Fully empty cells (no label / value / icon / spinning) render nothing (the host gets data-empty and drops out entirely — no layout footprint, no leftover gap).
Scene counts, selection and sync state
Clickable cells (button)
The button boolean attribute renders the cell as a native button (keyboard reachable); clicking dispatches oas-item-click (detail { value, label }, listenable on the container or the host).
Cells that trigger commands
Click the clickable items in the left segment and watch the oas-item-click feedback.
Semantic colors and background activity (status / spinning)
The status semantic tiers: default / info / warning / error / progress — warning/error use background fills (reserved for special, necessary cases per status-bar convention), info/progress only tint the text; spinning shows a background-activity spinner (stopped under prefers-reduced-motion).
Status tiers
Icons (icon)
The icon attribute pulls from the built-in icon registry (@oas-ui/icons; unknown names render nothing).
Icon cells
RTL
With dir="rtl" on the container the component mirrors automatically: data-rtl hook + logical-properties-only layout; the end segment is pushed to the far end of the writing direction.
RTL mirror
API
oas-statusbar
Attributes
| Attribute | Description | Type | Default |
|---|---|---|---|
label | Accessible name (falls back to the i18n "Status bar" default) | string | — |
Slots
| Name | Description |
|---|---|
| default | Left-segment status cells (workspace-wide aggregate state) |
end | Right-segment status cells (secondary/context items, pushed to the far end of the writing direction) |
CSS Variables
| CSS Variable | Default |
|---|---|
--oas-statusbar-bg | var(--oas-color-bg-elevated) |
--oas-statusbar-height | 24px |
oas-statusbar-item
Attributes
| Attribute | Description | Type | Default |
|---|---|---|---|
button | Renders as a native button (clickable, keyboard reachable); read-only div semantics by default | boolean | — |
icon | Built-in icon name (@oas-ui/icons registry; unknown names render nothing) | string | — |
label | Text label | string | — |
spinning | Background-activity spinner (stopped under prefers-reduced-motion) | boolean | — |
status | Semantic color tier: default / info / warning / error / progress — warning/error use background fills (reserved for special, necessary cases), info/progress only tint the text; invalid values fall back to default with a one-time warning | string | default |
value | Numeric / status value (rendered in tabular numerals) | string | — |
Events
| Event | Description |
|---|---|
oas-item-click | Dispatched on click in button mode; detail { value, label }; bubbles + composed (listenable on the container or the host) |
CSS Variables
| CSS Variable | Default |
|---|---|
--oas-statusbar-error-bg | var(--oas-color-danger) |
--oas-statusbar-info-color | color-mix(in srgb, var(--oas-color-info-text) 88%, var(--oas-color-text-primary)) |
--oas-statusbar-item-height | 22px |
--oas-statusbar-item-hover-bg | var(--oas-color-bg-hover) |
--oas-statusbar-progress-color | var(--oas-color-primary-text) |
--oas-statusbar-warning-bg | var(--oas-color-warning) |