Toast
Overview
Toast shows a brief message that’s clear & understandable.
Anatomy
-
Icon: There are 4 icons to deliver semantic meaning: Success, Information, Warning, Error.
-
Title: A short and concise explanation. Where possible, write this as a positive statement
-
Description: Provides additional detail and actionable steps for the user to take.
-
Dismiss Button: User can remove the toast message by using this button.
Type
Toast has 4 types:
-
Success: Success confirm that an instruction from the user, was processed successfully.
-
Information: Informational are the most common alerts. Use them to guide a user’s attention to relevant details, but keep it focused and related to the topic on the screen. s
-
Warning: Use warning when you need to inform users about a potentially unfavorable situation that requires eventual action from them
-
Error: Use error something is blocking users from continuing or an issue needs to be resolved immediately. The alert should offer a solution to the problem.
Content
Content should clearly state exactly what happens when users interact with it. The label must be able to represent what it contains, for example: “Create successfully"
