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.

Installation


// quasar.conf.js

return {
  framework: {
    // NOT needed if using auto-import feature:
    components: [
      'QFab',
      'QFabAction'
    ]
  }
}

Usage

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

TIP

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

Non-Expandable

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

Non expandable



Expandable

Expandable



Internal labels
v1.9+

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
v1.9+

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



Square style
v1.9+

Square style



With QPageSticky

With QPageSticky



Draggable

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

Draggable



QFab API

QFabAction API