Alerts vs. Notifs

Alerts

View in Figma

An Alert is a message meant to inform the user of important extra context in the UI. Use them judiciously since they draw a user’s attention toward key information at the right moments.

Alerts live within the page flow of the application and are not directly removable by the user. An alert may disappear as the result of a change in the system, but it does not include an ‘X’ to remove it without a state change.

When to use an alert

• System messaging.
• Tips or informational messages.

When to use something else

• Success Messages. These are always temporary and are best displayed via a Notif.
• Warnings or errors that should be removable by the user.

---

Notifs

View in Figma

A Notif is a temporary alert that generally surfaces as the result of a user action (although a system issue such as a dropped connection may also use them). Notifs are always temporary messages. They may either disappear automatically after a set timeout (success messages) or they may persist until removed by the user using the included ‘X’ to clear the message (warnings and errors). They are positioned floating in the bottom right hand corner of the view, outside the standard page flow to ensure they are always visible regardless of how the user has sized their browser or scrolled on the page. They are styled identically to an Alert, but have a max-width of 400px.

When to use a notif

• Success messages. Since success messages don't include content that require further action from the user, they are always displayed as a temporary Notif.
• Warnings as result of user action. When you want to warn a user that something may not be as expected or when the action merits confirmation before carrying it through.
• Temporary errors as result of user action. (Ex. test failed error, connection dropped error). When you need to give the user regular feedback that an error occurred. These errors persist until the user clears them.

When to consider something else

• Informational messages. These messages come from Signal Sciences and add value for the user by persisting in the UI. Consider using an Alert in the blue or grey style.
• Messages that shouldn't disappear without a system state change. Warnings or errors that should persist until a system change occurs should use an Alert.
• Significant warnings. When an action requires a strong confirmation, consider using a Modal.