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.
- 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"
