Create a good FAB button tutorial

2021-01-18

In one of my projects I wanted to add an action button. After some investigation I found the react library material UI that provides a Floating Action Button. I added the FAB button that provides a floating main action button yielding a good result. Continue reading to learn how you can add a FAB to your project as well.

Setup wrapper code

npx create-react-app fabtutorial

cd fabtutorial

npm install @material-ui/icons @material-ui/core

npm start

Create the FAB component

Use your favorite text editor such as visual studio code to create a file ShoppingList.js in the src folder.

import React from 'react';

export default function ShoppingList() {
    return (
        <div>Hello shopping list.</div>
    );
}  
                                            

Add your component to the App.js

import ShoppingList from './ShoppingList'

export default function App() {
    return (
        <ShoppingList/>
    );
}
                                            

Now we can create the FAB button in the shopping list.

import React from 'react';
import Fab from '@mui/material/Fab';
import AddIcon from '@mui/icons-material/Add';

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

Now we can finally see the button.

In order to understand how it works better, let's add a list on the same page.

import React from 'react';
import AddIcon from '@mui/icons-material/Add';
import Fab from '@mui/material/Fab';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
const tasks = ['Butter','Milk'];

export default function ShoppingList() {
    return (
        <div>
            <List>
            {
                tasks.map((value,index) => (
                        <ListItem key={index}>
                            {value}
                        </ListItem>
                ))
            }
            </List>
            <Fab color="primary" aria-label="add">
                <AddIcon/>
            </Fab>
        </div>
    );
}                                              
                                            

• Butter
• Milk

Our main action from the FAB here will be to add items to the list, let's start by making the FAB actually doing something. Move the tasks structure inside the shopping list and create a setfunction, then create an action for the FAB button that adds an item to the list.

import React, { useState} from 'react';
import AddIcon from '@mui/icons-material/Add';
import Fab from '@mui/material/Fab';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';

export default function ShoppingList() {
    const [tasks, setTasks] = useState(['Butter','Milk']);

    const handleAdd = () => {
        setTasks([...tasks,'New task']);
    }
    return (
        <div>
            <List>
            {
                tasks.map((value,index) => (
                        <ListItem key={index}>
                            {value}
                        </ListItem>
                ))
            }
            </List>
            <Fab color="primary" aria-label="add"  onClick={handleAdd}>
                <AddIcon/>
            </Fab>
        </div>
    );
}  
                                            

• Butter
• Milk
• New Task

Style the FAB component with z index in mind

Finally style the component so it's always visible by floating on the screen and visible above the list. Otherwise you might get into a situation where it's not possible to click on the FAB due to another component being above it. Start by adding styling in App.css.

.fab {
    margin: 0px;
    top: auto;
    right: 20px;
    bottom: 20px;
    left: auto;
    position: fixed;
    z-index: 1000;
};
                                            

Then apply the css class in the FAB component. Also place the Fab code above the List code otherwise it won’t float above it.

<Fab color="primary" aria-label="add"  onClick={handleAdd}  className="fab">
    <AddIcon/>
</Fab>
                                            

You can see the final result in action in the resulting shopping list App