Floating Action Button

A Floating Action Button (FAB) represents the primary action in a Page. But, it’s not limited to only a single action. It can contain any number of sub-actions too. And more importantly, it can also be used inline in your Pages or Layouts.

Note that you don’t need a QLayout to use FABs.


QFabAction API


There are two types of FABs: expandable (has sub-actions) and non-expandable.


For an exhausting list of options, please read the API cards (at the top of this page).


If you want a non-expandable FAB, all you need is a round button – wrapped in QPageSticky if used on a QLayout.


Internal labels

When the labels are internal and your QFab opens up vertically (up or down) then you also have the ability to choose how to vertically align the sub-actions:

External labels

By default, when the label is external on the main QFab (not the sub-actions), it gets shown only when QFab is opened. However, you can override that by setting a Boolean value for hide-label prop.

Hide icons

If we hide the icon (through specific prop), we should at least use an internal label:


The default padding for QFab is “md” and for QFabAction is “sm”. However, you can use padding prop to customize it (accepts CSS units too):

Square style


Notice the slots for QFab and the slots for QFabAction below:

With QPageSticky


Below is a nice example of using TouchPan for making the QFab draggable across the screen.