Floating Action Button
A floating action button represents the primary action in an application.
Design & API Documentation
npm install @material/fab
Load Material Icons
We recommend using Material Icons from Google Fonts:
However, you can also use SVG, Font Awesome, or any other icon library you wish.
NOTE: The floating action button icon can be used with a
NOTE: IE 11 will not center the icon properly if there is a newline or space after the material icon text.
MDCRipple on the root element. See MDC Ripple for details.
;const fabRipple = document;
NOTE: The extended FAB must contain label where as the icon is optional. The icon and label may be specified in whichever order is appropriate based on context.
||Mandatory, for the button element|
||Mandatory, for the icon element|
||Mandatory, for the element which shows the ripple.|
||Optional, for the text label. Applicable only for Extended FAB.|
||Optional, modifies the FAB to a smaller size|
||Optional, modifies the FAB to wider size which includes a text label.|
||Optional, animates the FAB out of view.
When this class is removed, the FAB will return to view.
A note about
:disabled, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does not perform an action, you should also present an explanation to the user.
Basic Sass Mixins
MDC FAB uses MDC Theme's
secondary color by default. Use the following mixins to customize it.
||Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.|
||Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within
Advanced Sass Mixins
A note about advanced mixins, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, or ripple. You can use all of them if you want to completely customize a FAB. Or you can use only one of them, e.g. if you only need to override the ripple color. It is up to you to pick container, ink, and ripple colors that work together, and meet accessibility standards.
||Sets the container color to the given color|
||Sets the icon
||Sets the ink color to the given color|
||Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon,
||Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon.|
||Sets rounded shape to only regular & mini FAB variants with given radius size. Set
||Sets rounded shape to only Extended FAB variant with given radius size. Set
The ripple effect for the FAB component is styled using MDC Ripple mixins.
Material Design spec advises that touch targets should be at least 48x48px. While the FAB is 48x48px by default, the mini FAB is 40x40px. Add the following to meet this requirement for mini FAB's:
Note that the outer
mdc-touch-target-wrapper element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).
Developers must position MDC FAB as needed within their application's design.
<!--This will position the FAB in the bottom-right corner.Modify to fit your design's requirements.-->favorite