ガイドライン
Anatomy: 解剖図
| Item | Name | Description | Component | Optional |
|---|---|---|---|---|
| 1 | Container | コンテナ要素 | — | |
| 2 | Icon | 状態を提示するためのアイコン要素 | Icon | — |
| 3 | Title | トーストにコンテキストを付与するためのタイトル要素 | 任意 | |
| 4 | Description | トーストにコンテキストを付与するためのテキスト要素 | — | |
| 5 | Close Button | トーストを閉じるためのトリガー | Icon Button | 任意 |
Options: 選択肢
Status
neutral
状態を持たない中立なトーストです。いずれのStatusにも該当しない場合はNeutralを使用します。
success
ポジティブなメッセージを提示するためのトーストです。
アクションが成功したことやタスクが完了したことをユーザーに伝える際に使用します。
negative
ネガティブなメッセージを提示するためのトーストです。
アクションのエラーや失敗をユーザーに伝える際に使用します。どのアクションの処理に失敗したのかを記述し、ユーザーが再度実行できるように配慮します。
isTitle
True (default)
タイトルを表示します。
トーストにコンテキストを付与するための情報を端的に示します。
False
デスクリプションのみでトーストのコンテキストを十分に説明可能な場合、タイトルを非表示にすることができます。
isCloseTrigger
True (default)
クローズボタンを表示する場合のオプションです。情報の重要性が低い場合はユーザーがトーストを閉じることができるようにします。
False
クローズボタンを非表示にする場合のオプションです。
情報の重要性が高い場合はユーザーではなくシステムがトーストを閉じる処理を行います。
Behaviors: 振る舞い
表示位置
トーストは画面の上部中央に表示されます。また、トーストの上下左右には16pxのオフセットが存在します。
上部中央に既に重要な情報が配置されている場合は右下に配置することも可能です。
表示順序
一括処理などの際に複数のトーストを表示する場合、縦方向に積み重ねて表示することができます。
トースト同士の間隔は16pxのオフセットを設け、表示位置を起点として、最新のトーストが積み重なるように表示します。
デュレーション
トーストの出現から一定時間経過した後、自動で非表示にすることができます。
その際、一定時間の経過に関わらず、表示中にトーストを注視している間は表示を続けることができます。
Metrics: 寸法
- Vertical Resizing: Hug
- Horizontal Resizing: Fixed
- Container Height: 32px
- Item Spacing: 8px
- Padding Top: 8px
- Padding Bottom: 8px
- Padding Left: 12px
- Padding Right: 12px
- Vertical Resizing: Hug
- Horizontal Resizing: Fill
- Padding: 4px
- Vertical Resizing: Hug
- Horizontal Resizing: Fill
- Item Spacing: 4px
- Padding Left: 4px
- Padding Right: 4px
Contents: 内容
タイトルで冗長な表現を行わないでください。長くなりそうな場合は、デスクリプションで補完するようにしてください。
タイトルとデスクリプションの内容が重複するように記述しないでください。重複している場合はいずれかを非表示にすることを検討してください。
Change log: 変更履歴
| Date | Changes |
|---|---|
| 2025/3/17 | ドキュメントを公開 |
| 2025/06/02 | カラー調整 |
| 2025/06/27 | レイアウトと寸法を更新 |
