Floating Action Button

Floating action buttons are used for a promoted action. They are distinguished by a circled icon floating above the UI and have motion behaviors that include morphing, launching, and a transferring anchor point.

Floating Action Button Layout

Layout of floating action button is very simple. Just put it as the direct child of page or view:

<!-- Page-->
<div class="page navbar-fixed">
  <!-- Navbar-->
  <div class="navbar">
    <div class="navbar-inner">
      <div class="center">Floating Action Button</div>
    </div>
  </div>
  <!-- Floating Action Button -->
  <a href="#" class="floating-button color-pink">
    <i class="icon icon-plus"></i>
  </a>
  <!-- Scrollable Page Content-->
  <div class="page-content">
    <div class="content-block">
      Lorem ipsum dolor sit amet, ....
    </div>
  </div>
</div>

Morph To Popover

This feature is supported only in Material Theme

If you want to open Popover by tapping on FAB, then you can use FAB that morphs to Popover to add more fancy transition.

In this case we need to add additional floating-button-to-popover class to FAB itself:

<div class="page navbar-fixed">
  ...
  <!-- Floating Action Button
  "open-popover" class to open popover
  "floating-button-to-popover" class to open popover with morph transition
  data-popover=".demo-popver" to specify which popover to open
  -->
  <a href="#" class="floating-button floating-button-to-popover open-popover color-purple">
    <i class="icon icon-plus"></i>
  </a>
  ...
</div>
  ...
<!-- Popover -->
<div class="popover demo-popover">
  <div class="popover-inner">
    <div class="list-block">
      <ul>
        <li>
          <a href="#" class="item-content item-link">
            <div class="item-inner">
              <div class="item-title">Link 1</div>
            </div>
          </a>
        </li>
        <li>
          <a href="#" class="item-content item-link">
            <div class="item-inner">
              <div class="item-title">Link 2</div>
            </div>
          </a>
        </li>
        <li>
          <a href="#" class="item-content item-link">
            <div class="item-inner">
              <div class="item-title">Link 3</div>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

Speed Dial

The floating action button can fling out related actions upon press. The button should remain on screen after the menu is invoked. Tapping in the same spot should either activate the most commonly used action or close the open menu.

In this case we need to wrap FAB with <div class="speed-dial">...</div> and follow this layout:

<div class="page navbar-fixed">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="center">FAB Speed Dial</div>
    </div>
  </div>
  <!-- Speed Dial Wrap -->
  <div class="speed-dial">
    <!-- FAB inside will open Speed Dial actions -->
    <a href="#" class="floating-button">
      <!-- First icon is visible when Speed Dial actions are closed -->
      <i class="icon icon-plus"></i>
      <!-- Second icon is visible when Speed Dial actions are opened -->
      <i class="icon icon-close"></i>
    </a>
    <!-- Speed Dial Actions -->
    <div class="speed-dial-buttons">
      <!-- First Speed Dial button -->
      <a href="#">
        <i class="icon demo-icon-email"></i>
      </a>
      <!-- Second Speed Dial  button -->
      <a href="#">
        <i class="icon demo-icon-calendar"></i>
      </a>
      <!-- Third Speed Dial  button -->
      <a href="#">
        <i class="icon demo-icon-upload"></i>
      </a>
    </div>
  </div>
  <!-- End of Speed Dial -->
  <div class="page-content">...</div>
</div>
  • Note that Speed Dial actions buttons will appear in reversed order

  • You shouldn't use more than 6 Speed Dial actions

  • You should use at least 3 Speed Dial actions