ページヘッダーPageHeaderExperimental

The mobile app bar / page header every consumer phone screen opens with: a leading back button, a title (+ optional subtitle), and a trailing action slot, sticky to the top with a header landmark, a bottom border and safe-area-inset padding (notch). Touch targets are ≥44px; title align left (default) or center (iOS-style). The kit's Header / AppRail are desktop app/docs chrome — this is the lightweight per-page bar for a phone (booking flows, finders, trackers, detail pages). Pass onBack for the ≥44px back button, or override the leading slot; actions holds close/refresh/menu buttons.

プレビュー

手荷物追跡

ヤマダ クロウ 様・ABC123

← 戻る / 更新 をタップ：—

予約の確認

↑ align="center"（iOS 風・中央タイトル）。上は既定の左寄せ・sticky。

戻る/アクションは 44px のタッチ標的

Props

表は横にスクロールできます
プロパティ型初期値説明
titleReactNode-ページタイトル。
subtitleReactNode-タイトル下の副次行（任意）。
onBack() => void-戻るハンドラ。指定すると先頭に ≥44px の戻るボタンを描画。
backLabelstring"戻る"戻るボタンのアクセシブル名。
leadingReactNode-先頭スロットの差し替え（戻るボタンの代わり）。
actionsReactNode-末尾のアクション（閉じる/更新/メニュー 等）。
stickybooleantrueスクロールコンテナの上部に固定。
align"left" | "center""left"タイトル寄せ。center は iOS 風の中央タイトル。

Usage

import { PageHeader, Button } from "@gunjo/ui"
import { IconRefresh } from "@tabler/icons-react"

<PageHeader
  title="手荷物追跡"
  subtitle="ヤマダ クロウ 様・ABC123"
  onBack={() => router.back()}     // ≥44px back button
  actions={
    <Button size="icon" variant="ghost" aria-label="更新">
      <IconRefresh className="size-5" />
    </Button>
  }
/>

使用コンポーネント

ButtonHeader