Anatomy

 Contains the elements of the toast.
 Label to indicate the title of toast.
 Use colored logo in default variant, and white logo in success & error variant.  You can use it or not, depends on the usage.
 To close the toast.
 (Optional) Displays icons that provide additional visual context to the user.
 Contains a description of the information.

Toast Variant

VARIANT	USAGE RECOMMENDATION
Default	Utilize the Default Toast variation for general notifications, informative messages, or neutral feedback. Example use cases: Informing users about system updates, news, or announcements. Providing contextual tips, hints, or guidance during user interactions. Notifying users about non-critical events or actions within the interface.
Error	Apply the Error Toast variation to alert users about errors, issues, or critical failures that require immediate attention. Example use cases: Notifying users about failed operations, such as form submissions or transactions. Alerting users about invalid inputs, authentication failures, or system errors. Communicating errors encountered during data processing or network connectivity issues.
Success	Implement the Success Toast variation to confirm successful actions, completion of tasks, or positive outcomes. Example use cases: Confirming successful form submissions or updates. Notifying users about completed processes, such as downloads, uploads, or installations. Providing positive feedback for actions performed within the interface, such as saving preferences or settings.

Variant on Size

Usage

Usage Recommendation:

• Provide a contextual message based on a user's action in the same view the action took place.
• The message should be a concise full sentence that ends with a period.

Accessibility

Timestamp

Content

Consistent Positioning

Place toasts in a consistent position throughout the app, it must be at the top right of the screen.

Provide Manual Dismiss Option

Add a close button so users can close the toast or dismiss the toast before the timer ends.