Callout vs Alert Component

[cogwizzle]

The documentation on the Callout page states "Do not use a Callouts to tell users about a system-level issue; use an Alert instead." I do not understand why though. These components look almost identical. Aside from name labelling, what is the advantage of following this guidance?

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

The guidance to use an Alert instead of a Callout for system-level issues is rooted in the importance and urgency of the information being conveyed, as well as accessibility considerations. While Callouts and Alerts might look similar visually, they serve different purposes and are treated differently by assistive technologies like screen readers.

• Alerts are used to communicate high-priority or time-sensitive changes in the system that are not triggered by a user action. They are designed to notify users about critical information that affects the entire system, such as service disruptions, active incidents, or critical errors. Alerts are intended to immediately grab the user's attention, and in terms of accessibility, they are announced immediately by screen readers, taking precedence over other content. This ensures that users who rely on assistive technologies are made aware of critical system-level information without delay.

• Callouts, on the other hand, are used to highlight important information on a page or in a section of a page. They can result from a user action but are not limited to such scenarios. Callouts are suitable for conveying multiple pieces of information or providing an error summary specific to a part of the page. Unlike Alerts, Callouts are meant to be discovered as the user navigates the page and are not announced immediately by screen readers. This makes them less intrusive and more appropriate for information that is important but not critical to the immediate functioning of the system.

Following this guidance ensures that critical system-level information is communicated effectively and accessibly to all users, including those using assistive technologies. It helps maintain a clear distinction between system-level alerts that require immediate attention and other important but less urgent information that can be conveyed through Callouts.

For more details, you can visit the documentation pages:

• Alert documentation
• Callout documentation

I also did a search, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Dismissable callout, alert or custom component? - Answer (updated: 04/28/2023, similarity score: 88%)
• Announcement pattern - Answer (updated: 04/17/2023, similarity score: 87%)
• Alert Placement - Answer (updated: 12/15/2020, similarity score: 87%)

[serifluous]

Hey @cogwizzle ! Agreed, they're too visually similar right now. We've got it in our backlog to update Callout, and make sure it's clearly visually distinct from Alert (see "Callout component, refined" here: https://paste.twilio.design/roadmap#2024-06-25-candidate).

^ PasteBot explains why they're different, and there's some more info on the Alert accessibility section about the ARIA role Alerts get (which Callouts do not): https://paste.twilio.design/components/alert#accessibility

[cogwizzle]

I guess for the aria piece isn't a Callout just an Alert with the role of "status"? Status to me means "Hey you! Here is some information about a thing." That sort of feels similar to a Callout at least linguistically.

[serifluous]

We still need both of them because they're functionally different.

When we last did a visual design update, it was just an oversight that they became too visually similar.

Re: your second comment, yeah, I feel like part of that feeling might come from the fact that they look so similar right now. Making them 2 separate components also gives us the option to diverge them even more farther down the line, if we needed to. Like, Alert should be way more visually prominent, and Callouts more subdued. Alerts also get fewer variants because they're for high-priority, system-level variants, where we can give Callouts more business-case-y variants (like "new" and "success").

The way I think about it (linguistically) is Alerts are like "HEY YOU", and Callouts are a slight level up from normal body text, more like "Oh! By the way..."

[cogwizzle]

Thanks for the quick responses @serifluous. The reason that I am pushing so hard for the depreciation rather than the continued support of both is because if we currently have both and they look the same, then there may not be a need for a more muted version or a more prominent version.

Were they drastically different at some point in the past? If so I think it makes sense to keep both.

[serifluous]

Yeah, they used to be much more different—Alerts had darker background colors and borders, and looked more like banners. When we update the design of Alert + Callout, we'll probably shift Alert back to looking more like a banner than just a block of color + text like it looks now.

[cogwizzle]

I see. Ok I think I'll mark this as the answer and close this thread. Thank you very much for hearing me out!

[serifluous]

Thanks for the feedback & suggestions!