The Toast component is a brief, non-intrusive notification element that appears temporarily on the screen to provide quick feedback or information to the user. Toasts are typically used for system messages, confirmations, or alerts that don't require immediate user action.

Key features

• Multiple color variants to indicate different types of notifications (success, info, warning, error)

• Light and dark mode versions for each color variant

• Consistent layout with an icon, title, message, and optional action buttons

• Dismissible design with a close button

• Compact size to avoid obstructing other UI elements

• Support for multiple lines of text in the message area

Design considerations

• Clear visual hierarchy emphasizing the toast title

• Use of appropriate colors to convey the nature of the message

• Consistent styling across different toast types

• Adequate contrast between text and background for readability

• Icon usage to quickly communicate the message type visually

• Rounded corners and subtle shadow for a distinct yet unobtrusive appearance

Usage guidelines

• Use appropriate colors to match the type of notification (e.g., green for success, red for errors)

• Keep messages concise and informative

• Position toasts in a consistent location, typically top or bottom of the screen

• Implement auto-dismiss functionality for non-critical messages

• Allow users to manually dismiss toasts

• Use sparingly to avoid overwhelming the user with notifications