Status Bar
Bottom status bar with prefix, center, and suffix slots.
<arc-status-bar>Overview
StatusBar is a compact informational strip for the bottom of an application window, as in code editors, terminals, and desktop applications. It renders at a fixed 28px height with a monospace font (--font-mono) and muted text color, for status indicators, cursor positions, encoding info, and connection states.
The component uses a three-region flexbox layout with named slots: start (flex-shrink: 0, anchored to the leading edge), default (centered, flex: 1), and end (flex-shrink: 0, anchored to the trailing edge via margin-left: auto). The start and end indicators stay pinned to their edges while center content fills the remaining space.
The position prop controls whether the status bar flows with the page layout (static, the default) or sticks to the bottom of the viewport (fixed). Fixed positioning sets bottom: 0, left: 0, right: 0 with a z-index of 100, so the bar stays put while scrolling. The bar renders with role="status" for screen reader announcements of dynamic content changes.
Guidelines
When to use
- Use StatusBar for editor-style applications that need persistent status indicators
- Place cursor position, line numbers, or encoding info in the prefix slot
- Put connection status, sync state, or version info in the suffix slot
- Use the center slot for transient messages like "Saved" or "Building..."
- Set position="fixed" when the status bar should persist during scrolling
When not to use
- Do not use StatusBar as a primary navigation bar; use TopBar or Toolbar instead
- Do not place interactive buttons or form controls in the status bar; keep it informational
- Do not set position="fixed" in layouts where AppShell already manages the bottom edge
- Do not override the 28px height: the compact size is intentional for information density
- Do not use StatusBar for toast-style notifications; use Toast or Alert for user-facing messages
Features
- Compact 28px height with monospace font for data-dense status information
- Three-slot layout: start (pinned), center (flexible), end (pinned)
- Static or fixed positioning via the position prop
- Fixed mode pins to viewport bottom with z-index: 100
- `role="status"` for accessible live-region announcements
- Dark background (`--bg-deep`) with a top border
- Exposed CSS parts (base, prefix, center, suffix) for targeted styling
- Muted 11px text that stays out of the way of primary content
Preview
Usage
<arc-status-bar>
<div slot="prefix">Ln 24, Col 15</div>
<div>UTF-8</div>
<div slot="suffix">100%</div>
</arc-status-bar>import { StatusBar } from '@arclux/arc-ui-react';
export default function Example() {
return (
<StatusBar>
<div slot="prefix">Ln 24, Col 15</div>
<div>UTF-8</div>
<div slot="suffix">100%</div>
</StatusBar>
);
}<script setup>
import { StatusBar } from '@arclux/arc-ui-vue';
</script>
<template>
<StatusBar>
<div slot="prefix">Ln 24, Col 15</div>
<div>UTF-8</div>
<div slot="suffix">100%</div>
</StatusBar>
</template><script>
import { StatusBar } from '@arclux/arc-ui-svelte';
</script>
<StatusBar>
<div slot="prefix">Ln 24, Col 15</div>
<div>UTF-8</div>
<div slot="suffix">100%</div>
</StatusBar>import { Component } from '@angular/core';
import { StatusBar } from '@arclux/arc-ui-angular';
@Component({
imports: [StatusBar],
template: `
<arc-status-bar>
<div slot="prefix">Ln 24, Col 15</div>
<div>UTF-8</div>
<div slot="suffix">100%</div>
</arc-status-bar>
`,
})
export class MyComponent {}import { StatusBar } from '@arclux/arc-ui-solid';
export default function Example() {
return (
<StatusBar>
<div slot="prefix">Ln 24, Col 15</div>
<div>UTF-8</div>
<div slot="suffix">100%</div>
</StatusBar>
);
}import { StatusBar } from '@arclux/arc-ui-preact';
export default function Example() {
return (
<StatusBar>
<div slot="prefix">Ln 24, Col 15</div>
<div>UTF-8</div>
<div slot="suffix">100%</div>
</StatusBar>
);
}<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-status-bar — requires status-bar.css + base.css (or arc-ui.css) -->
<div class="arc-status-bar">
<div class="status-bar" role="status">
<div class="status-bar__left">
</div>
<div class="status-bar__center">
StatusBar
</div>
<div class="status-bar__right">
</div>
</div>
</div><!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-status-bar — self-contained, no external CSS needed -->
<div class="arc-status-bar" style="display: block; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: rgb(124, 124, 137)">
<div style="display: flex; align-items: center; height: 28px; padding: 0 8px; background: rgb(3, 3, 7); border-top: 1px solid rgb(24, 24, 30); gap: 8px" role="status">
<div style="display: flex; align-items: center; gap: 8px; flex-shrink: 0">
</div>
<div style="display: flex; align-items: center; gap: 8px; flex: 1; justify-content: center">
StatusBar
</div>
<div style="display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto">
</div>
</div>
</div>API
position'static' | 'fixed''static'- Controls whether the status bar flows with the document (static) or pins to the bottom of the viewport (fixed). Fixed mode sets bottom: 0, left: 0, right: 0 with z-index: 100.
See Also
- Top BarFixed header bar that anchors every page with a brand slot on the left, an optional center navigation area, and a right-aligned actions region for user controls, search, and settings.
- FooterPage footer with branding, link columns, and legal text. Provides a structured layout with slots for a logo, navigational link groups, social icons, and copyright information.
- BadgeCompact pill-shaped label for status indicators, category tags, and notification counts. Seven color variants encode meaning across dashboards, tables, and card layouts.