Callout

ユーザーに対して重要かつ簡潔な情報を効果的に伝え、必要な行動を促すことができます。

アイコン、タイトル、メッセージ、アクションボタン、閉じるボタンを含む基本的な構造を持ちます。また色の使い分けにより状態を強調して伝えることが可能です。

Storybookで確認

利用目的

  • システムの状態やエラーをユーザーに明確に伝える
  • ユーザーに必要なアクションを促す

利用例

ログイン処理に問題が発生している際の表示。

ログインができないというシステムの状態を伝え、問題が解決するまで待ってから再度ログインするよう促している。

現在ログインしづらい状況です。ログインに失敗する場合は、しばらく待ってから再度お試しください。

利用を避ける例

システムからの情報やアクションの提示でないものはCalloutでの表示を控える。

広告やサービスからの情報表示など、ユーザーの対応が必須でないものは誤解を招かないようCalloutでの表示を避け、より目的に沿った形状で表示することを検討する。