Skip Navigation

Floating Action Button (FAB)

The FAB represents the primary action on a screen and can trigger a single action or display a menu of multiple actions.

Icon-Only, Single-Action FAB

A FAB typically consists of an icon button and appears in front of all other screen content, scaling to a more condensed version on extra-small screen sizes (see Spark breakpoints. This variation allows a single action to be performed once selected.


When to Use

  • When a primary action is relevant to the screen or the entire application.

When Not to Use

  • Not recommended if the primary action is unrelated to the overall screen/application.
  • Do not use a FAB as a navigational menu.

Examples

Usage

Placement

  • On larger screens, the FAB is typically placed in the bottom right of the viewport, or it can be affixed to the edge of certain container components (for example, Side Fixed Panel or Top Fixed Panel).
  • On mobile devices, always position a Single-Action FAB in the bottom right, center, or left of the screen and include 24px of margin from the edge of the viewport. A Multi-Action FAB should only be positioned in the bottom right or left of the screen, and never the center.
  • On screens that include a footer, position the FAB 24px from the top edge of the Footer to avoid overlapping and hiding Footer content.
  • Use caution when displaying more than one FAB on a single screen. Multiple FAB’s can be used if they perform distinct, equally important actions.

Behaviors

  • The FAB can trigger a single action on the current screen, perform an action that creates a new screen, or display a menu of related actions.
  • The number of Multi-Action FAB menu actions should be at least three and never exceed five, including the close button.
  • The FAB and/or the actions that emit from it should perform a positive, constructive action (for example, Create, Share, Favorite). Avoid using a FAB for minor or destructive actions, such as Delete or Cancel, or actions that are better suited for a Toolbar.
  • The Icon-Only FAB should contain a single icon that clearly illustrates the action being taken. If more description is needed, consider using an Extended FAB.

Responsive Behavior

  • At the extra-small breakpoint, all FAB buttons will condense to a smaller size automatically. Optionally, it is possible to use the condensed size across all breakpoints.

Examples

Extended, Single-Action FAB

The Extended FAB is wider than the Icon-Only FAB and includes a text label to help convey the primary action. This variation allows a single action to be performed once selected.


When To Use

  • Use an Extended FAB if an icon alone does not clearly communicate the primary action.

Additional Guidelines

  • The Extended FAB utilizes a text label, and an optional icon can accompany the text.
  • The text label should be short and concise and relevant to the action. Do not wrap the text within an Extended FAB and only truncate the text if shorter text is not available.

Icon-Only, Multi-Action FAB

The Icon-Only, Multi-Action FAB displays a menu of related actions when the FAB is selected.


When To Use

When the related actions are equally important to the screen or entire application.

Extended, Multi-Action FAB

The Extended, Multi-Action FAB displays a menu of related actions when the FAB is selected.


When To Use

When the related actions are equally important to the screen or entire application.

Multi-Action FABs with Labels

Labels can be used in conjunction with the Multi-Action FAB’s related actions to provide more context.


Additional Guidelines

Truncate extra-long labels when necessary, to prevent text from wrapping.

Multi-Action FABs with Underlay

An underlay can appear when a Multi-Action FAB is engaged/active. This places additional emphasis on the FAB’s actions and prevents action from being taken on page content as long as the FAB is engaged.


Additional Guidelines

When using a Multi-Action FAB, an underlay will not display by default. To show the underlay when the actions list is expanded, use the appropriate configuration as noted in the component Developer Notes. It is also possible to show the underlay with a certain range of Spark defined breakpoints or screen sizes. Refer to the Developer Notes for more information.

Developer Notes

Icon-Only, Single-Action FAB

The Icon-Only, Single-Action FAB is created by applying the spark-fab class to a button element. An icon would then be placed inside the button element with the spark-icon-md class as well as the appropriate spark-icon-* class that displays the desired icon.

<div style="min-height: 100vh;">
  <button class="spark-fab" aria-label="Add New"><i class="spark-icon-math-add spark-icon--md" aria-hidden="true"></i></button>
</div>


<style type="text/css">
  
</style>

Extended, Single-Action FAB

An Extended, Single-Action FAB is created by applying the spark-fab and spark-fab--extended classes to a button element. The appropriate text label would then be set as part of the button’s content.

<div style="min-height: 100vh;">
  <button class="spark-fab spark-fab--extended">Add New</button>
</div>


<style type="text/css">
  
</style>

For Extended, Single-Action FABs with an icon, place the icon inside the button and to the left of the text label with the appropriate spark-icon-* class that displays the desired icon. A spark-icon-md class is not required as the icon’s font-size will be the same as the button’s label.

<div style="min-height: 100vh;">
  <button class="spark-fab spark-fab--extended"><i class="spark-icon-math-add" aria-hidden="true"></i>Add New</button>
</div>


<style type="text/css">
  
</style>

Single-Action FAB Placement

Single-Action FABs are by default placed on the bottom-right corner of the viewport, but the component has built-in support for bottom-left and bottom-middle placement. The classes used for positioning are spark-fab--left, spark-fab--middle and spark-fab--right. If none of the positioning classes are used, the FAB will be positioned on the bottom-right of the viewport.

A key behavior of the above positioning classes is that they will supersede any direction attributes i.e. dir="rtl" and dir="ltr" that may be set on the document or parent container.

Bottom-Left Placement

<div style="min-height: 100vh;">
  <button class="spark-fab spark-fab--left" aria-label="Add New"><i class="spark-icon-math-add spark-icon--md" aria-hidden="true"></i></button>
</div>


<style type="text/css">
  
</style>

Bottom-Middle Placement

<div style="min-height: 100vh;">
  <button class="spark-fab spark-fab--middle" aria-label="Add New"><i class="spark-icon-math-add spark-icon--md" aria-hidden="true"></i></button>
</div>


<style type="text/css">
  
</style>

Right-to-Left Support for Single-Action FABs

Support is available for Right-to-Left contexts for both Icon-Only and Extended, Single-Action FABs.

<bdo dir="rtl">
  <div style="min-height: 100vh;">
    <button class="spark-fab spark-fab--extended">جدید اضافه کن</button>
  </div>
</bdo>


<style type="text/css">
  
</style>

Multi-Action FABs

FABs that have related actions are created by applying the class spark-fab-group on a container element that holds the actions/buttons. The group of actions will consist of an expand button with the class spark-fab-group__expand, a collapse button with the class spark-fab-group__collapse, and a container with the class spark-fab-group__options that holds the related actions each with the class spark-fab-option.

Multi-Action FABs require Javascript to function correctly. The following options may be passed when using new Spark.FloatingActionButton(el, {}); to instantiate the component:

Name Type Default Description
showUnderlay boolean null Whether an Underlay should be shown when the Floating Action Button group is expanded. If not passed, the component will check for the presence of the data-show-underlay attribute.
underlayBreakPoint string/number null The viewport size or breakpoint (and lower) at which an Underlay should be displayed when the Floating Action Button group is expanded. This option requires the showUnderlay option to be set as well. When provided as a string, it should be one of the Spark-defined breakpoints i.e. xs, sm, md, lg or xl. When provided as a number, it should be a pixel size without the units e.g. 1000. If not passed, the component will check for the value of the data-underlay-breakpoint attribute. Keep in mind that when using the data-underlay-breakpoint attribute the value will be considered a string.
autoClose boolean true Close the Floating Action Button group automatically when a related action button is clicked. If not passed, the component will check for the value of the data-auto-close attribute.
onExpand function null A callback function run when the Floating Action Button group is expanded.
onCollapse function null A callback function run when the Floating Action Button group is collapsed.

For all available methods and full API, refer to the component code on Bitbucket.

Icon-Only, Multi-Action FAB

<div style="min-height: 100vh;">

  <div class="spark-fab-group">
    <button class="spark-fab-group__expand" aria-label="Expand Menu" aria-haspopup="true" aria-expanded="false"><i class="spark-icon-math-add spark-icon--md" aria-hidden="true"></i></button>
    <button class="spark-fab-group__collapse" aria-label="Collapse Menu"><i class="spark-icon-math-add spark-icon--md" aria-hidden="true"></i></button>

    <div class="spark-fab-group__options">
      <button class="spark-fab-option" aria-label="Reservation"><i class="spark-icon-calendar spark-icon--md" aria-hidden="true"></i></button>
      <button class="spark-fab-option" aria-label="Customer Profile"><i class="spark-icon-user spark-icon--md" aria-hidden="true"></i></button>
      <button class="spark-fab-option" aria-label="Housekeeping Request"><i class="spark-icon-hotel-bed spark-icon--md" aria-hidden="true"></i></button>
    </div>
  </div>

</div>


<style type="text/css">
  
</style>
// Vanilla JS
var fabEl = document.querySelector('.spark-fab-group');
var fabInst = new Spark.FloatingActionButton(fabEl);

For Icon-Only related actions, use the spark-fab-option class on the related action button and place the spark-icon-md class as well as the appropriate spark-icon-* class to display the desired icon.

Extended, Multi-Action FAB

To display an Extended, expand button, use the classes spark-fab-group__expand and spark-fab-group__expand--extended.

<div style="min-height: 100vh;">

  <div class="spark-fab-group">
    <button class="spark-fab-group__expand spark-fab-group__expand--extended" aria-haspopup="true" aria-expanded="false">Add New</button>
    <button class="spark-fab-group__collapse" aria-label="Collapse Menu"><i class="spark-icon-math-add spark-icon--md" aria-hidden="true"></i></button>

    <div class="spark-fab-group__options">
      <button class="spark-fab-option" aria-label="Reservation"><i class="spark-icon-calendar spark-icon--md" aria-hidden="true"></i></button>
      <button class="spark-fab-option" aria-label="Customer Profile"><i class="spark-icon-user spark-icon--md" aria-hidden="true"></i></button>
      <button class="spark-fab-option" aria-label="Housekeeping Request"><i class="spark-icon-hotel-bed spark-icon--md" aria-hidden="true"></i></button>
    </div>
  </div>

</div>


<style type="text/css">
  
</style>
// Vanilla JS
var fabEl = document.querySelector('.spark-fab-group');
var fabInst = new Spark.FloatingActionButton(fabEl);

Multi-Action FABs with Labels

The related actions used within the spark-fab-group__options can be displayed with or without labels. Usage of labels will depend on whether the icons clearly convey what action will be taken.

For related actions with text labels, use the classes spark-fab-option and spark-fab-option--label on the related action button. Inside the button element, place the desired label inside a span element and provide the appropriate icon as noted above. The label should always be placed before the icon.

<div style="min-height: 100vh;">

  <div class="spark-fab-group">
    <button class="spark-fab-group__expand spark-fab-group__expand--extended" aria-haspopup="true" aria-expanded="false">Add New</button>
    <button class="spark-fab-group__collapse" aria-label="Collapse Menu"><i class="spark-icon-math-add spark-icon--md" aria-hidden="true"></i></button>

    <div class="spark-fab-group__options">
      <button class="spark-fab-option spark-fab-option--label">
        <span>Reservation</span>
        <i class="spark-icon-calendar spark-icon--md" aria-hidden="true"></i>
      </button>

      <button class="spark-fab-option spark-fab-option--label">
        <span>Customer Profile</span>
        <i class="spark-icon-user spark-icon--md" aria-hidden="true"></i>
      </button>

      <button class="spark-fab-option spark-fab-option--label">
        <span>Housekeeping Request</span>
        <i class="spark-icon-hotel-bed-alert spark-icon--md" aria-hidden="true"></i>
      </button>
    </div>
  </div>

</div>


<style type="text/css">
  
</style>
// Vanilla JS
var fabEl = document.querySelector('.spark-fab-group');
var fabInst = new Spark.FloatingActionButton(fabEl);

Multi-Action FABs with Underlay

When expanding the FAB group to display related action actions, it is possible to display an Underlay to separate the page content from the related actions. To use the Underlay, use one of the available options (noted in the table above) when instantiating the component.

<div style="min-height: 100vh;">

  <div class="spark-fab-group" data-show-underlay>
    <button class="spark-fab-group__expand spark-fab-group__expand--extended" aria-haspopup="true" aria-expanded="false">Add New</button>
    <button class="spark-fab-group__collapse" aria-label="Collapse Menu"><i class="spark-icon-math-add spark-icon--md" aria-hidden="true"></i></button>

    <div class="spark-fab-group__options">
      <button class="spark-fab-option spark-fab-option--label">
        <span>Reservation</span>
        <i class="spark-icon-calendar spark-icon--md" aria-hidden="true"></i>
      </button>

      <button class="spark-fab-option spark-fab-option--label">
        <span>Customer Profile</span>
        <i class="spark-icon-user spark-icon--md" aria-hidden="true"></i>
      </button>

      <button class="spark-fab-option spark-fab-option--label">
        <span>Housekeeping Request</span>
        <i class="spark-icon-hotel-bed-alert spark-icon--md" aria-hidden="true"></i>
      </button>
    </div>
  </div>

</div>


<style type="text/css">
  
</style>
// Vanilla JS
var fabEl = document.querySelector('.spark-fab-group');
var fabInst = new Spark.FloatingActionButton(fabEl);

Multi-Action FABs Placement

Multi-Action FABs are by default placed on the bottom-right corner of the viewport, but the component has built-in support for bottom-left placement. The classes used for positioning are spark-fab-group--left and spark-fab-group--right. If none of the positioning classes are used, the Multi-Action FAB will be positioned on the bottom-right of the viewport.

A key behavior of the above positioning classes is that they will supersede any direction attributes i.e. dir="rtl" and dir="ltr" that may be set on the document or parent container.

<div style="min-height: 100vh;">

  <div class="spark-fab-group spark-fab-group--left">
    <button class="spark-fab-group__expand spark-fab-group__expand--extended" aria-haspopup="true" aria-expanded="false">Add New</button>
    <button class="spark-fab-group__collapse" aria-label="Collapse Menu"><i class="spark-icon-math-add spark-icon--md" aria-hidden="true"></i></button>

    <div class="spark-fab-group__options">
      <button class="spark-fab-option spark-fab-option--label">
        <span>Reservation</span>
        <i class="spark-icon-calendar spark-icon--md" aria-hidden="true"></i>
      </button>

      <button class="spark-fab-option spark-fab-option--label">
        <span>Customer Profile</span>
        <i class="spark-icon-user spark-icon--md" aria-hidden="true"></i>
      </button>

      <button class="spark-fab-option spark-fab-option--label">
        <span>Housekeeping Request</span>
        <i class="spark-icon-hotel-bed-alert spark-icon--md" aria-hidden="true"></i>
      </button>
    </div>
  </div>

</div>


<style type="text/css">
  
</style>
// Vanilla JS
var fabEl = document.querySelector('.spark-fab-group');
var fabInst = new Spark.FloatingActionButton(fabEl);

Right-to-Left support is also available with the above placement options.

Condensed FABs

To display condensed sizes for all FABs across all breakpoints, use the classes spark-fab and spark-fab--sm for Single-Action FABs and the classes spark-fab-group and spark-fab-group--sm for Multi-Action FABs.

Additional Guidelines

In addition to the onExpand and onCollapse callbacks, the FAB group component allows you to subscribe to its expand and collapse events to perform specific actions when said events occur. For example, if a certain action should be triggered when the FAB group is collapsed, you could approach it in the following manner:

var fab = document.querySelector('.spark-fab-group');
var fabInst = new Spark.FloatingActionButton(fab);

fabInst.on('collapse', e => {
  console.log('FAB group collapsed');

  // perform specific action
});

Accessibility Notes

Icon-Only FAB

When displaying an Icon-Only FAB, an aria-label attribute should be set with a value that indicates the action to be taken by clicking the button. The icon placed within the button should include an aria-hidden attribute set to true to prevent assistive technologies from trying to announce it to users as there is no text value within it.

<button class="spark-fab" aria-label="Add New">
  <i class="spark-icon-math-add spark-icon--md" aria-hidden="true"></i>
</button>

Extended FAB with Icon

When displaying an Extended FAB with an icon, the icon placed within the button should include an aria-hidden attribute set to true to prevent assistive technologies from trying to announce it to users as there is no text value within it.

<button class="spark-fab spark-fab--extended">
  <i class="spark-icon-math-add" aria-hidden="true"></i>Add New
</button>

FAB Group Expand Button

The FAB group’s expansion button, spark-fab-group__expand, requires the following ARIA attributes:

  • aria-has-popup with the value set to true. This attribute indicates that the button will reveal a hidden menu.
  • aria-expanded with the value set to false. This attribute indicates the current state of the hidden menu, whether it is visible or hidden. When clicked, the component will switch the value of this attribute to true if the menu is visible, and back to false when the menu is hidden.

When displaying related action buttons consisting only of icons, an aria-label attribute should be set with a value that indicates the action to be taken by clicking the button. The icon placed within the button should include an aria-hidden attribute set to true to prevent assistive technologies from trying to announce it to users as there is no text value within it.

<button class="spark-fab-option" aria-label="Reservation">
  <i class="spark-icon-calendar spark-icon--md" aria-hidden="true"></i>
</button>

When displaying related action buttons with labels, the icon placed within the button should include an aria-hidden attribute set to true to prevent assistive technologies from trying to announce it to users as there is no text value within it. The text label provided in the span element will be announced as the label for the button.

<button class="spark-fab-option spark-fab-option--label">
  <span>Reservation</span>
  <i class="spark-icon-calendar spark-icon--md" aria-hidden="true"></i>
</button>