Material Design | Dialoge from floating action button - how to do it? Is it even a good idea?

Question

I'm designing a dark-mode-first desktop website for an online media organization. One of the key characteristics of the organiation is its community, and how open, friendly, inviting and communical it is.

So, I thought of designing an FAB (floating action buttion) that supports those characteristics that will be used for connecting with the community. Impelementation wise, it has a "contact us" text with a relevant icon, and should open up into a dialog. However, I'm not sure if an FAB opening into a dialog is in line with the Material Design guidelines. Is it?

Another issue that I have is that the FAB uses the primary accent color I defined, which I think is fine, since it's small, how would I color the panel while showing that it's an expansion of the button? I think it's an issue for the big dialog from to have a fill primary color, which would be too colorful and bright in this color's case. If it's not against the Material Design guidelines, how would you advise me to go about designing it?

I thought of making only a border of the same color and treating the rest of the dialog like a regular card but I'm not sure about that layout.

Page with the contact us FAB:

Page with the contact us dialog open, red border, grey fill color:

Page with the contact us dialog open, red fill color:

I also saw a this Codepen that uses the same structure, only uses a menu header (I don't know what else to call it) that has the FAB's color. I'm not sure if it's a good idea, but I'm thinking of having 2 sections in that dialog, which I think would be a good idea for this use case to be implemented as tabs. With 2 sections, one would be links to all the communities, and the other one will be for contacting the organization directly, so that Codepen's structure with the header might be a good idea.

I'd appreciate thoughts on that structure as well.

Note about a closing option being missing: whichever structure I go with I'd have to choose what kind of closing mechanism I want, so in the meantime I didn't add this option.

EDIT: I could also implement a contact option via a form, which would make the active role of the dialog a contact us/support dialog, in which case the positioning and the structure (dialog) would be traditional.

Answer 1

You can definitely have a FAB button opening a dialog as per Material guidelines on FAB.

Regarding the style of the dialogue, I think going for an entire box in primary accent colour might defeat the purpose of the "accent" (that should be used sparingly to draw attention). What you are really trying to do with your designs is to ensure there's a clear connection between the FAB and the new dialogue, however focusing on colours is not the only option. Google solves this nicely with clever animations, with the UI elements (either dialogs or entire screens) "expand" from the FAB.

As for the tabs, I think they might end up taking some extra real estate away from the content. This might not be a problem depending on what needs to be displayed, however I'd personally consider how future-proof this design is (what if in future contact options change? what if more copy needs to be added? etc.) Have you instead considered adding a stack of options when clicking on the FAB? As long as those contact options are related (which sounds like they are), you could have something similar to the examples on the Material guides for stackable actions (check "Emit related actions"). You can then have each option to open its own dedicated dialogue.