Figma 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;

• If you're using Toast and Notification simultaneously, make sure they occupy different places across the UI.

When to use Notification/Alerts vs. Toasts

• Use Notifications and Alerts for important messages that require user attention or action, e.g., "Delete account" or "Confirm action";

• Use Toasts for temporary, non-critical notifications that auto-dismiss, such as "Changes saved" or "Thanks for subscribing."