Component: Alerts

Alerts

Summary

Alerts provide users with important messages that require their attention, guiding them through critical actions, warnings, or updates without disrupting their experience.

Alerts are used to communicate time-sensitive or essential information in a clear and concise manner. Whether notifying users of errors, confirmations, warnings, or system updates, well-designed alerts help users stay informed and take necessary actions. Effective alerts balance visibility and non-disruptiveness, ensuring they capture attention without overwhelming the user. By following best practices—such as using clear language, prioritizing urgency levels, and maintaining accessibility—alerts enhance usability and improve the overall experience.

Types of Alerts & Notifications

Alerts and notifications are essential tools to provide users with feedback and information during their interactions. To use them effectively, it's important to choose the right type based on the context, urgency, and the action required from the user.

Informative Status Heading

Example of a informative body notification. Non-urgent information for the user with no requirement for action.

Warning Status Heading

Example of a warning body alert. Events which may affect the performance of the application. 

Success Status Heading

Example of a success body notification. Non-critical events that the user may want to attend to. Not time-sensitive, no specific requirement for action. 

Error Status Heading

Example of a error alert. Critical events requiring action from the user in order to use the application effectively or at all. 

Global vs Body Alerts

We offer Global and Body alerts to choose from. Global Alerts appear at the top of a page or application and provide system-wide or high-level notifications that affect the entire experience. Examples include system outages, maintenance notices, or session expirations. Global alerts can remain visible across multiple pages or sections until dismissed or resolved. Body Alerts appear within specific sections or components of a page, providing localized feedback related to a particular task or interaction. Examples include form validation errors, success messages after submitting a request, or warnings within a specific feature. Since body alerts are context-sensitive, they don't disrupt the overall flow of the page but instead help guide users through their tasks efficiently. They also disappear when no longer needed, ensuring a clutter-free interface.

Informative Alerts

To provide users with additional context or helpful details without requiring immediate action.

How to Use
  • Use a blue alert box, positioned near the relevant information or at the top of the page.
  • Keep the message concise, focusing on supplementary details or guidance.
  • Use when you want to provide users with additional context, tips, or general information that enhances their experience or clarifies their options.
  • These alerts should not require immediate user action and should be used sparingly to avoid overwhelming users.
  • Position them in areas where users are most likely to need additional information, such as next to a relevant field or feature.
Example Message

"Your form will automatically save every 5 minutes."

When Not to Use

Avoid using information alerts to communicate errors or issues requiring immediate resolution.

Warning Alerts

To notify the user of a potential issue that needs their attention but does not prevent further action

How to Use
  • Use when there is a potential issue that could cause problems but does not immediately prevent the user from continuing.
  • Ideal for situations where users need to be cautious or when there is a risk that they might lose unsaved changes.
  • Position these alerts prominently but ensure they do not obstruct the user’s current task.
  • Include a clear message explaining the issue and what action needs to be taken.
Example Message

"You have unsaved changes. Make sure to save your work before leaving the page."

When Not to Use

Do not use warning alerts to communicate information that is not actionable or critical.

Success Alerts

To confirm that a user’s action was completed successfully.

How to Use
  • Display a green alert box either near the relevant element or at the top of the page.
  • Keep the message brief and to the point, celebrating the successful action.
  • Use when you want to confirm that a user action has been completed successfully, such as submitting a form, saving a file, or completing a transaction.
  • Keep these alerts brief, positive, and visually distinct, using green or another color associated with success.
  • Position them near the element or area where the action took place or at the top of the page if the success is significant and affects the entire page.
Example Message

"Your profile has been successfully updated."

When Not to Use

Do not use success alerts to give information about a next step or required action—this can be confusing.

Error Alerts

To inform users of mistakes or issues that prevent them from completing an action.

How to Use
  • Show a red alert next to the relevant field or at the top of the page.
  • Include a specific message explaining the error and how to correct it.
  • Ensure the error message is clearly linked to the field it refers to, using a red border or highlight.
  • Do not clear any fields when displaying error messages to comply with accessibility guidelines.
  • Use hidden text, such as "Error:", to assist screen reader users.
  • Use when there is a critical issue that prevents the user from proceeding, such as a form validation error or missing required information.
  • Place the alert near the relevant field and provide a clear, specific message that helps the user understand the problem and how to fix it.
Example Message
  • Field-specific error: "Enter your first name."
  • Validation error: "The date you entered must be in the past."
When Not to Use

Avoid using error alerts to notify the user of problems beyond their control (e.g., server issues, eligibility requirements). Instead, guide them to a page that explains the issue.

How to Choose the Right Alert or Notification

Choosing the appropriate alert or notification type is crucial for ensuring effective communication with users. Consider the following factors to determine which alert or notification is best suited for the situation:

  • Assess the Urgency and Impact:

    • If the information is urgent or critical and requires immediate user action, use an error alert.
    • If the information is important but not immediately critical, consider a warning alert.
    • For general information or positive feedback that doesn’t require urgent attention, use information or success alerts.

  • Match Alerts to the Context:

    • Ensure the alert is relevant to the user's current activity. For example, use a success alert after a form submission, or an information alert to explain an optional feature.
    • Avoid using alerts to convey general messages that are unrelated to the user's immediate task or context.

Tips for Effective Alerts and Notifications

To maximize the effectiveness of alerts and notifications, follow these best practices to ensure they are clear, concise, and helpful:

  • Be Specific and Actionable: Clearly state what the issue is, why it happened, and what the user should do next. Avoid vague messages like “An error occurred.”
  • Maintain Accessibility: Ensure that alerts are accessible to all users, including those using screen readers or other assistive technologies.
  • Keep Alerts Concise: Use simple, direct language without unnecessary details or technical jargon.
  • Avoid Overuse: Use alerts sparingly to avoid overwhelming or frustrating users. Only display alerts when necessary to improve the user's experience or to prevent errors.

By choosing the correct type of alert or notification and following these guidelines, you can provide clear, concise, and effective communication that supports user needs and improves the overall experience.

Resources

Learn More

To learn more in depth about best practices for different type of alerts notification, visit the NNg website for UX guidelines.

For Developers

You can visit Storybook for Inherited CSS Variables and Twig Variables for the Alerts component.