StatusBar

The thin bar at the bottom of the desktop app. StatusBarItem shows one fact, as text, a button or a link; StatusPill is a rounded setting such as the theme.

StatusBar
StatusBarItem
StatusPill

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, StatusBar

Pills

SavedOfflineFailedSyncing

Dark theme, StatusBar

Pills

SavedOfflineFailedSyncing

High contrast theme, StatusBar

Pills

SavedOfflineFailedSyncing

UsageLink to the section Usage

tsx

import { StatusBar, StatusBarItem, StatusPill } from '@skribly/ui/shell'

tsx

<StatusBar label="Status" end={<StatusPill icon={<Moon />} onPress={cycle} tip="Switch theme">Night</StatusPill>}>
  <StatusBarItem icon={<GitBranch />}>main</StatusBarItem>
  <StatusBarItem tone="danger" onPress={openDocker} tip="Containers that crashed">2 with problems</StatusBarItem>
</StatusBar>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

A named contentinfo landmark that wraps to a second line on a narrow window.
Each tone pairs a colour with its own glyph and words: a tick for ok, an i for info, a triangle for warnings and a cross for errors.
Interactive items are at least 24px tall. isLive announces an item politely; it is off by default, so counters do not chatter.

This demo runs through axe in all three themes on every test run. See what the tests check.