1

Right now at work we are making this amazing feature (for a webApp) but i don't know WHEN its correct to use a "mask" Behind the FAB after it gets TAP/CLICKED because in the guide they say nothing about it, all i know is:

  1. It would be better to improve readability
  2. I have seen it (The mask) in other google apps
  3. Pinterest use this behind-mask every time you click on a "PIN"

Below ill link you the Material Design Guide:

https://material.google.com/components/buttons-floating-action-button.html#buttons-floating-action-button-behavior

1 Answer 1

2

This question is unrelated to FAB, you use a scrim whenever appropriate, specifically when you load a modal, dialog or a new sheet of material. Whether it's launched by a FAB, a link or a button, is irrelevant.

If you want an example of this behavior triggered by a FAB, take a look to https://material-design.storage.googleapis.com/publish/material_v_8/material_ext_publish/0B8v7jImPsDi-Mk9EVk5DRVN1cmc/components-buttons-fab-transition_card_01.mp4

and

https://material-design.storage.googleapis.com/publish/material_v_8/material_ext_publish/0B8v7jImPsDi-V2EwR1lqcHFoVVk/components-buttons-fab-transition_card_02.mp4

All in all, it will also depend on your needs, not everything needs a FAB, not everything needs a pop-up or modal, so this is a generic answer to your specific question

2
  • Well i know everything doesn't need a FAB, etc. but in this case it is necessary. I opened the links and its a very generic scenario as you said so it appears to be a decision made by needs.... Thanks. Jul 4, 2016 at 19:00
  • 1
    Of course, I have no idea what your specific scenario is. The point is that in those videos you can see HOW it is used, despite your specific scenario (and also: 75/80 out of 100 times FAB are used incorrectly, not saying it's your situation, but watch out just in case)
    – Devin
    Jul 4, 2016 at 19:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.