A Quasar Floating Action Button (FAB) represents the primary action in an App Page. But it’s not limited to only that. It can contain sub-actions too, and more importantly it can also be used inline into your Pages or Layouts.
So there are two types: expandable (has sub-actions) and non-expandable. If not expandable, a simple circular button will suffice. Otherwise check the HTML tags below.
We’ll continue describing only the expandable ones, as the non-expandable are simple circular buttons and you can read about them in the Buttons documentation page.
These properties and methods apply to
|Vue Property||Default Value||Description|
|“primary”||One of the main colors in Quasar Color Palette; can also be an array of colors or CSS classes. Also, any other CSS class. Space delimited String.|
|“add”||Icon to use when not expanded|
|“right”||The direction in which to expand; one of the following values: “up”, “down”, “left”, “right”.|
|“close”||The icon to change to when expanded.|
|Toggle open/close state.|
|Triggered when clicking/tapping on main FAB after it was already opened.|
Simply use the Quasar CSS Positioning classes.