Should snackbars cover buttons?

Question

I'm designing an app that requires CTAs at the bottom of the screen for most of the flows. This, I have found, presents a challenge when trying to incorporate Material Design snackbars. For example, there may be a form and at the bottom of the form would be a large "save" CTA. If you implement a snackbar, especially the two line snackbar, it completely covers the CTA.

Material Design says that snackbars should not cover FABs but it is unclear on CTAs.

Does anyone have advice? Google searches do not seem to pull anything useful up in terms of patterns.

Answer 1

personally I feel that you can consider making the snackbar floating above the CTAs on the bottom of the screen. You would still have to consider the overall flow and feel of the screen so that the snack bar does not feel irritating to the user.

Not sure how your CTAs look like, please share some diagrams if you like to exchange ideas on the snackbar placements.

In addition, the Materials UI Design document show quite a few examples I took my ideas from here (see link).

Answer 2

Personally, I will place the snackbar above CTAs just like above FABs. And I will display multiple snackbars one by one, which means appearing one snackbar at a time. You can refer guidelines about these "Consecutive snackbars" from here Snackbar-Behavior.

Answer 3

Snackbars can float from top. while CTAs can be at bottom