GitHub no longer uses Toasts

https://primer.style/accessibility/toasts/

by samsolomon • 8 months ago

128 67 8 months ago

primer.style

codingjoe• 8 months ago

Finally, I hope that trend catches on. God knows how many messages are missed thanks to toasts.

Groxx3• 8 months ago

Toasts pose significant accessibility concerns and are not recommended for use.

yeah. OBVIOUSLY. good fucking riddance.

they wouldn't be half as bad if they always came with a notification center for seeing the ones you missed... but the other half is still incredibly bad and isn't worth using at all.

Muromec2• 8 months ago

yeah. OBVIOUSLY. good fucking riddance.

Are they really? Isn't it pretty normal "role status aria something something polite" thingy to announce feedback to user?

yencabulator• 7 months ago

My absolute favorite is toasts that stay on screen just long enough for me to realize there was an "Undo" button in the toast. What action did I just accidentally perform and why can't I undo it after the 0.3 second toast disappears?

mohsen1• 8 months ago

Any toast can be an inline message in my experience

layer82• 8 months ago

Or a modal, for certain infrequent but important cases.

xixixao2• 8 months ago

Toast pros:

- once set up, very easy to build, no “design” required

Toast cons:

- easy to miss

- at risk of layout issues (overlaying other information)

The tradeoff is real, but if the resources allow, I’d drop all toasts.

gherkinnn4• 8 months ago

once set up, very easy to build, no “design” required

Which is why they then get thrown around thoughtlessly. It becomes easy to pretend to have solved a problem using a toast instead of actually solving it.

twelvedogs• 8 months ago

Generally I have treated toasts as reassurance rather than important information

Like little 'saved' notifications when clicking through tabs, or email sent after clicking a send email button that might leave you on the same page

Web sites tend to over inform you of what's happening I like toasts (though I no longer use them since they're it of fashion) simply because you can disregard them

anonymous908213• 8 months ago

This is a terrible overview. The actual primary benefit of toasts is that they provide feedback on low-importance events without requiring the user to interact with them and without permanently taking up UI space. The web application I use most frequently would be infuriating if I had to deal with a modal window every time a toast would have been used, and UI space is at a premium for useful functionality, so occupying a permanent spot to relay those messages isn't a good solution either.

I wish software developers could drop this dogmatism. Same as the old Goto considered harmful trope outliving its usefulness and all that. It's always black and white - "people can misuse this tool, so this tool is inherently bad and should be eliminated from usage completely" - rather than acknowledging that many tools have great use cases even if they can also be abused.

xixixao2• 8 months ago

There are many alternatives, OP lists some (banners, modals), but also inline messages, button states, next steps screens - not just modals.

There are also a lot of professional guis (think medical software), that use no toasts.

ChrisArchitect• 8 months ago

An alternate take:

Why GitHub’s War On Toasts Is Bad News For Accessibility

https://medium.com/offmessageorg/why-githubs-war-on-toasts-i...

https://archive.ph/QMMye

gherkinnn4• 8 months ago

A strange take. Toasts don't work so GitHub (and by extension MS) should have gone through W3C to implement a browser-wide solution instead of replacing them with alternatives in their products?

From the GitHub doc:

User and system initiated actions that are direct and straightforward should be successfully completed as a matter of course. An example of this is creating an Issue, and then seeing the Issue show up on the list of Repo Issues.

The alternative proposes:

Doing something, even as simple as adding a Jira ticket to a backlog, is not something I want to assume happened. I need to know it happened.

I fail to understand how seeing the created item in context does not let me know beyond any reasonable doubt that it was indeed created. Showing an additional toast adds nothing but noise and only showing a toast even more so.

samsolomon• 8 months ago

Honestly, the JIRA example points out one of the main cases where I'm not exactly sure how to replace a toast. You don't have to be on the board to create a ticket in JIRA—so it may not be obvious in context.

I understand there are accessibility issues, but if the thing I am attempting to create will not be visible on the current view, what's the best approach?

Honestly, the same could be set for a large list or Kanban board. Just because of the number of records it may not be evident that the intended action occurred.

Groxx3• 8 months ago

"Toasts are inherently bad for accessibility and bad UX, therefore GitHub is bad for not canonizing them into browsers"

... that's a somewhat odd stance to take.

hendry• 8 months ago

Same as modals?

bradleyy2• 8 months ago

