menuMDUIDocs
color_lens
The new mdui 2 based on Material Design 3 and Web Components is now available. Check out the mdui 2 documentation.

Floating Action Button

A floating action button (FAB) represents the primary action on a screen. It is a circular icon that appears to float above the interface and can trigger actions such as opening a speed-dial menu or showing or hiding content.

Usage

  1. Call via Attributes
  2. Call via JavaScript

Related Reading

Material Design Guidelines: Components - Floating Action Button

Style

Floating Action Button

Add the class .mdui-fab to an element to make it a floating action button.

codeplay_arrow
Example
<button class="mdui-fab mdui-ripple">
          <i class="mdui-icon material-icons">add</i>
        </button>
        <button class="mdui-fab mdui-color-theme-accent mdui-ripple">
          <i class="mdui-icon material-icons">add</i></button
        >

Adding the class .mdui-fab-mini makes it a mini floating action button.

codeplay_arrow
Example
<button class="mdui-fab mdui-fab-mini mdui-ripple">
          <i class="mdui-icon material-icons">add</i>
        </button>
        <button
          class="mdui-fab mdui-fab-mini mdui-color-theme-accent mdui-ripple"
        >
          <i class="mdui-icon material-icons">add</i></button
        >

Show/Hide Animation

Adding the class .mdui-fab-hide to a floating action button will hide it with an animation; removing the class will show it with an animation.

codeplay_arrow
Example
<button
          class="mdui-fab mdui-color-theme-accent mdui-ripple"
          id="fab-animation"
        >
          <i class="mdui-icon material-icons">add</i>
        </button>

        <button class="mdui-btn" id="fab-animation-show">show</button>
        <button class="mdui-btn" id="fab-animation-hide">hide</button>

        <script>
          var fab = document.getElementById('fab-animation');
          document
            .getElementById('fab-animation-show')
            .addEventListener('click', function () {
              fab.classList.remove('mdui-fab-hide');
            });
          document
            .getElementById('fab-animation-hide')
            .addEventListener('click', function () {
              fab.classList.add('mdui-fab-hide');
            });
        </script>

Fixed to Bottom Right

Adding the class .mdui-fab-fixed will fix the button to the bottom right of the window.

<button class="mdui-fab mdui-fab-fixed mdui-ripple">
  <i class="mdui-icon material-icons">add</i>
</button>
Run

Speed Dial

HTML Structure

This button is always fixed to the bottom right of the window. Hovering over or clicking it opens a speed-dial menu upward.

<div class="mdui-fab-wrapper" id="exampleFab">
  <button class="mdui-fab mdui-ripple mdui-color-theme-accent">
    <!-- Icon shown by default -->
    <i class="mdui-icon material-icons">add</i>

    <!-- Smoothly switches to this icon when the speed dial starts to open; this element can be omitted if no icon switch is needed. -->
    <i class="mdui-icon mdui-fab-opened material-icons">add</i>
  </button>
  <div class="mdui-fab-dial">
    <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-pink">
      <i class="mdui-icon material-icons">backup</i>
    </button>
    <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-red">
      <i class="mdui-icon material-icons">bookmark</i>
    </button>
    <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-orange">
      <i class="mdui-icon material-icons">access_alarms</i>
    </button>
    <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-blue">
      <i class="mdui-icon material-icons">touch_app</i>
    </button>
  </div>
</div>

Call via Attributes

This method does not require writing JavaScript code. Simply add mdui-fab="options" to the element containing .mdui-fab-wrapper to activate the plugin.

<div class="mdui-fab-wrapper" mdui-fab="{trigger: 'hover'}">
  ......
</div>

Call via JavaScript

Instantiate component:

// selector is a CSS selector, DOM element, or HTML string
// options are plugin parameters, see the parameter list below
var inst = new mdui.Fab(selector, options);
Run

Param

Param NameTypeDefaultDescription
triggerstringhoverTrigger method.
  • hover: Triggered by mouse hover.
  • click: Triggered by click.

Method

Method NameDescription
open()Open the speed dial menu.
close()Close the speed dial menu.
toggle()Toggle the open state of the speed dial menu.
show()Show the entire floating action button with an animation.
hide()Hide the entire floating action button with an animation.
getState()Returns the current open state of the speed dial menu. There are four states (opening, opened, closing, closed).

Event

Event NameDescriptionTargetParams
open.mdui.fabTriggered when the speed dial menu starts its opening animation.<div class="mdui-fab-wrapper"></div>event._detail.inst: Instance
opened.mdui.fabTriggered when the speed dial menu completes its opening animation.
close.mdui.fabTriggered when the speed dial menu starts its closing animation.
closed.mdui.fabTriggered when the speed dial menu completes its closing animation.

CSS Classes

Class NameDescription
.mdui-fabDefines a floating action button.
.mdui-fab-miniDefines a mini floating action button.
.mdui-fab-hideHides the floating action button with an animation.
.mdui-fab-fixedFixes the floating action button to the bottom right.
.mdui-fab-wrapperThe outer element for a floating action button with a speed dial menu.
.mdui-fab-openedThe icon switched to after the floating action button with a speed dial menu opens its menu.
.mdui-fab-dialThe outer element for the menu items of a floating action button with speed dial.
arrow_backPrevious
Button
arrow_forwardNext
Select