Clear notifications are essential for a user-friendly experience, especially when updates occur. Visibility of system status creates trust and forms one of the 10 Usability Heuristics for User Interface Design by Nielson Norman Group.

We have two major use cases for notifications:

1. Task-generated – These notifications are triggered in response to a user action during a task. For example, submitting a form, uploading a file that is too large, or deleting an item.
2. System-generated – These notifications happen automatically by the system, and generally without needing input from the user. For example, system outage, user session is about to expire, or planned maintenance.

Style	Usage	Behavior	Appearance
Informational	Use for neutral updates that keep users informed	Does not require action	Blue with info icon
Success	Use for positive confirmations when an action completes successfully	This typically doesn’t require user action	Green with checkmark icon
Warning	Use to alert users of potential issues that require their attention, but aren’t critical errors	Persists until the users continues their task, but doesn’t normally require action	Yellow with alert icon
Error	Use for critical errors that indicate a serious problem	Always persists until the user resolves the error	Red with stop icon

Priority	Component	Usage	Duration and interaction
Low	Page alert	Page-level feedback to inform the status of something. Normally used for form errors. Read about managing form errors.	Persists on the page until it is resolved by the user.
Moderate	Toast	Temporary, non-disruptive short messages that slide in from the bottom of the page	Automatically disappears after a short time
High	Banner	Platform-level messages about the system or status of something	Persists until resolved or dismissed by the user or system
Critical	Confirmation modal	Highly disruptive notification that requires immediate attention and action	Prevents task progression and always persists until the user acknowledges and provides input

Use the following decision flow chart to help you decide which component is best suited for your use case.