デスクトップページヘッダーDesktopPageHeaderExperimental
A dense per-screen title bar for desktop consoles, with optional eyebrow, subtitle, and trailing actions.
プレビュー
状態とバリエーション
コンテキスト＋操作
営業所などの文脈と、画面固有の操作を同じ見出しにまとめます。
群青交通 東京営業所
車両管理・整備コンソール
稼働状況、車検・保険の期限、入庫予定を一元管理
タイトルのみ
補助情報や操作が無い場合も、同じ見出しのリズムを維持します。
日次運行レポート
長いタイトルと、多い操作
タイトルは残った幅で折り返し、操作は行を折り返しても末尾に残ります。文字数が読めない画面でも崩れません。
群青交通 · 品川営業所 · 車両管理
車両点検と整備予定の一覧（2026年度 第2四半期・全営業所ぶん）
期限が近い順に並んでいます。整備工場の空きと突き合わせて予定を組みます。
下書き
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| title | ReactNode | - | 画面の主見出し。h1 として描画します。 |
| eyebrow | ReactNode | - | タイトル上の任意コンテキスト（事業者・営業所・breadcrumb など）。 |
| subtitle | ReactNode | - | タイトル下の任意説明。 |
| actions | ReactNode | - | 画面固有の末尾操作または状態。 |
| className / HTML attributes | string / HTMLAttributes<HTMLElement> | - | header 要素へ転送します。 |
使い方
"use client";
import * as React from "react";
import { Badge, Button, DesktopPageHeader } from "@gunjo/ui";
export function FleetHeader() {
const [saved, setSaved] = React.useState(false);
return (
<DesktopPageHeader
eyebrow="Gunjo Transit · Tokyo depot"
title="Fleet maintenance console"
subtitle="Track availability, deadlines, and workshop plans"
actions={
<>
{saved && <Badge variant="success">Saved</Badge>}
<Button size="sm" variant="outline" onClick={() => setSaved(true)}>
Save updates
</Button>
</>
}
/>
);
}