Reactjs Material-UI Floating action button component

Material-UI Floating action button:

A floating action button appars on top of everything in a page. Typically it has one icon at its center. Floating action buttons are used for user actions that we want on any state of the page. For example, we can use it as a chat or help button, which will be visible always to the user.

Material-UI provides a Floating action button component that can be used to create different types of floating action button easily. In this post, I will show you how to use this component with different examples.

YouTube video:

Component:

Fab is the component used to create a floating action button. We can import it from material-ui/core as like below:

import { Fab } from "@material-ui/core";

Simple program that uses Floating action button:

Let's create a simple program with a floating action button. The below program creates one floating action button with an icon:

import { Fab } from "@material-ui/core";
import AddIcon from "@material-ui/icons/Add";
import "./App.css";

function App() {
  return (
    <div className="App">
      <Fab>
        <AddIcon />
      </Fab>
    </div>
  );
}

export default App;

We have added one icon from @material-ui/icons. You can get the full list of material icons here.

It will give the below result:

Changing the color of a Fab:

Color can be changed by using the color props.For example, we can change it to primary color as like below:

<Fab color='primary'>
    <AddIcon />
</Fab>

Changing the size of a Fab:

Size of a floating action button can be change by using the size props in Material-UI. It can be small, large or mid.

import { Fab } from "@material-ui/core";
import AddIcon from "@material-ui/icons/Add";
import "./App.css";

function App() {
  return (
    <div className="App">
      <Fab style={{ marginRight: 10 }} color="primary" size="small">
        <AddIcon />
      </Fab>
      <Fab style={{ marginRight: 10 }} color="secondary" size="mid">
        <AddIcon />
      </Fab>
      <Fab color="primary" size="large">
        <AddIcon />
      </Fab>
    </div>
  );
}

export default App;

This will create three buttons with three sizes.

Floating action button with text and icon, Extended Floating action button:

We can also add text with icon in a floating action button. For that, we need to define variant props as extended:

import { Fab } from "@material-ui/core";
import AddIcon from "@material-ui/icons/Add";
import "./App.css";

function App() {
  return (
    <div className="App">
      <Fab variant="extended" color="primary" size="small">
        <AddIcon />
        Add Items
      </Fab>
    </div>
  );
}

export default App;

Adding animation to a floating action button:

We can add animation to a Fab. For example, the below code snippet will add a zoom animation when it will load.

import { Fab, Zoom } from "@material-ui/core";
import AddIcon from "@material-ui/icons/Add";

import "./App.css";

function App() {
  return (
    <div className="App">
      <Zoom in={true} timeout={{ enter: 500, exit: 500 }} unmountOnExit>
        <Fab color="primary" size="small">
          <AddIcon />
        </Fab>
      </Zoom>
    </div>
  );
}

export default App;