Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Difference between Floating action button (FAB) and Raised button

It would be interesting to know the usage difference between FAB and Raised Button. In which particular use-cases these buttons are to be used. ?

One example. Can I use FAB in a static position (It doesn't scroll with content) ?

Thanks

like image 366
Kiba Avatar asked Feb 10 '23 11:02

Kiba


1 Answers

Take a look at what official material guidelines say about FAB: (Google design guidelines)

Not every screen needs a floating action button. A floating action button represents the primary action in an application.

and

Make floating action buttons positive actions like Create, Favorite, Share, Navigate, and Explore.

Here some typical examples of FAB:

FAB examples

So what does it look like in real world app? Let's take a look at Gmail:

Gmail for Android

Always think about the current screen before using FAB. Is there any action that is likely to be used by most of the users? What is the point of this screen? What do you want the users to do with this screen?

FAB can also contain multiple actions (it's not in the official specs though) which are opened after touching the primary FAB. Evernote app uses that for example:

Evernote for Android

I hope this clears up the FAB usage a bit.

Raised button is regular button that can be used anywhere needed. It's just important to distinguish between raised button and flat button. Material guidelines are here to help you with that: Material design guidelines.

like image 115
milanseitler Avatar answered Feb 12 '23 00:02

milanseitler