videorc/uiStatus Bar
The window's 26 px status bar. The session state on the left, and quiet shortcut hints on the right that stay clickable, each pressed while the window it opens is open.
Installation
$ pnpm dlx shadcn@latest add @videorc/status-barUsage
import { StatusBar, StatusBarHint } from "@/components/status-bar";<StatusBar leading={sessionState}>
<StatusBarHint
accelerator="CmdOrCtrl+K"
label="Search"
onClick={openSearch}
/>
<StatusBarHint
accelerator="CmdOrCtrl+P"
label="Preview"
onClick={togglePreview}
pressed={previewOpen}
/>
</StatusBar>Use it for the window's global state and hints. On the left, the session state in the session's own words ("Ready", "Recording", "On air 12:04"), as the door to Health. On the right, the window shortcuts: Search, Preview, Notes, Stream Manager. Every clickable thing in a status bar is a StatusBarHint or a Status Bar Action.
Don't repeat these hints on every surface: global hints live here, once. Don't type a shortcut by hand either: a hint takes an Electron accelerator and prints it per platform through Shortcut Keys.
In a narrow window, labelClassName hides a hint's word and keeps its key: labelClassName="hidden md:inline".
Theming
| Token or attribute | Meaning |
|---|---|
h-status-bar | The 26 px bar |
border-t, border-border | The hairline above it |
text-label font-normal | 11 px at the body's weight |
text-muted-foreground | The bar's own text, and a hint's key |
text-subtle | A hint's word, brightening to text-foreground on hover and while pressed |
STATUS_BAR_ACTION_CLASS | The 20 px look every hint and action shares |
data-slot | status-bar, status-bar-leading, status-bar-trailing, status-bar-hint |
Keyboard
| Key | Action |
|---|---|
Tab | Moves through the hints |
Enter, Space | Runs a hint, as its shortcut would |
The shortcuts themselves are the app's to bind.
Accessibility
The bar is a <footer>. A hint is a button named by its key and its word ("⌘K Search"), and pressed sets aria-pressed. Put the session state in a polite live region (role="status") so a change is announced, and hide its ticking clock from it with aria-hidden, or every second would be read out.
API reference
StatusBar
Prop
Type
StatusBarHint
Prop
Type
Window Frame
The frame of a single-pane window and its header row. The content coat over the window coat, and a 40 px header that shares its line with the macOS traffic lights, carries the window's title and drags the window.
Status Bar Action
One action in a status bar. An icon, a word or both, with its shortcut, named for assistive tech and on hover by a tooltip, never a native title. It can be a toggle, or a menu's trigger.