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.
Usage
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).
Non-Expandable
If you want a non-expandable FAB, all you need is a round button – wrapped in QPageSticky if used on a QLayout.
Expandable
Hover v2.27+
With the hover prop the FAB also opens when the pointer hovers it and closes once the pointer has left both the main button and the actions. The hover-hide-delay prop controls the grace period in which the pointer can travel between the two (or return) before the FAB closes, while hover-delay postpones the opening.
Click/tap and keyboard interactions keep toggling the FAB as usual, so touch devices (which have no hover) simply fall back to them; this also means that clicking the main button (or activating it with Enter) while the FAB is hover-shown closes it. The one exception is a click that lands while the actions are still animating into view: it is ignored, so a single move-and-click gesture cannot close the FAB that the very same gesture just opened.
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:
Padding
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
Animating the actions v2.30+
The sub-actions stay in the DOM at all times. Opening the FAB toggles an --opened / --closed state class on their container and each action fades and scales into place from there, one after the other. The stagger prop sets how many milliseconds apart consecutive actions animate: the cascade runs outwards from the main button when opening and back towards it when closing, whatever the direction is. Use 0 to animate them all at once.
Slots v2.4+
Notice the slots for QFab and the slots for QFabAction below:
With QPageSticky
Draggable
Below is a nice example of using TouchPan for making the QFab draggable across the screen.
Accessibility v2.25+
The QFab trigger is a button carrying aria-expanded and aria-controls pointing at its actions container, so screen readers can tell whether the sub-actions are open. While closed, the actions are hidden from assistive technology and removed from the tab order; activating an action closes the FAB and returns focus to the trigger.
A visible label doubles as the accessible name of the trigger or of an action; give icon-only ones an aria-label, which falls through to the rendered button. Keyboard support covers opening/closing the FAB with Enter / Space and Tab-bing through the open actions only — there is no Escape-to-close and no arrow-key navigation between actions.