MUI or Material-UI is a UI library providing predefined robust and customizable components for React for easier web development. The MUI design is based on top of Material Design by Google.
In this article, we will discuss the React MUI Fab API. The FAB or Floating Action Button is used as a button that provides quick navigation to the most accessed area of the website. The API provides a lot of functionality and we will learn to implement them.
Import Fab API
import Fab from '@mui/material/Fab';
// or
import { Fab } from '@mui/material';
Props List: Here is the list of different props used with this component. We can access them and modify them according to our needs.
- children (node): It is the content of the component which are ImageListItem elements.
- classes (Object): Override the existing styles or add new styles to the component.
- color(default/error/info/inherit/primary/secondary/success/warning): It is used to set the colour of the component. The default value is the default.
- component(elementType): This is used for the root node.
- disabled(bool): If set to true, the element is disabled. The default value is false.
- disableFocusRipple(bool): If set to true, the keyboard focus ripple is disabled. The default value is false.
- disableFocusRipple(bool): If set to true, the ripple is disabled. The default value is false.
- href(string): The URL linked with the button.
- size(small, medium, large): It is used to the size of the button. The default is large.
- sx (Array<func / object/bool> / func / object): The system prop allows defining system overrides as well as additional CSS styles.
- variant(circular, extended): This is used to set the variant. The default value is circular.
CSS Rules:
- root(.MuiFab-root): It is the style applied to the root element.
- primary(.MuiFab-primary): It is the style applied to the root element if the color is set to primary.
- secondary(.MuiFab-secondary): It is the style applied to the root element if the color is set to secondary.
- extended(.MuiFab-extended): It is the style applied to the root element if the variant is set to extend.
- circular(.MuiFab-circular): It is the style applied to the root element if a variant is set to circular.
- focusVisible(.Mui-focusVisible): It is the state class applied to the ButtonBase root element if the button is keyboard focused.
- disabled(.Mui-disabled): It is the state class applied to the root element if disabled is set to true.
- colorInherit(.MuiFab-colorInherit): It is the style applied to the root element if color is set to inherit.
- sizeSmall(.MuiFab-sizeSmall): It is the style applied to the root element if the size is set to small
- sizeMedium(.MuiFab-sizeMedium): It is the style applied to the root element if size is set to medium.
Syntax: Create a FAB element as follows:
<Fab color="primary" aria-label="add">
<AddIcon />
</Fab>Installing and Creating React app and adding the MUI dependencies:
Step 1: Create a react project using the following command.
npx create-react-app gfg_tutorial
Step 2: Get into the project directory
cd gfg_tutorial
Step 3: Install the MUI dependencies as follows:
npm install @mui/material @emotion/react npm install @emotion/styled @mui/lab @mui/icons-material
Project Structure: The project should look like the below:
Step 4: Run the project as follows:
npm start
Example 1: In the following example, we have an enabled Fab and another disabled Fab.
import "./App.css";
import * as React from "react";
import Box from "@mui/material/Box";
import Fab from "@mui/material/Fab";
import AddIcon from "@mui/icons-material/Add";
import EditIcon from "@mui/icons-material/Edit";
import FavoriteIcon from "@mui/icons-material/Favorite";
import NavigationIcon from "@mui/icons-material/Navigation";
import { Html } from "@mui/icons-material";
function App() {
return (
<div className="App">
<div
className="head"
style={{
width: "fit-content",
margin: "auto",
}}
>
<h1
style={{
color: "green",
}}
>
GeeksforGeeks
</h1>
<strong>React MUI Fab API</strong>
</div>
<br />
<Box
sx={{
margin: "auto",
display: "flex",
justifyContent: "space-evenly",
width: "50%",
}}
>
<Fab color="primary" aria-label="add">
<AddIcon />
</Fab>
<Fab disabled aria-label="Html">
<Html />
</Fab>
</Box>
</div>
);
} export default App;
|
Output:
Example: In the following example, we have extended Fab of different sizes.
import "./App.css";
import * as React from "react";
import Box from "@mui/material/Box";
import Fab from "@mui/material/Fab";
import AddIcon from "@mui/icons-material/Add";
import EditIcon from "@mui/icons-material/Edit";
import FavoriteIcon from "@mui/icons-material/Favorite";
import NavigationIcon from "@mui/icons-material/Navigation";
import { Html } from "@mui/icons-material";
function App() {
return (
<div className="App">
<div
className="head"
style={{
width: "fit-content",
margin: "auto",
}}
>
<h1
style={{
color: "green",
}}
>
GeeksforGeeks
</h1>
<strong>React MUI Fab API</strong>
</div>
<br />
<Box
sx={{
margin: "auto",
display: "flex",
justifyContent: "space-evenly",
width: "50%",
}}
>
<Fab variant="extended" size="small" color="primary" aria-label="add">
<NavigationIcon sx={{ mr: 1 }} />
Extended
</Fab>
<Fab
variant="extended"
size="medium"
color="secondary"
aria-label="add"
>
<NavigationIcon sx={{ mr: 1 }} />
Extended
</Fab>
<Fab variant="extended" color="inherit"
aria-label="add">
<NavigationIcon sx={{ mr: 1 }} />
Extended
</Fab>
</Box>
</div>
);
} export default App;
|
Output:
Reference: https://mui.com/material-ui/api/fab/#main-content