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.

Non-Expandable

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

Basic



Expandable

Expandable



With QPageSticky



QFab API

QFabAction API