ユーザーに何かを通知したり、警告したりするために使用されます。
Alertを使用して、次のようなメッセージを表示できます。
・成功メッセージ
・警告メッセージ
・エラーメッセージ
また、ユーザーに特定のタスク実行を依頼するためにも使用できます。たとえば、次のようなタスクを実行するように依頼できます。
・確認
・同意
設計の原則
Alertは複数表示することができますが、3件以上の場合はそれ以降を省略してください。
「表示」ボタンと合わせて配置することで省略した通知を表示することができます。
![](https://manual.uxhub.tokyo/wp-content/uploads/2024/05/image-31.png)
Snackbar Styleで使用する際には、Effects(Shadow)を付けるようにします。
![](https://manual.uxhub.tokyo/wp-content/uploads/2024/05/image-32-1024x628.png)
Properties(振る舞いの設定)
Component Propertiesで設定されている内容。
![](https://manual.uxhub.tokyo/wp-content/uploads/2024/05/image-33-1024x385.png)
Variables(色の設定)
Effectsの設定:画面に近いアイテムとしてLevel1のDrop Shadowの使用を奨励します。
![](https://manual.uxhub.tokyo/wp-content/uploads/2024/05/image-34-1024x279.png)
Style | Element | Token |
Snackbar Style | Shadow | Effect/Drop Shadow/Level1/shadow |