In Material Design a floating action button (or FAB) is used for the primary, or most common, actions on a screen. These FABs appear in front of the other screen content. Shapes can vary but in Material Design it is typically a circular shape with an icon in its center.
You can add multiple actions inside of the FABs that will appear on hover. Use FABs for important, positive actions.
These FAB components are absolutely positioned inside their parent, the 'component-section' container. The position is determined by the .top-right class. You can either go to the Position section on the Design pane > Layout tab to change this, or remove the class and add you own.
To view and edit the inner buttons in Site Designer go to the Elements pane and click on the eye icon. Please note that the exact positioning is controlled by Javascript and can only be viewed correctly in the browser.
This FAB is configured to show the popout on tab or click instead of hover. This is controlled by the script in the embedded (invisible) HTML element in combination with the .click-to-toggle class. You can access the HTML Element on the Elements pane.
For this FAB the popout extends to the left of the button (on click or tab). The direction is controlled by the script in the HTML element in combaniation with .direction-left class.