Material UI — Floating Action Buttons

Material UI is a Material Design library made for React.

It’s a set of React components that have Material Design styles.

In this article, we’ll look at how to add floating buttons with Material UI.

Floating Action Button

We can add floating action buttons with the Fab component.

For instance, we can write:

import React from "react";
import Fab from "@material-ui/core/Fab";
import AddIcon from "@material-ui/icons/Add";

export default function App() {
  return (
    <Fab color="primary" aria-label="add">
      <AddIcon />
    </Fab>
  );
}

to add a floating action button to our app with the Fab component.

We have an icon inside it.

Size

To change the size, we set the size prop.

For instance, we can write:

import React from "react";
import Fab from "@material-ui/core/Fab";
import AddIcon from "@material-ui/icons/Add";

export default function App() {
  return (
    <Fab size="small">
      <AddIcon />
    </Fab>
  );
}

to change the button size to small.

Animation

We can animate the display of floating action buttons when we switch tabs.

To add the animation, we write:

import React from "react";
import Fab from "@material-ui/core/Fab";
import SwipeableViews from "react-swipeable-views";
import AppBar from "@material-ui/core/AppBar";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import Typography from "@material-ui/core/Typography";
import Box from "@material-ui/core/Box";
import AddIcon from "@material-ui/icons/Add";
import EditIcon from "@material-ui/icons/Edit";
import UpIcon from "@material-ui/icons/KeyboardArrowUp";
import Zoom from "@material-ui/core/Zoom";

function TabPanel(props) {
  const { children, value, index, ...other } = props;

return (
    <Typography
      component="div"
      role="tabpanel"
      hidden={value !== index}
      id={`action-tabpanel-${index}`}
      aria-labelledby={`action-tab-${index}`}
      {...other}
    >
      {value === index && <Box p={3}>{children}</Box>}
    </Typography>
  );
}

export default function App() {
  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  const handleChangeIndex = index => {
    setValue(index);
  };

  const fabs = [
    {
      color: "primary",
      icon: <AddIcon />,
      label: "Add"
    },
    {
      color: "secondary",
      icon: <EditIcon />,
      label: "Edit"
    },
    {
      color: "inherit",
      icon: <UpIcon />,
      label: "Expand"
    }
  ];

return (
    <div>
      <AppBar position="static" color="default">
        <Tabs
          value={value}
          onChange={handleChange}
          indicatorColor="primary"
          textColor="primary"
          variant="fullWidth"
          aria-label="action tabs example"
        >
          <Tab label="Item One" />
          <Tab label="Item Two" />
          <Tab label="Item Three" />
        </Tabs>
      </AppBar>
      <SwipeableViews axis="x" index={value} onChangeIndex={handleChangeIndex}>
        <TabPanel value={value} index={0}>
          Item One
        </TabPanel>
        <TabPanel value={value} index={1}>
          Item Two
        </TabPanel>
        <TabPanel value={value} index={2}>
          Item Three
        </TabPanel>
      </SwipeableViews>
      {fabs.map((fab, index) => (
        <Zoom
          key={fab.color}
          in={value === index}
          timeout={100}
          style={{
            transitionDelay: `0ms`
          }}
          unmountOnExit
        >
          <Fab
            aria-label={fab.label}
            className={fab.className}
            color={fab.color}
          >
            {fab.icon}
          </Fab>
        </Zoom>
      ))}
    </div>
  );
}

We add an AppBar to display a bar on the top with the Tab s below it.

Then to display the tab content, we have the TabPanel components to display them.

We created the TabPanel component ourselves to show and hide the items based on the index of the tab that’s selected.

Then we display the floating action buttons below that.

The p prop on the Box lets us add some padding.

We set the font with the Typography component.

component is set to div.

hidden lets us choose what content to hide, which is the tabs with the index that isn’t selected.

We put it inside the Zoom component so that we get a zoom transition when we display the buttons.

The duration of the transition will be the timeout value.

It’s measured in milliseconds.

unmountOnExit will clear the button when we switch tabs.

The index is updated when we click the tab heading, which will trigger the handleChange function to run.

If we swipe tabs, then the handleChangeIndex function runs and does the same thing as handleChange .

Conclusion

We can add floating action buttons with various styles and sizes.

Also, we can transition between different buttons within a tab.