Modals are, IMO, the literal worst UX element you can hate your users with. There are certainly valid use cases, but _absolutely not_ should be the default.

licorices3• 8 months ago

How come? I find them nice to allow for certain actions that don't really require navigation, and may want the user to easily return whenever they do anything in the modal or not. I understand it is historically bad due to accessibility, but there's more native support for it now. Assuming it is implemented with that in mind, is it still bad?

herpdyderp2• 8 months ago

I personally don't find modals inherently all that bad, though they can definitely be implemented poorly. Does anyone have specific reading material on the problems with modals?

quamserena• 8 months ago

Thank god, toasts are so annoying. Every little action in Google Calendar has an associated toast/snackbar to go with it that tells you exactly what you just did and asks if you want to undo it. Like wtf? I can’t use my calendar app without these stupid toasts flying in and out and trying to draw my attention to read some irrelevant text. They go away too quickly for anyone not technically literate to click on them, and they are too slow to keep up when you’re creating a ton of events (they just fly in and out). I hope these go away, they add nothing to the application.

awinter-py• 8 months ago

User and system-initiated actions that require more complicated interaction may need additional feedback mechanisms to help inform the user that their request was successfully enacted. An example of this is the bulk creation of Issues.

^ this is a great idea and please add it to github actions where it takes like 10 seconds for the new thing to show up on the list after you trigger one

gherkinnn4• 8 months ago

GitHub primer is an interesting resource to read through, thanks. You don't have to agree with everything that is said to gain something from it and certainly beats winging it based on vibes.

For comparison, Apple and Android have their own documentation:

https://developer.apple.com/design/human-interface-guideline...

https://developer.android.com/design

jollyllama• 8 months ago

Modals, toasts. The UX set got very good at coming up with new words for pop-ups.

jfengel• 8 months ago

Modals are different from toasts. Modals take over your screen; you go into a separate "mode" for them. Toasts are non-modal; they just take up screen space but you don't have to interact with them.

"Toast" usually implies something that goes away on its own, though that's generally considered bad UX.

It's just jargon. Every field does that. In this case, you can really tell that it's two bits of jargon made up at different times, because one is dry and technical, and the other is a pun on "pop-up".

stuartd• 8 months ago

https://archive.ph/2025.12.08-211115/https://primer.style/ac...

websiteapi• 8 months ago

what's an example website that doesn't require login that gets UX/UI right in most respects?

fs_software• 8 months ago

https://www.w3.org/WAI/ARIA/apg/

clircle• 8 months ago

Yeah, probably a good idea to remove it since i use github everyday and have no idea what a toast is .

bicx• 8 months ago

I like toasts as a non-obtrusive confirmation of an action, but not as a method to present important information.

btown• 8 months ago

Among the various potential uses of a toast, IMO:

- quick, in response to a clicked button -> why not just show feedback on the button?

- quick, in response to a keyboard shortcut -> ok

- seconds or more after an action, say, if your import/export is done -> fine, but have a more persistent notifications inbox or send the user an email too, because if you dismiss the toast, how do you get back to that result?

- when you've just navigated to a page, as a way to present an alert or advisory about the new page -> if it's important enough, why not show it as a persistent alert on the page itself?

Far too many toasts are used for the last use case. Part of the reason for this, I think, is because if you detect something weird in a React callback, you'd need to wire up a whole new state variable to show it, vs. just calling a global toast() function at the time where you learn about the weird thing. But is it really much more work than toasting to roll something like const {alertElement, addAlert} = useAlerts()? And have it speak your design language?

Your 50-tabs-open multitasking users will appreciate you.

0manrho• 8 months ago

Agreed.

IMO a toast showing up shouldn't be a direct/immediate response to user action at all, ever. Toasts are purposely designed to steal attention. Don't try to steal attention from the user performing an action just to confirm that the action occurred; you already had their attention!

if it's important enough, why not show it as a persistent alert on the page itself?

Because it's a crutch against bad design in an era when many companies don't employ designers, or arguably even as an exploit to be leveraged by marketing to try to brute-force the conversion of users to sales.

While there's nothing inherently wrong with them, I've become so accustomed to toasts being misused/abused that my instinctual response to that visual stimuli is that it's focus-friction and tantamount to being spammed, even when they're being used in benign or debateably useful ways.

setr• 8 months ago

