Floating action button
A floating action button represents a promoted action that floats above the user interface.
|1||Container||Defines the boundary of the FAB and provides a consistent background color to accommodate the semi-transparent button states.|
|2||Button||Provides the interaction for the FAB; can be structured with either a true
|3||Icon||Iconography used to visually clarify the action; user-customizable.|
|4||Avatar||Conveys that an end-user can be interacted with; image is user-customizable.|
Some things to keep in mind when using a floating action button (FAB).
- Should be anchored to the bottom-right corner of a view.
- Placement should be consistent across views.
- FAB should be “sticky” so that it is always visible in the bottom-right of the view even when scrolling.
- To promote consistency across the UI, consider making the FAB a common action (or set of actions) that can persist across each screen such as support-related or transactional actions.
- User should be able to adjust the z-index with the z-index token presets to control layering.
Some things to keep in mind with floating action button types:
- Regardless of type, consider including a tooltip with each FAB to help clarify its meaning.
- User can provide an href for link-based actions such as linking to another view or dialing a telephone number.
- Providing an href overrides the default
<button>structure by changing it to an
- Use icon-based FABs to conceptually convey actions that are relevant across multiple views such as linking to a contact information or support page.
- Icon name (which icon to use) is the only property that is exposed within the FAB.
- Use for customer-support-driven actions across the application.
- Avoid using avatar FABs on views that have other avatars as part of the UI such as user-profile pages.
- The following avatar properties are exposed: Image URL.
Floating action buttons can be grouped together as multiple related actions.
Some things to keep in mind with the FAB group:
- Use when there are multiple related actions available to select from such as multiple forms of support including a support modal, chatbot, and telephone dialer.
- User can select from either icon or avatar FAB types for use within the group.
- Consider limiting the number of FABs that display within a group to avoid overcrowding the UI and to help reduce cognitive overload.
- Orientation is always vertical.
- The initial FAB is built into the FAB group structure and its action is always icon-based.
- User can provide icon overrides for the expand and collapse states of the initial FAB.
- The icon override should convey the group of FAB actions, e.g., use “icon-share” to convey different ways of sharing.
- The default expand icon is “icon-plus”.
- The default collapse icon is “icon-close”.
|Enabled (Default)||Indicates that a FAB is usable.|
|Focus||Indicates a user has highlighted the FAB using the keyboard.|
|Hover||Indicates a user has placed the cursor above the FAB.|
|Active||Indicates the FAB has been activated either by a click or some other interaction.|
|Disabled||Use to convey when a FAB isn’t usable.|
Some things to keep in mind with an expanded FAB group:
- The default state for the FAB group is to display as collapsed; this can be overridden.
- Icons should expand upward from the initial FAB.
- Trigger the expand with a click or touch event and the standard keyboard interaction for a button element; clicking the initial FAB again collapses the buttons.
- The initial button displays an active state while the FAB group is expanded; when collapsed it returns to its enabled state.
- Each individual FAB within the FAB group has discrete states.