Dismissable callout, alert or custom component?

[lnamba]

Hi Paste team!

I'm working in the Segment app on a simple banner component (blue banner in the picture below):

I think a Callout could nicely replace this with the same purpose, but I'm trying to make this dismissable and it seems the Callout doesn't have this functionality. I saw there is an Alert which is dismissable and I implemented it (in yellow in pic above), but it also seems like the Alert component is more for system-wide versus just page notifications. Additionally, this doesn't feel like a banner without the border-radius, border, etc.

I'm wondering if it's best to make my own banner with simple Box/Paragraph components or try to add a close icon button to the Callout? What do you all recommend? Thanks!

[SiTaggart]

Hi @lnamba

Yeah, you are definitely in the blurry line between the two and honestly could go either way. It largely will depend on what you are reporting on, and whether it is something that has gone wrong, or something that is just informational.

If it's something that has gone wrong, something that happened indirectly of what the user is currently doing, that might be an alert. Even at the page level, that's still a system problem that you might want to alert the user to. It is important that the user knows about this.

If it's something that is incidental or an FYI, something you should know, but it's not the end of the world, then it might be just fine to be a callout. If you want a dismissible callout, you can place an icon button in the callout and absolutely position it to the top right and handle the dismiss action yourself. It's fairly compositional for your needs, and you should be able to achieve it.

The best way to think about the difference between the two is importance and how that will reveal itself to a blind or partially sighted, screen reader user. If you can't see the screen and are navigating by keyboard and text to speech, the difference in importance level is as follows:

• An alert will immediately announce itself to the user. It's so important it takes precedent over the page content, and jumps to the front of the queue.
• A callout out is there to be discovered. You have to navigate and explore the page in order to discover the content.

So they question might be, does the user have to know about it, or can they miss it and totally be fine?

[lnamba]

Thanks @SiTaggart, this is really helpful! I'll think through the importance level of the content, but it's helpful to know that adding an icon button to the Callout is an option if needed.