I always just used it to confirm your last action on a POST —> GET sequence. Eg confirming that your save went through/rejected (the error itself embedded & persisted in the actual page). Or especially if saving doesn’t trigger a refresh so success would be otherwise silent (and thus indistinguishable from failing to click).

You could have the button do some fancy transformation into a save button but I prefer the core page being relatively static (and I really don’t like buttons having state).

It’s the only reasonable scenario for toasts that I can think of though.

franky47• 8 months ago

Refined GitHub [1] still does (for things like PR approvals & automations), and it feels odd indeed. Still worth adding on top of the stock UI.

[1] https://github.com/refined-github/refined-github

ardit33• 8 months ago

They say to replace them with Banners, which are just a different style of a "Toaster", just usually stay longer, or are permanent until the user takes an action.

SAI_Peregrinus• 8 months ago

The main problem with toasts is that they disappear with no hope of recovery before you get a chance to read them, obscuring other content in the process. Banners don't obscure other content, don't disappear without user action, and could theoretically have a message history.

punkbit• 8 months ago

No, it's different. A "toast" is a floating element, a "push notification" which is detached from the panel, e.g. can disappear quite quickly. The banner is placed closest to the context where the action is triggered, e.g. might require the user to close it. If you have some disability, e.g. cognitive, visual or motor, it's likely to be easier to perceive the information. When a user creates an "issue", the "issue item" is displayed in the list, meaning that you won't need a secondary notification process.

projektfu4• 8 months ago

Lecturing about accessibility with latency so high that you have no idea if any clicks are actually meaningful. I click "banners" and there's no indication anything is happening until 3 seconds later, when it takes me to a page that doesn't directly talk about banners until later. Then there is a link there that says "banners", and takes me to a different page, 3 seconds later. No indication that anything is happening or waiting during that time.

kurisufag2• 8 months ago

that's just an <a href> link. the only latency is your browser pulling the (admittedly, unnecessarily large) page -- would you prefer some static hydration garbage?

locknitpicker• 8 months ago

that's just an <a href> link. the only latency is your browser pulling the (admittedly, unnecessarily large) page

I fail to see the relevance of your comment. So you came up with an explanation of why the page might have awful accessibility. How does this make the accessibility problem any better?

would you prefer some static hydration garbage?

I think everyone would prefer to not wait 3 seconds to get feedback on what they clicked. We're talking about accessibility, right?

projektfu4• 8 months ago

It's not a real link - some JS magic is happening behind the scenes. Otherwise there would be a confirmation something is happening like the browser's usual spinner.

ErroneousBosh2• 8 months ago

All of the links respond instantly for me, even on a slow 4G connection.

Is it possible that your browser or internet connection are slow?

projektfu4• 8 months ago

I think it is likely that there is a slow/high latency part of the connection. This is usually represented to the user by showing a loading spinner or something like that. However, it is using some partial reloading in the background instead of just following a link, and as a result is not letting the browser tell me that it is loading, and it doesn't have any sign of loading presented otherwise.

outlore• 8 months ago

Toasts as an audit trail of actions taken across the UI seems nice to me though, otherwise the alternative affordances disappear as you click around.

Sonner does it quite well (https://sonner.emilkowal.ski/)

licorices3• 8 months ago

I wonder if it is time to look into some more native support for toasts in browsers.

Some implementation that allows for browser level customization(timing, etc), as well as a notification center in the browser, and that integrates well with screen readers.

I like toasts from a visual perspective. They can look good(not always, of course), and they can convey small bits of information that could otherwise be displeasing to view in some designs. However, god have I missed a ton of notifications because of them disappearing too quick, and no way to view previous ones, or anything like that. I'm not visually impaired or anything, so I can't really comprehend the extent and issues people who do may have with toasts, and see what would be needed to make them accessible for them(if it's even possible), but would love to hear about it.

JSR_FDED• 8 months ago

This article could have been one quarter the length.

strken• 8 months ago

Toasts are like a tourniquet, for me. You slap them on a problem to stop the bleeding, and they're often preferable to the alternative, but nobody actually likes them and you really shouldn't keep them long-term or apply them frivolously.

E.g. you join a project with little to no error handling or success feedback. Slap some default toasts on everything! And then remove them page by page as you fix the horrible UI you inherited.

GitHub is large enough that they don't benefit from or want such a crutch, but not everyone is GitHub.

butz• 8 months ago

Good. Now maybe GitHub will be able to work with JavaScript disabled?

GitHub no longer uses Toasts

Related Stories