本文へ移動

§07-03Notifications

トースト / snackbar

操作結果を短時間だけ画面端に表示する。

保存完了や送信成功など、作業を止めずに結果だけ伝えたいときに使う。取り消しの導線を添えれば確認ダイアログを減らせる。

実装のポイント

読み上げは aria-live=polite の領域に任せ、エラーなど操作が必要なものは自動で消さない。Undo 付きは表示時間を長めにし、ホバー中はタイマーを止める。

特徴
  • 非同期
  • アクセシビリティ
デモで使っているもの
  • sonner
  • shadcn/ui

このパターンが効く目的