Alert

ユーザーに重要な情報を伝えるアラートコンポーネント。情報・成功・警告・エラーと中立の 5 バリアント。

GitHub でソースを見る

プレビュー

使いどころ

使う場面

  • 画面やセクションに常に載せておく、状態・注意・エラーの説明（支払い方法の期限切れ、メンテナンス予告など）
  • tone は伝える重さで選ぶ。info は補足、positive は完了の報告、warning は放置すると困ること、negative は失敗やブロック
  • 利用者が読み終えるまで残したいメッセージ。次の操作の案内は本文にリンクやボタンで添える

使わない場面

  • 操作の直後に出して、数秒で消えてよい結果の報告。Toast を使う
  • 入力欄ごとの検証エラー。FormField の error で該当欄の下に出す
  • 確認や選択を求めること。判断が必要なら Dialog を使う
  • 同じ画面に 3 つ以上並べること。重要度が伝わらなくなるので、1 つにまとめるか優先順位を付ける

使い方

<Alert tone="info" icon={<Info size={18} />}>
  新しいバージョンが利用可能です。
</Alert>
<Alert tone="positive" icon={<CheckCircle size={18} />}>
  データが正常に保存されました。
</Alert>
<Alert tone="info" icon={<Info size={18} />} title="お知らせ">
  タイトル付きのアラートです。
</Alert>

プロパティ

名前型デフォルト説明
tone"default" | "positive" | "negative" | "warning" | "info""info"意味色（旧 variant）
iconReactNodeなし左側に表示するアイコン
titlestringなしアラートのタイトル（太字で表示）
children必須ReactNodeなしアラートの内容

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

アクセシビリティ

  • role="alert" が付くため、表示された瞬間に割り込んで読み上げられる。tone に関わらず同じ強さ
  • ページを開いた時点から置いてある補足まで割り込ませたくない場合は、Alert ではなく Card や Text で書く
  • 色だけに頼らず、title か本文で「エラー」「注意」のように種類を言葉にする。icon は装飾なので読み上げられない前提で使う

文言

  • title は状況を 1 行で、本文は理由と次の行動を書く（「支払い方法の期限が切れています」「カード情報を更新してください」）
  • 「エラーが発生しました」だけで終えない。何が起きて、何をすればよいかを書く

関連するコンポーネント