Sakuga Back to Sakuga
Theme
Sound
Jump to a component

AniCanonKit · Productions

EditorHeader

EditorHeader is the editor's top bar: what is being edited, its timecode, whether it rebuilds exactly, and the editor's actions.

@anicanon/sakuga/anicanonkitv1.0Used onWebFrom AniCanon™

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Web only

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

Android

Web only

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

Not for
  • A production view outside the editorViewHeader
  • A full-screen flow that makes one thing step by stepFlowHeader

Guidelines

  • title is the production's name; timecode where the playhead is in the whole cut.
  • status is a short line with a check ("Rebuilds exactly"), statusHint its longer note on hover.
  • Actions go in as children, at the right.
EditorHeaderExample.jsxReact
import { Button } from '@anicanon/sakuga/ui';
import { EditorHeader } from '@anicanon/sakuga/anicanonkit';

export default function EditorHeaderExample() {
  return (
    <EditorHeader
      title="The First Watch"
      timecode="Cut · 2:41 + 04f of 6:40"
      status="Rebuilds exactly"
    >
      <Button variant="primary" size="sm">
        Screen the cut
      </Button>
    </EditorHeader>
  );
}

PropsEditorHeaderProps

titlerequired
string
timecode
string
status
string
e.g. "Rebuilds exactly"
statusHint
string
children
ReactNode
The actions.
EditorHeaderExample.swiftiOS · coming soon
EditorHeaderExample.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.

Space and shape

editor-status-icon-size
icon-size-xs
14px
editor-head-gap
gap-lg
12px
editor-head-height
its own value
56px
editor-head-padding-x
inset-lg
16px
editor-head-border-bottom-width
line-hairline
1px
editor-status-gap
gap-sm
6px
editor-status-height
its own value
28px
editor-status-padding-x
inset-sm
8px
editor-status-radius
radius-full
9999px

Type

editor-head-b-font
text-title-4
700 17px/22px "Funnel Display", "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
editor-tc-font
text-caption-strong
600 13px/18px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
editor-status-font
text-small-strong
600 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
The title is a level-1 heading; the timecode and status are read as text, the status's check is hidden, and the actions are their own buttons in order.
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.