Alert & Notification

The Alert and Notification components display a short, meaningful message that explains the system's state/task without interrupting the user's flow by appearing at the bottom, top, or center of the interface.

The difference between an Alert and a Notification is their interaction requirements. An Alert requires immediate user action, commonly blocking user flow. While a Notification also requires user action, it can be dismissed without blocking any user's current task and can be dismissed by itself from the UI over time.

Alerts & Notification UI best practices:

• Use state colors and icons to differentiate between info, warning, and error states.

• Auto-hide non-critical notifications after a set period, with the option to recall them back.

When to use Notification/Alerts vs. Toasts

• Notification: For important messages that require user attention or action (e.g., "Delete account?")

• Toasts: For temporary, non-critical notifications that auto-dismiss (e.g., "Changes saved")