StatusBar

When to useLink to "When to use"

• The status line of an app shell: what is connected, where the cursor is, what needs attention.
• Short, glanceable state with a few quick actions behind it (switch connection, show problems).

Use something else when:

• the row holds actions rather than state: a Toolbar
• the message needs reading or acting on now: a Notice or a Toast
• the bar is the app's menu: a Menubar
• it is a page footer with links: SiteFooter

UsageLink to "Usage"

import { StatusBar, StatusBarSegment } from "@arshad-shah/cynosure";
import { gitBranch, warning } from "@arshad-shah/cynosure/icons";

<StatusBar
  label="Status"
  start={
    <>
      <StatusBarSegment
        variant="solid"
        tone="accent"
        dot
        dotTone="success"
        dotLabel="Connected"
        popover={<ConnectionList />}
        popoverLabel="Connections"
      >
        main-db
      </StatusBarSegment>
      <StatusBarSegment icon={gitBranch} mono>
        feature/login
      </StatusBarSegment>
    </>
  }
  end={
    <>
      <StatusBarSegment mono>Ln 12, Col 4</StatusBarSegment>
      <StatusBarSegment tone="warning" icon={warning} onClick={showProblems}>
        2 warnings
      </StatusBarSegment>
    </>
  }
/>

SegmentsLink to "Segments"

A segment is its text (children) with an icon or a status dot before it. tone colours a plain segment's text and icon, or fills a soft (tinted) or solid segment. mono sets the text in the monospace face, for positions, paths and versions.

The dot is a Badge status dot: dot is true for a steady one or "live" for a pulsing one, in dotTone (default: the segment's tone). When the text does not say the state (a database name beside a green dot), give dotLabel, and the dot becomes part of the segment's name ("Connected main-db"); without it the dot is decoration.

Clickable segments and popoversLink to "Clickable segments and popovers"

With onClick a segment is a Button of size xs, flat and as tall as the bar. With popover it opens that content in a Popover above itself (placement, default top, flips when it does not fit), named by popoverLabel; open, defaultOpen and onOpenChange control it, so another control can open it too.

Long textLink to "Long text"

Text wider than --cy-status-bar-segment-max-width ends in an ellipsis, and the full text shows in a tooltip on hover (and on keyboard focus for a clickable segment). Text that fits has no tooltip.

PropsLink to "Props"

StatusBarSegment takes children, tone, variant, icon, dot, dotTone, dotLabel, mono, label, onClick, popover, popoverLabel, placement, open, defaultOpen, onOpenChange, disabled, className and style.

Behaviour and accessibilityLink to "Behaviour and accessibility"

• Role: toolbar named by label, with aria-orientation="horizontal". Not status: a live region would read out every change in the bar (cursor positions, counters). Announce what matters with Announcer.
• Popover segments have aria-haspopup="dialog", aria-expanded and aria-controls; focus moves into the panel, and arrow keys inside it are the panel's.
• Long text keeps its full text as the accessible name; the tooltip is not a title attribute.
• Right to left: the start cluster sits on the right, and Left and Right swap.
• Shadow DOM: works inside a shadow root (arrow keys, popover and focus return).

TouchLink to "Touch"

Clickable segments look dense but their hit area is at least 24px, and 44px on coarse pointers; the bar keeps its height. A tap opens a popover; tooltips never open on touch.

ThemingLink to "Theming"

Tokens: --cy-status-bar-height, --cy-status-bar-background, --cy-status-bar-border (the top line's colour), --cy-status-bar-font-size, --cy-status-bar-padding-inline (inside each segment), --cy-status-bar-segment-max-width, --cy-status-bar-gap and --cy-status-bar-soft-mix (the tint of a soft segment, static or clickable).

createTheme({ components: { statusBar: { height: "22px", segmentMaxWidth: "24ch" } } });

RelatedLink to "Related"

Toolbar · Badge · Popover · Tooltip · Menubar