Why donate
API Explorer
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.

Loading QFab API...
Loading 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.

Non expandable



Internal labels

Internal label

Toggling internal label

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:

Vertical actions alignment

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.

External label

Custom styled external label

Toggling external label

Hide icons

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

Hide icon


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):

Playing with padding

Square style

Square style


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

Slots: icon, active-icon and label

With QPageSticky

With QPageSticky


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