@material/fab

What is @material/fab?

@material/fab is a Material Design implementation of the Floating Action Button (FAB) component. It provides a way to create floating action buttons that adhere to Material Design guidelines, offering a consistent and visually appealing user experience.

What are @material/fab's main functionalities?

Basic Floating Action Button

This code creates a basic floating action button with a 'favorite' icon. The button uses the 'mdc-fab' class to apply the Material Design styles.

<button class="mdc-fab" aria-label="Favorite">
  <span class="mdc-fab__icon material-icons">favorite</span>
</button>

Mini Floating Action Button

This code creates a mini floating action button with an 'edit' icon. The 'mdc-fab--mini' class makes the button smaller than the standard FAB.

<button class="mdc-fab mdc-fab--mini" aria-label="Edit">
  <span class="mdc-fab__icon material-icons">edit</span>
</button>

Extended Floating Action Button

This code creates an extended floating action button with an 'add' icon and a label. The 'mdc-fab--extended' class makes the button wider to accommodate the label.

<button class="mdc-fab mdc-fab--extended">
  <span class="mdc-fab__icon material-icons">add</span>
  <span class="mdc-fab__label">Add</span>
</button>

Other packages similar to @material/fab

react-fab

react-fab is a React component library for creating floating action buttons. It provides similar functionality to @material/fab but is specifically designed for use with React. It offers customizable FABs with various styles and animations.

vue-fab

vue-fab is a Vue.js component library for creating floating action buttons. Like @material/fab, it adheres to Material Design guidelines but is tailored for Vue.js applications. It provides easy-to-use components for adding FABs to Vue projects.

angular-material

angular-material is a comprehensive library for Angular applications that includes a wide range of Material Design components, including floating action buttons. It offers more extensive functionality beyond just FABs, making it a versatile choice for Angular developers.

README

MDC FAB

The MDC FAB component is a spec-aligned button component adhering to the Material Design FAB requirements. It works without JavaScript with basic functionality for all states. If you initiate the JavaScript object for a button, then it will be enhanced with ripple effects. (Not yet implemented)

Installation

npm install --save @material/fab

Usage

The demonstrations use the Material Design Icon Font. You may include this to use them as shown or use any other icon method you wish.

Default

<button class="mdc-fab material-icons" aria-label="Favorite">
  <span class="mdc-fab__icon">
    favorite
  </span>
</button>

Mini

<button class="mdc-fab mdc-fab--mini material-icons" aria-label="Favorite">
  <span class="mdc-fab__icon">
    favorite
  </span>
</button>

Plain

<button class="mdc-fab mdc-fab--plain material-icons" aria-label="favorite">
  <span class="mdc-fab__icon">
    favorite
  </span>
</button>

Absolutely positioned

By default the FAB rests in the page where it sits in the content flow. Developers must position it as-needed within their applications designs.

<!--
  This will position the FAB in the bottom-right corner.
  Modify to fit your designs requirements.
-->
<style>
.app-fab--absolute.app-fab--absolute {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
}

@media(min-width: 1024px) {
   .app-fab--absolute.app-fab--absolute {
    bottom: 3rem;
    right: 5rem;
  }
}
</style>
<button class="mdc-fab app-fab--absolute" aria-label="Edit">
  <span class="mdc-fab__icon">
    <svg width="24" height="24" viewBox="0 0 24 24">
      <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
    </svg>
  </span>
</button>

Note In this example we are using an SVG icon. When you are using SVG icons do not specifiy the fill attribute. Fill is set by the components where SVGs may be used.

Adding ripples to FABs

To add the ink ripple effect to a FAB, attach a ripple instance to the FAB element.

mdc.ripple.MDCRipple.attachTo(document.querySelector('.mdc-fab'));

You can also do this declaratively when using the material-components-web package.

<button class="mdc-fab material-icons" aria-label="Favorite" data-mdc-auto-init="MDCRipple">
  <span class="mdc-fab__icon">
    favorite
  </span>
</button>

FABs are fully aware of ripple styles, so no DOM or CSS changes are required to use them.

Classes

Block

The block class is mdc-fab. This defines the top-level button element.

Element

The button component has a single span element added as a child of the button due to buttons not adhering to flexbox rules in all browsers. See this Stackoverflow post for details.

Modifier

The provided modifiers are:

Class	Description
mdc-fab--mini	Makes the fab smaller (40 x 40 pixels).
mdc-fab--plain	Makes the FAB have a white background.