ボトムアクションバーBottomActionBarExperimental

The sticky mobile action dock every transactional / real-time consumer screen ends with: a running summary on the left (合計金額 / 到着まで○分 / 選択件数) and the primary CTA on the right (呼ぶ / 支払う / 予約する), pinned to the bottom with a top border and safe-area-inset padding (home indicator). The bottom bookend to PageHeader (the top app bar) — for checkout, ride-hailing, booking, food-order, seat-select. children = the summary slot, actions = the CTA slot; set stack for a full-width CTA above the summary, maxWidth to centre on tablet. RSC-safe (no client deps).

プレビュー

配車内容の確認

乗車地：渋谷駅前 / 行き先：六本木ヒルズ

車種：JPNタクシー・到着まで約4分

（スクロールしてもバーは下に固定）

見積もり料金¥1,200〜 到着 4分

左に走行サマリ（料金/ETA）、右に主要CTA。safe-area-inset で home-indicator を回避。PageHeader（上）の対。

Props

表は横にスクロールできます
プロパティ型初期値説明
childrenReactNode-左の走行サマリ（合計金額/到着まで○分/件数）。残り幅を取る。
actionsReactNode-右寄せのアクション（主要CTA＋任意の副次）。各 ≥44px。
stackbooleanfalseCTA をサマリの上に全幅で積む（横並びでなく縦）。
stickybooleantrueスクロールコンテナの下部に固定。
maxWidth"sm" | "md" | "lg" | "xl"-タブレット/デスクトップで中央寄せ＋幅上限。

Usage

import { BottomActionBar, Button } from "@gunjo/ui"

<BottomActionBar actions={<Button size="lg" onClick={call}>この内容で呼ぶ</Button>}>
  <div className="flex flex-col">
    <span className="text-xs text-muted-foreground">見積もり料金</span>
    <span className="text-base font-semibold tabular-nums">¥1,200〜・到着 4分</span>
  </div>
</BottomActionBar>

// full-width CTA above the summary:
<BottomActionBar stack actions={<Button size="lg">支払う</Button>}>…</BottomActionBar>

使用コンポーネント

PageHeaderButtonAmountBreakdown