Alerts: add guidance for teams to stack alerts in order of severity

[sterkenburgsara]

Duplicate check

• I've searched for any related issues and avoided creating a duplicate issue.

This update is for:

Component

What is the name?

Alerts

What is the nature of this update?

• How to build this component/pattern
• When to use this component/pattern
• When to use something else
• Usability guidance
• Accessibility considerations
• Content considerations
• Implementation
• Package information
• Addition to Forms Library documentation
• Update to existing Forms Library documentation

What problem does this solve?

While stacking alerts is not a desired user experience, this is what's available in the design system today & there are many places where we have to stack alerts in the authenticated experience. I am seeing many examples of stacked alerts where blue info alerts are above much more important warning or error alert messages. Being able to point to design system guidance and ask teams to stack their alerts in order of severity would be very helpful.

Additional Context

Here's an example (in prod as of 2/28/2025)

[sterkenburgsara]

cc @kristenmcconnell

[humancompanion-usds]

@allison0034 and @sterkenburgsara - I'm adding this to the guidance, right after the rule to not stack alerts. Do you think this gets to the request? Or do we have to explicitly open the door to stacking which is strictly verboten?

When there are multiple alerts on the page, order them by severity with the most critical being first and ideally top of the page.

[sterkenburgsara]

I think that is sufficient! Thank you so much.