# トーストを表示

## 概要

トーストメッセージを使用してユーザーの操作を確認し、フィードバックを提供します。トーストは横に積み上がるオーバーレイ通知で、ユーザーが閉じることができます。

次のいずれかの応答タイプに対してトーストを使用してください:

* **`情報:`** ユーザーの操作がプロセスを開始しており、続行する前に完了を待つ必要がある場合があることを通知します。
* **`成功:`** 操作が成功または完了したことを確認します。
* **`警告:`** 警告トーストは、ユーザーの操作に関連する潜在的な問題を知らせ、将来の問題を防ぐための指針を提供します。
* **`エラー:`** ユーザーが現在の操作を完了できない問題を伝え、現在のフロー内で修正できることを示します。

一般的に、トーストはユーザーの操作に応じて使用します。トーストを使用するか別の種類のメッセージを使用するかを判断するには、トーストとアラートモーダルと確認のインタラクションの違いの節を参照してください。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F8WPHu3JWqEITfLVESGrf%2FShow%20Toast%20Avonni%20Components.webp?alt=media&#x26;token=b98e1746-aace-451a-84bc-1170de4ce0f3" alt=""><figcaption></figcaption></figure>

## 仕様

<table><thead><tr><th width="214">プロパティ</th><th>説明</th></tr></thead><tbody><tr><td><strong>タイトル</strong></td><td>ヘッダーに表示されるテキスト。</td></tr><tr><td><strong>メッセージ</strong></td><td>アラートボックスの主要なコンテンツメッセージ。</td></tr><tr><td><strong>バリアント</strong></td><td>アラートモーダルの外観。ヘッダーの有無。</td></tr><tr><td><strong>モード</strong></td><td>トーストの持続性を決定します。次の中から選択してください <code>閉じられる（Dismissible）</code>, <code>しつこい（Pester）</code> および <code>固定（Sticky）</code>.</td></tr></tbody></table>

### モードの定義&#x20;

* #### 閉じられる（Dismissible）

  * **説明**：トーストは **`閉じられる（Dismissible）`** モードでは短時間表示され、その後自動的にフェードアウトします。ユーザーはクリックや閉じるボタンで早めにトーストを閉じることもできます。
  * **使用法**：このモードはユーザーのワークフローにとって重要でない情報メッセージに使用してください。ユーザーの操作を必要とせずに消えることで、スムーズなユーザー体験を維持します。

  #### しつこい（Pester）

  * **説明**： **`しつこい（Pester）`** モードは、 **`閉じられる（Dismissible）`**&#x3088;りも長い期間トーストを画面に表示しますが、最終的には一定時間後に閉じます。即時の対応を要求せず、ユーザーが作業を続けられるようにしながら、メッセージを読む十分な時間を確保するために長めに表示されます。
  * **使用法**：このモードは重要度が中程度の通知に最適で、ユーザーにメッセージを見てもらいたいが、現在の作業を中断するほど緊急ではない場合に使用します。

  #### 固定（Sticky）

  * **説明**：トーストが **`固定（Sticky）`** モードに設定されている場合、ユーザーが明示的に閉じるまで無期限に画面に残ります。自動的にフェードアウトはしません。
  * **使用法**： **`固定（Sticky）`** モードは、進行前にユーザーの注意や行動を必要とする重要なアラートに予約してください。これらのメッセージは重要で、ユーザーが確認するまで表示されたままにすることで、確実に認識されるようにします。

  <br>