UI Component Lab English

← コンポーネント一覧

フィードバック

Toast トースト

操作の結果を画面の端に短く表示し、しばらくすると自動で消えるメッセージ。

別名

  • Snackbar — MUI

見分けるポイント

画面の下か上の近くに浮かぶ小さな暗い色の箱で、1行の文と、閉じる・元に戻すボタンが付くこともある。

挙動

  • 「アーカイブしました」のように操作のあとに表示され、フォーカスは動かさない。
  • メッセージを入れる前からページにあるライブリージョン（role="status"）で読み上げる。
  • 数秒で消える（このデモは5秒）。ボタンを含むトーストは、キーボード利用者が間に合わないため自動で消さない。
  • フォームのエラーなど重要な情報は、トーストではなくアラートで伝える。

キーボード操作

キー動作
Enter / Spaceトーストを出す操作を実行する。
Escトーストを消す。

出典