Sakuga Back to Sakuga
Theme
Sound
Jump to a component

Core · Navigation

FlowHeader

FlowHeader is the full-screen flow's top bar: close (nothing is kept), what is being made and for what, the steps when there are several, then what sits at the end.

@anicanon/sakuga/uiv1.0Used onWeb · iOS · Android

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Coming soon

FlowHeader for iOS is in the roughs. The tokens it will read are the ones on this page, the same on every platform.

Android

Coming soon

FlowHeader for Android is in the roughs. The tokens it will read are the ones on this page, the same on every platform.

Use it for
The top bar of a full-screen flow: close, what is being made and for what ("New issue · Bad Memories"), the steps when there are several, and the balance.
Not for

Guidelines

  • title and context: "New issue · Bad Memories". closeLabel says what closing does ("Close. Nothing is created").
  • steps and current draw a Stepper in the middle, only when the flow has more than one step.
  • slot="end": the balance (AniCanonKit.FragmentBalance) in AniCanon™.
  • One way out per screen: this close button. Back lives in FlowFooter, and only when a step precedes.
FlowHeaderExample.jsxReact
import { FlowHeader } from '@anicanon/sakuga/ui';
import { FragmentBalance } from '@anicanon/sakuga/anicanonkit';

export default function FlowHeaderExample() {
  return (
    <FlowHeader
      title="New character"
      context="EBA"
      closeLabel="Close. Nothing is created"
      steps={['Basics', 'How to make', 'Approve']}
      current={1}
    >
      <span slot="end">
        <FragmentBalance amount="9,427" />
      </span>
    </FlowHeader>
  );
}

PropsFlowHeaderProps

titlerequired
string
context
string
closeLabel
stringDefault 'Close'
What closing does, e.g. "Close. Nothing is created".
closeHref
string
onClose
MouseEventHandler
steps
string[]
current
number
stepsLabel
string
children
ReactNode
slot="end" (or the children): what sits at the end, the balance in AniCanon™.
className
string
FlowHeaderExample.swiftiOS · coming soon
FlowHeaderExample.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

flowhead-ruleFlowHeader: the rule under the bar.
border-hairlineshade-a08rgba(11,10,16,0.08)
border-hairlinewhite-a06rgba(255,255,255,0.06)
flowhead-titleFlowHeader: what is being made.
text-primaryneutral-925#0b0a10
text-primaryneutral-0#ffffff
flowhead-contextFlowHeader: what it is made for.
text-mutedneutral-600#5c5b67
text-mutedneutral-400#a3a3a7

Space and shape

flowhead-gap
gap-lg
12px
flowhead-height
its own value
64px
flowhead-padding-x
inset-xl
24px
flowhead-edge-bottom-width
its own value
1px
flowhead-end-gap
gap-lg
12px

Type

flowhead-title-font
text-title-4
700 17px/22px "Funnel Display", "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
flowhead-title-span-font
text-body
400 14px/20px "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
A header element: Tab reaches the close button (named by closeLabel, default "Close"; a link with closeHref) and then whatever sits at the end. The title and context are a level-1 heading, and the steps are a list named by stepsLabel (default "Steps") with the current one marked "current step".
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.