Sakuga Back to Sakuga
Theme
Sound
Jump to a component

AniCanonKit · Story

PanelHeader

PanelHeader opens every side panel in Story with the same grammar: a small eyebrow naming what the panel shows, the title, an optional subtitle; icon actions (most common first, the rest in ⋯), then close.

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

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Web only

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

Android

Web only

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

Use it for
The head of every side panel in Story and of an inspector: an eyebrow, the title, an optional subtitle, icon actions, then close (none on the world panel or an inspector).
Not for

Guidelines

  • Actions go in slot="actions". A picture (a place's art, a portrait) goes in slot="media".
  • The world panel is the default and has no close (close={false}).
  • An inspector opens with it too: what is selected as the title, where it stands as the subtitle, its delete as the one action, and no close (close={false}).
  • onClose runs on close. level sets the title's heading level (2 by default).
PanelHeaderExample.jsxReact
import { IconButton } from '@anicanon/sakuga/ui';
import { PanelHeader } from '@anicanon/sakuga/anicanonkit';

export default function PanelHeaderExample() {
  return (
    <PanelHeader
      eyebrow="Event · Arc 2"
      title="Fire at Sé"
      subtitle="Ep 3 · p.14"
    >
      <span slot="actions">
        <IconButton variant="plain" icon="edit" label="Edit" />
      </span>
    </PanelHeader>
  );
}

PropsPanelHeaderProps

titlerequired
string
eyebrow
string
subtitle
string
close
boolean
closeLabel
string
onClose
MouseEventHandler
level
numberDefault 2.
The title's heading level.
media
ReactNode
The picture (as slot="media").
actions
ReactNode
The actions (as slot="actions").
children
ReactNode
className
string
PanelHeaderExample.swiftiOS · coming soon
PanelHeaderExample.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

panel-eyebrowPanelHeader: the small label naming what the panel shows.
text-accentcamellia-700#b42354
text-accentcamellia-400#f4779f

Space and shape

panel-header-gap
gap-xs
4px
panel-header-media-margin-right
gap-md
8px
panel-header-words-gap
gap-2xs
2px

Type

panel-header-words-small-font
text-eyebrow
700 11px/14px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
panel-header-words-small-letter-spacing
tracking-caps
.06em
panel-header-words-b-font
text-title-4
700 17px/22px "Funnel Display", "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
panel-header-words-span-font
text-caption
500 13px/18px "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
Read in order: the eyebrow, the title as a heading (level level, default 2) and the subtitle. Tab then reaches the actions and a close button named by closeLabel (default "Close") that runs onClose.
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.