AnnouncementBar

ページ最上部に置く 1 行のお知らせ帯

GitHub でソースを見る

プレビュー

使いどころ

使う場面

  • ページ最上部（Navbar の上）に置く 1 行のお知らせ。リリース、メンテナンス、期間限定の告知などに使う
  • children にお知らせの文、action に続きへの導線を渡す。action には Kaze の Link を使う
  • お知らせは一度に 1 つ。複数あるときは最新の 1 つだけを置き、残りは変更履歴に回す

使わない場面

  • Hero の見出しの上に小さなバッジとして置くこと。お知らせは Hero から切り離し、この帯に置く
  • エラーや操作の結果を伝える通知。Alert か Toast を使う
  • 2 行以上になる長い文。要点だけにして、詳細は action のリンク先に書く
  • 背景色や絵文字で目立たせること。文字と罫線だけの静かな見た目を保つ

使い方

<AnnouncementBar action={<Link href="/changelog">変更点を見る</Link>}>
  v1.1 を公開しました。
</AnnouncementBar>

プロパティ

名前型デフォルト説明
children必須ReactNodeなしお知らせの文。1 行に収まる長さにする
actionReactNodeなし続きへの導線。Kaze の Link を渡す
labelstring"お知らせ"ランドマーク（aside）の名前

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

アクセシビリティ

  • <aside> に aria-label="お知らせ" を付けて出力される（complementary のランドマーク）。label で名前を差し替えられる。ページに帯を複数置くときは名前を変えて区別する
  • role は付けず、読み上げを割り込ませない。緊急の通知は Alert（role="alert"）を使う
  • action のリンクは文脈なしでも意味が通る文言にする（「こちら」にしない）

文言

  • 1 文で言い切り、末尾は「。」。例: 「v1.1 を公開しました。Spinner や Table の並べ替えが加わっています。」
  • action は動詞で短く（「変更点を見る」「詳細を読む」）。新しいタブで開くリンクには external を付ける

関連するコンポーネント