Maybe you noticed that there is a difference between groups and buttons. Therefore I am going to explain you the difference between a group and a button. Both a group and a button have the same endless possibilities, it’s just a little different approach
Here is the difference between a Buttongroup and a button:
You can also just have a single button:
So, If you want to make a Floating Action Button with multiple buttons that pops open in a menu, you make a group. Like the picture above 🙂
Beware: A group must consist out of minimal 2 buttons, otherwise the group will disappear. But don’t worry, the group will then change in a button. If you later want to expand the single button, you can simply add more buttons.
It is always possible to convert your buttongroup to a single button, otherwise: it is aways possible to convert your single button to a buttongroup
I just want a single button!
If you would like to have a single Floating Action Button with just one action, you make a Button. So this button doesn’t have a menu that pops open but just has one primary action.
Where to use a group and a single button?
Here is an example to give you some perspective where you can use a group and a single button;
A (physical store) retailer that would like to have more customers in their shop by there website. His first thought is that the people that are on the homepage or other pages like: About, FAQ would like to get in contact with the shop. Therefore he created a button group with 3 forms of contact: E-mail, phone number, URL to contact page.
Then he realised that he also got some products on his website. The customers that have come so far that they decided to look at products may be more interested. Therefore he created on that page a single button with just 1 action: ‘request quote’.
Tip: If you want to help the customer on your website to find something easier: like: contact, send email etc. use a Button group. If you want to ‘force’ the customer to make an action: use the single button.
