@material/fab
Advanced tools
@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.
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>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 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 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.
A floating action button represents the primary action in an application.
npm install --save @material/fab
We recommend you load Material Icons from Google Fonts
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<button class="mdc-fab material-icons" aria-label="Favorite">
<span class="mdc-fab__icon">
favorite
</span>
</button>
| CSS Class | Description |
|---|---|
mdc-fab | Mandatory, for the button element |
mdc-fab__icon | Mandatory, for the icon element |
mdc-fab--mini | Optional, modifies the FAB to a smaller size |
mdc-fab--exited | 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.
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.
-->
<style>
.app-fab--absolute {
position: fixed;
bottom: 1rem;
right: 1rem;
}
@media(min-width: 1024px) {
.app-fab--absolute {
bottom: 1.5rem;
right: 1.5rem;
}
}
</style>
<button class="mdc-fab material-icons app-fab--absolute" aria-label="Favorite">
<span class="mdc-fab__icon">
favorite
</span>
</button>
To add the ripple effect to an MDC FAB, attach a ripple instance to the
mdc-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>
MDC FAB is fully aware of MDC Ripple styles, so no DOM or CSS changes are required.
By default an MDC FAB will inherit its color from the theme. This mixin will override the color of the MDC FAB's container, but maintain accessibility standards for the ink and ripple. The mixin is intended for customizing an MDC FAB's color to a non-theme color.
mdc-fab-accessible($container-color)Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.
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.
| Mixin | Description |
|---|---|
mdc-fab-container-color($color) | Sets the container color to the given color |
mdc-fab-ink-color($color) | Sets the ink color to the given color |
mdc-fab-ripple($ripple-config) | Sets the ripple to the given ripple configuration |
In browsers that fully support CSS variables, the above mixins will hook up styles using CSS variables if a theme property is passed.
However, due to Edge's buggy CSS variable support, mdc-fab-container-color will not honor CSS variables in Edge.
This means you will need to override FAB container styles manually for Edge if you are altering the affected CSS variables for theme properties (FAB uses secondary by default for the container fill color).
FAQs
The Material Components for the web floating action button component
The npm package @material/fab receives a total of 542,422 weekly downloads. As such, @material/fab popularity was classified as popular.
We found that @material/fab demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 15 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.