Status Bar — ARC UI

Components

Status Bar

layout

static

<arc-status-bar>

Overview

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 start slot
Put connection status, sync state, or version info in the end 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

Use StatusBar as a primary navigation bar -- use TopBar or Toolbar instead
Place interactive buttons or form controls in the status bar -- keep it informational
Set position="fixed" in layouts where AppShell already manages the bottom edge
Override the 28px height -- the compact size is intentional for information density
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 subtle top border for visual separation
Exposed CSS parts (base, start, center, end) for targeted styling
Muted 11px text that stays out of the way of primary content

Preview

Ln 24, Col 15 UTF-8 · LF · TypeScript Spaces: 2 · 100%

Usage

<arc-status-bar>
  <div slot="start">Ln 24, Col 15</div>
  <div>UTF-8</div>
  <div slot="end">100%</div>
</arc-status-bar>

import { StatusBar } from '@arclux/arc-ui-react';

<StatusBar>
  <div slot="start">Ln 24, Col 15</div>
  <div>UTF-8</div>
  <div slot="end">100%</div>
</StatusBar>

<script setup>
import { StatusBar } from '@arclux/arc-ui-vue';
</script>

<template>
  <StatusBar>
    <div slot="start">Ln 24, Col 15</div>
    <div>UTF-8</div>
    <div slot="end">100%</div>
  </StatusBar>
</template>

<script>
  import { StatusBar } from '@arclux/arc-ui-svelte';
</script>

<StatusBar>
  <div slot="start">Ln 24, Col 15</div>
  <div>UTF-8</div>
  <div slot="end">100%</div>
</StatusBar>

import { Component } from '@angular/core';
import { StatusBar } from '@arclux/arc-ui-angular';

@Component({
  imports: [StatusBar],
  template: `
    <StatusBar>
      <div slot="start">Ln 24, Col 15</div>
      <div>UTF-8</div>
      <div slot="end">100%</div>
    </StatusBar>
  `,
})
export class MyComponent {}

import { StatusBar } from '@arclux/arc-ui-solid';

<StatusBar>
  <div slot="start">Ln 24, Col 15</div>
  <div>UTF-8</div>
  <div slot="end">100%</div>
</StatusBar>

import { StatusBar } from '@arclux/arc-ui-preact';

<StatusBar>
  <div slot="start">Ln 24, Col 15</div>
  <div>UTF-8</div>
  <div slot="end">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">
   Status Bar
   </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">
   Status Bar
   </div>
   <div style="display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto">

   </div>
   </div>
</div>

API

Prop	Type	Default	Description
`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.

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

See Also

ARC UI

Arclight