# Floating Action Button ## Motion Functions


Guidance Function	Guidance_Reduced.gif
Structural Function	Structure_Reduced.gif

Floating Action Buttons allow users to access primary information on the page. The primary function of a FAB is Guidance and Structure. The FAB shows users where they can access elements of an interface, and the interface is structured. The expansion of the FAB can give more information as to the affordances of the interface. Buttons can also have a set of secondary functions. Aesthetic functions can be incorporated into the FAB based on how the contained elements expand. ## Examples

Floating Action Button Interaction by Mauricio Bucardo

The FAB relies on transformation, masking, obscuration, and cloning principles to achieve the intended functions of structure and guidance. In the above example, the button reveals a layer underneath that contains the possible functions.

Liquid Tab Bar Animation by Dmitry Lauretsky

In this example, the FAB uses the principle of cloning to show that there are four icons that are part of the expanded set to draw the realtionship that they are a subset of the action performed (tapping the FAB)

Share Button Interaction Concept by Oleg Frolov

Here the FAB transforms from a circle to a rounded rectangle and has its children elements offset and populate the rectangle. The movement of the button presents the user wth a relationship that shows that the expanded button contains all the children actions. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://abhishekshankar.gitbook.io/uxm/the-system/action-components/floating-action-button.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.