Timeline

時系列のイベントを縦に表示するタイムラインコンポーネント。

GitHub でソースを見る

プレビュー

  • 2026年2月19日v0.1.0 リリース初回公開バージョン。41コンポーネントを収録。
  • 2026年2月15日ベータテスト開始社内チームによるレビューとフィードバック。
  • 2026年2月10日デザイントークン策定カラー、タイポグラフィ、スペーシングの定義。
  • 2026年2月1日プロジェクト開始

使いどころ

使う場面

  • 出来事を時系列で縦に並べる（変更履歴、注文の進捗、監査ログなど）
  • tone で出来事の性質を点の色に出す（positive は完了、warning は保留、negative は失敗、info は通知）。tone は色の補助で、文言でも伝える
  • time に日時、title に出来事、description に詳細を渡す。新しいものを上にするか下にするかは画面で揃える

使わない場面

  • 手順の進行を示す UI。今どの段階かを見せるなら Stepper を使う
  • 並び順に意味がない一覧。List を使う
  • 日時と値を列で比べる履歴。Table を使う
  • 旧 prop の status は使わない。tone に統一する

使い方

<Timeline>
  <TimelineItem
    time="2026-02-19"
    title="イベント名"
    description="詳細説明"
    tone="positive"
  />
</Timeline>

プロパティ

名前型デフォルト説明
children必須ReactNodeなしTimelineItem の並び
timestringなしタイムスタンプ表示（TimelineItem）
titleReact.ReactNodeなしイベントのタイトル（TimelineItem）
descriptionReact.ReactNodeなしイベントの詳細説明（TimelineItem）
tone"default" | "positive" | "negative" | "warning" | "info""default"ドットの意味色（TimelineItem。旧 status）

型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。

アクセシビリティ

  • <ul> と <li> で出力され、項目数は伝わるが、点の色は読み上げられない。状態の違いは title か description の言葉に含める
  • time は文字として読まれるだけで、<time> 要素ではない。機械的に日時を扱う必要があるときは、利用側で title や description に <time dateTime> を使う
  • 点は装飾で、読み上げには出ない

文言

  • title は「何が起きたか」を過去形か体言止めで書く（「請求書を発行」「承認が完了」）
  • time は同じ書式で揃える。相対表記（3 分前）と絶対表記（10 月 29 日 14:30）を混ぜない

関連するコンポーネント