Caution: The Jack Henry design system is currently in an alpha state. Designs, code, and documentation may change at any time without warning. The system is presented for testing purposes only.

Floating action button

A floating action button represents a promoted action that floats above the user interface.

Anatomy

Elements

Key Element Description
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 <button> element or an <a> element depending on the interaction required. Provides the states for the FAB.
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.

Placement

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.
Don't
Don’t use multiple single FABs on a single screen; if multiple related actions are needed, consider using a group FAB.

Variants

Type

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 <a> structure.
Icon (Default)
Avatar
Icon (Default)
  • 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.
The icon should directly convey the action of the button.
Avatar
  • 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.
Regardless of the avatar’s appearance settings, it should retain the default circular styling of the floating action button.

Group

Floating action buttons can be grouped together as multiple related actions.

Icon (Default)
Avatar

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”.
Don't
Don’t mix icons and avatars within the same set of expanded options.
Don't
Don’t include an overflow menu as one of the options within a floating action button group.

Behavior

States

Enabled (Default)
Focus
Hover
Active
Disabled
State Description
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.

Expand

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.