Sakuga Back to Sakuga
Theme
Sound
Jump to a component

Core · Navigation

SectionHeader

SectionHeader opens a shelf: a heading, the line that explains what is on it, and an optional See all link.

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

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Coming soon

SectionHeader 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

SectionHeader 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 heading that opens a shelf, with the line that says what is on it ("Shorts · videos under a minute") and an optional See all link.
Not for
  • A labelled group of rows in a Story panel, with its countPanelSection
  • The top of a side panel in StoryPanelHeader
  • The top of a production viewViewHeader
  • The label over a single control in a formField

Guidelines

  • Always write the subtitle. It tells a new viewer what the shelf holds: "Shorts · videos under a minute", "Places in the story".
  • size="lg" (title-2) on desktop, md (title-3) on phone.
  • Give the See all link an ariaLabel with its object ("See all EBA shorts").
  • size="xs" is a label over a strip or a group inside a panel ("The issue, spread by spread"): 12px, no subtitle, no link; children sit at the row's end, such as a key.
  • icon and count head a group in a list (a faction and how many are in it). With no action link, children sit at the row's end (a button).
  • size="sm" (17 px) heads a section inside a page.
SectionHeaderExample.jsxReact
import { SectionHeader } from '@anicanon/sakuga/ui';

export default function SectionHeaderExample() {
  return (
    <>
      <SectionHeader
        title="Shorts"
        subtitle="Vertical videos under a minute from EBA · moments, trailers, behind the scenes"
        action={{ label: 'See all', ariaLabel: 'See all EBA shorts' }}
      />
      <SectionHeader
        size="md"
        title="Cast"
        subtitle="23 characters in the story"
      />
      <SectionHeader size="xs" title="The issue, spread by spread" />
    </>
  );
}

PropsSectionHeaderProps

titlerequired
ReactNode
subtitle
ReactNode
The line that explains the shelf: "Shorts · videos under a minute".
action
{ label: string; href?: string; ariaLabel?: string; onClick?: MouseEventHandler; }
size
'lg' | 'md' | 'sm' | 'xs'
lg = desktop (title-2), md = phone (title-3), sm = a section inside a page (17 px), xs = a label over a strip or a group inside a panel (12px, no subtitle or action).
as
'h2' | 'h3'
id
string
icon
IconName
Heads a group in a list (a faction), with count: how many are in it.
count
ReactNode
children
ReactNode
What sits at the end of the row when there is no action, e.g. a key or a button.
className
string

An IconName is any of the names Icon lists.

SectionHeaderExample.swiftiOS · coming soon
SectionHeaderExample.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

section-header-titleSectionHeader: heading.
text-primaryneutral-925#0b0a10
text-primaryneutral-0#ffffff
section-header-subtitleSectionHeader: the line that explains the shelf.
text-mutedneutral-600#5c5b67
text-mutedneutral-400#a3a3a7
section-header-actionSectionHeader: the See all link.
text-secondaryneutral-800#2e2d36
text-secondaryneutral-200#dcdcde
sec-xs-titleSectionHeader xs: the small label over a section.
text-mutedneutral-600#5c5b67
text-mutedneutral-400#a3a3a7

Space and shape

section-header-gap
gap-xl
16px
section-header-sub-margin-top
gap-xs
4px
section-header-min-height-xs
its own value
32px
section-header-icon-size
icon-size-lg
24px
section-header-title-meta-gap
gap-lg
12px

Type

section-header-title-font-family
font-display
Funnel Display
section-header-title-font-weight
weight-bold
700
section-header-title-font-size-lg
text-subtitle-size
24px
Aa
section-header-title-line-height-lg
text-subtitle-line-height
32px
section-header-title-font-size-md
text-title-3-size
20px
Aa
section-header-title-line-height-md
text-title-3-line-height
26px
section-header-sub-font-size
text-caption-size
13px
Aa
section-header-sub-line-height
text-caption-line-height
18px
section-header-sub-font-weight
text-caption-weight
500
section-header-sub-font-family
font-sans
Funnel Sans
section-header-action-font-family
font-sans
Funnel Sans
section-header-action-font-size
text-label-size
14px
Aa
section-header-action-font-weight
text-label-weight
600
section-header-title-font-xs
text-micro
700 12px/16px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
section-header-title-font-size-sm
text-subtitle-sm-size
16px
Aa
section-header-title-line-height-sm
text-subtitle-sm-line-height
22px
section-header-count-font
text-micro
700 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 heading (as, default h2) with its count read inside it, then the subtitle as text, and Tab reaches the See all link, named by action.ariaLabel or action.label (an action with only onClick is a button, never a link to #); the icon is hidden. At size xs the title is plain text, not a heading.
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.