A taxonomy for alerts and notifications

Is it an Alert, Toast, Callout, Popup, Snackbar, or Notification?

A while back, in the early days of our design system, we had a ticket for a component sitting in our backlog, with the title “Alert.” My initial reaction was “Oh yeah, a colored box with a little icon to the left of it and some text, easy.” Oh dear reader, how naive I was…

We started as we always do, with a component audit, which immediately revealed a bunch of complexity and conflicting needs and requirements. We started discussing which features our Alert component should support, and it very quickly became a bloated mess of properties and configurations. We realised we needed to take a step back, and split this component into multiple components with slightly different needs.

Should it be pop up from the corner of the screen? Can you dismiss it? Should it have a title? A description? An action? Multiple actions? Can the description contain links? Does clicking on the whole alert box perform an action?

We eventually landed on three core patterns: Toast, Callout, and Notification. We reserved “Alert” for the group name for these types of components instead.

These shouldn’t be considered canonical, your naming or grouping may differ slightly, and that’s fine, as long as you’re having that conversation with your team. I found the exercise of trying to define the capabilities and differences between these use cases useful enough, and have referred other designers to it enough that I thought it worth sharing more widely as a point of reference.

Note: this isn’t technically part of my Design System Breakdown series as we have yet to build final versions of these. 😬

Toast

Some people like to call these “Snackbars” (Material design), but we preferred Toast as it seemed more ubiquitous and was shorter to say and write. It can also pop up from the bottom of the screen like toast does from a toaster! Delightful!

• Short and sweet. Once sentence or a few words.