Avoid using toast snackbars

It’s exceedingly rare that this is a good design choice and a more conventional HTML element shouldn’t be used instead.

Only use toast to reinforce updates

Toast snackbars should only be used for non-critical messaging, and the status described should be discernable on the page without the snackbar.

Practical example

Given that I am on a dyamic single page app

  • WHEN the customer changes the state of a toggle to OFF
  • THEN the toast appears to reinforce that the change has been saved
  • AND the customer can also confirm this is true from the toggle itself

Do not use toast for critical functionality

Never use toast for critical tasks (Ex: undo/unsend or confirmation of choices).

Timing

It is preferable to not let a toast snackbar time out.