Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
@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.
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)
npm install --save @material/fab
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.
<button class="mdc-fab material-icons" aria-label="Favorite">
<span class="mdc-fab__icon">
favorite
</span>
</button>
<button class="mdc-fab mdc-fab--mini material-icons" aria-label="Favorite">
<span class="mdc-fab__icon">
favorite
</span>
</button>
<button class="mdc-fab mdc-fab--plain material-icons" aria-label="favorite">
<span class="mdc-fab__icon">
favorite
</span>
</button>
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 xmlns="http://www.w3.org/2000/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.
The block class is mdc-fab
. This defines the top-level button 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.
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. |
FAQs
The Material Components for the web floating action button component
The npm package @material/fab receives a total of 763,027 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.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.