Sakuga Back to Sakuga
Theme
Sound
Jump to a component

Core · Containers

StatusBar

StatusBar is the slim bar at the foot of a working surface such as the writing room: where the work sits, whether it is saved, how long it is.

@anicanon/sakuga/uiv1.0Used onWeb

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Web only

StatusBar is made for the web, and isn’t part of Sakuga for iOS yet.

Android

Web only

StatusBar is made for the web, and isn’t part of Sakuga for Android yet.

Use it for
The slim bar at the foot of a working surface such as the writing room: where the work sits, whether it is saved, how long it is.
Not for
  • Actions on the workViewHeader
  • The transport and timecode under the editor's pictureMonitorBar
  • The foot of a step in a full-screen flowFlowFooter
  • Confirming that something finishedToast

Guidelines

  • Children are the items, in order; rules separate them. One child with slot="end" sits at the far end (a cost note).
  • Keep it to facts and one control at most. Actions belong in the top bar.
  • A child with slot="status" (or status) is the saved state: the one item read aloud when it changes. Other items are never announced.
StatusBarExample.jsxReact
import { Button, StatusBar } from '@anicanon/sakuga/ui';

export default function StatusBarExample() {
  return (
    <StatusBar>
      <Button variant="ghost" size="sm" icon="bookmark" iconEnd="chevron-down">
        Starts after Fire at Sé
      </Button>
      <span>Saved</span>
      <span>106 words · 3 sections</span>
      <span slot="end">Refunded if finding events fails</span>
    </StatusBar>
  );
}

PropsStatusBarProps

items
ReactNode[]
Or children, in order.
end
ReactNode
Or slot="end".
status
ReactNode
Or slot="status".
children
ReactNode
className
string
StatusBarExample.swiftiOS · coming soon
StatusBarExample.ktAndroid · coming soon

Each token reads a role, and the role lands on a value in each theme. Change the role and every component that reads it follows.

Colour

statusbar-bgStatusBar: surface.
bg-surfaceneutral-0#ffffff
bg-surfaceneutral-900#111117
statusbar-borderStatusBar: top rule.
border-hairlineshade-a08rgba(11,10,16,0.08)
border-hairlinewhite-a06rgba(255,255,255,0.06)
statusbar-fgStatusBar: items.
text-mutedneutral-600#5c5b67
text-mutedneutral-400#a3a3a7
statusbar-sepStatusBar: separators.
border-dividershade-a12rgba(11,10,16,0.12)
border-dividerwhite-a12rgba(255,255,255,0.12)

Space and shape

statusbar-gap
gap-lg
12px
statusbar-height
its own value
48px
statusbar-padding-right
inset-lg
16px
statusbar-padding-left
inset-sm
8px
statusbar-edge-top-width
its own value
1px
statusbar-sep-width
line-hairline
1px
statusbar-sep-height
its own value
16px
statusbar-item-gap
gap-sm
6px

Type

statusbar-font
text-small
500 12px/16px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif

Checked automatically with axe-core 4.11.4 against WCAG 2.2 A and AA, on the live preview above, in light and dark, on 26 October 2026.

Result
No issues found, in light or in dark.
By design
Not focusable itself; its items read as text in order and anything focusable in them takes focus. Only the slot="status" child (or status) is read when it changes, through a status region that is always there.
Not tested
The automated check doesn't test keyboard use, focus order or what a screen reader says. The lines above are the design system's own account of them.