トースト

Toast

説明

画面の端に短時間表示されるフィードバックメッセージ。操作の成功・失敗・情報を短く伝える。一定時間後に自動的に消える。

スナックバー(Snackbar)ノーティフィケーション(Notification)

白背景＋シャドウのシンプルなトースト。左側のカラーバーでメッセージ種別を示す。

バリアント色でベタ塗りのはっきりしたトースト。視認性が高くインパクトがある。

ダーク系の落ち着いたトースト。あらゆるUIテーマに馴染みやすい。

シンプルで目立たないミニマルなトースト。操作の邪魔をしない控えめなフィードバック。

複数のトーストをスタック表示するシステム実装。useToastフック付きの本格的な通知管理。

Spinner

非同期処理や読み込み中であることをアニメーションで示すコンポーネント。ローディング・インジケーター・プログレスとも呼ばれる。

Alert

エラー・警告・成功・情報など重要な状態をページ内に固定表示するコンポーネント。トーストと異なりユーザーが閉じるまで表示を維持する。

Skeleton

コンテンツ読み込み中にレイアウトの骨格をアニメーション表示するプレースホルダーコンポーネント。スピナーより体感速度が速く感じられる。

Empty State

データが存在しない・検索結果が0件などの状態を伝えるUIコンポーネント。イラスト・説明文・アクションボタンで構成される。