Alert

出て消えるものは Toast です。 読み終わったあとも残っていてほしいものをここに置きます。

<Alert tone="danger" title="保存できませんでした">
  接続が切れています。もう一度お試しください。
</Alert>

トーンは意味を運びません

色の違いだけでは、何が起きたのかは伝わりません。 文言だけで意味が通るようにしてください。

{/* 色を外すと何も残りません */}
<Alert tone="danger" title="エラーが発生しました" />

{/* 文言だけで通ります */}
<Alert tone="danger" title="保存できませんでした">
  接続が切れています。もう一度お試しください。
</Alert>

トーンごとの既定のアイコンは持っていません。持つと文言が短くなります—— 色とアイコンがあるから説明は要らない、という方向へ倒れるためです。

アイコンを置きたいときは icon に渡してください。読み上げには出ません。

読み上げには既定で割り込みません

その場に最初からある知らせは、文書の順に読まれます。 読み上げの領域にすると、同じ文が二度読まれます。

後から出したときだけ live を渡してください。

{failed ? (
  <Alert tone="danger" title="送信に失敗しました" live>
    宛先のうち3件が見つかりませんでした。
  </Alert>
) : null}

danger だけが割り込みます（role="alert"）。それ以外は読み終わるのを待ちます （role="status"）。全部割り込ませると、読んでいる途中の文が毎回切られます。

見出しと本文の関連付けは Alert が作ります

title を渡すと、Alert が名前として結びつけます。本文は説明になります。

書かせる形にしていません。 忘れても見た目は変わらないので、 そのまま残ります。

見出しだけ、本文だけ、どちらでも置けます。

見出しは段落です。 h2 などにはしていません——何段目が正しいかは 置かれた場所で決まり、Alert はそれを知らないためです。固定すると、 置いた先の見出しの階層が飛びます。

見出しの階層に入れたいときは、title を渡さずに本文へ自分の見出しを書いてください。

閉じられるのは渡したときだけです

onDismiss を渡したときだけ閉じるボタンが出ます。 渡さなければ閉じられません——消してはいけない知らせがあるためです。

<Alert tone="info" title="9月10日に停止します" onDismiss={() => setShown(false)}>
  当日の午前2時から4時のあいだ、この機能は使えません。
</Alert>

閉じたあとどうするかは利用側が決めます。このコンポーネントは自分を消しません。

色は tone で決まります

中立は凹んだ面を宣言し、色付きは淡い塗りを使います。 どちらも背景と文字が対で決まるので、背景だけを塗る道はありません。