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 ListItemButton API. The Lists are continuous, vertical indexes of Text and Images. ListItemButton is a list item that makes it functional or clickable. It also adds the material splash effect on top of the button. The API provides a lot of functionality and we will learn to implement them.
Import ListItemButton API
import ListItemButton from '@mui/material/ListItemButton';
// or
import { ListItemButton } from '@mui/material';Props List: Here is the list of props used with this component. We can access them and modify them according to our needs.
- classes(object): This is used to override the existing styles or add new styles to the component.
- sx( Array<func / object / bool>/ func / object): The system prop allows defining system overrides as well as additional CSS styles.
- alignItems(center / flex-start): It is used to set the align-items style property. The default value is the center.
- autoFocus(bool): If set to true, the list item is focused when the component is first mounted. The default value is false.
- children(node): This contains the content of the component.
- component(elementType): It is the component used for the root node.
- dense(bool): If set to true, the items inside the component have less padding and come closer to each other. The default value is false.
- disabled(bool): If set to true, the component is disabled and we won’t be able to click it. The default value is set to false.
- disableGutters(bool): If set to true, the left and right padding inside the component is removed. The default value is set to false.
- divider(bool): If set to true, a 1px light border is added to the bottom of the list item which acts as a divider between items. The default value is set to false.
- selected(bool): If set to true, applies the selected styling.
CSS Rules:
- root(.MuiListItemButton-root): It is the style applied to the root element.
- focusVisible(.Mui-focusVisible): It is the state class applied to the component’s focusVisibleClassName prop.
- dense(.MuiListItemButton-dense): It is the style applied to the component element if dense.
- alignItemsFlexStart(.MuiListItemButton-alignItemsFlexStart): It is the style applied to the component element if alignItems is set to flex-start.
- disabled(.Mui-disabled): It is the state class applied to the inner component element if disabled is set to true.
- divider(.MuiListItemButton-divider): It is the style applied to the inner component element if the divider is set to true.
- gutters(.MuiListItemButton-gutters): It is the style applied to the inner component element unless disableGutters is true.
- selected(.Mui-selected): It is the state class applied to the root element if selected is set to true.
Syntax: Create ListItemButton in List as follows
<ListItem>
<ListItemButton>
...
</ListItemButton>
</ListItem>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:
Step 4: Run the project as follows:
npm start
Example 1: In the following example, we have ListItemButton inside the List.
App.js
import "./App.css";
import * as React from "react";
import Box from "@mui/material/Box";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import Divider from "@mui/material/Divider";
import InboxIcon from "@mui/icons-material/Inbox";
import DraftsIcon from "@mui/icons-material/Drafts";
import { Css, 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 ListItemButton API</strong>
</div>
<br />
<center>
<Box sx={{ width: "100%", maxWidth: 360, bgcolor:
"background.paper" }}>
<nav aria-label="main mailbox folders">
<List>
<ListItem>
<ListItemButton>
<ListItemIcon>
<Html />
</ListItemIcon>
<ListItemText
primary="HTML" />
</ListItemButton>
</ListItem>
<ListItem>
<ListItemButton>
<ListItemIcon>
<Css />
</ListItemIcon>
<ListItemText
primary="CSS" />
</ListItemButton>
</ListItem>
</List>
</nav>
<nav aria-label="secondary mailbox folders">
<List>
<ListItem disablePadding>
<ListItemButton>
<ListItemText
primary="Javascript" />
</ListItemButton>
</ListItem>
<ListItem disablePadding>
<ListItemButton component="a"
href="#simple-list">
<ListItemText
primary="PHP" />
</ListItemButton>
</ListItem>
</List>
</nav>
</Box>
</center>
</div>
);
} export default App;
|
Output:
Example 2: In the following example, we have a divider for all the ListItemButtons.
App.js
import "./App.css";
import * as React from "react";
import Box from "@mui/material/Box";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import Divider from "@mui/material/Divider";
import InboxIcon from "@mui/icons-material/Inbox";
import DraftsIcon from "@mui/icons-material/Drafts";
import { Css, 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 ListItemButton API</strong>
</div>
<br />
<center>
<Box sx={{ width: "100%", maxWidth: 360,
bgcolor: "background.paper" }}>
<nav aria-label="main mailbox folders">
<List>
<ListItem>
<ListItemButton divider>
<ListItemIcon>
<Html />
</ListItemIcon>
<ListItemText primary="HTML" />
</ListItemButton>
</ListItem>
<ListItem>
<ListItemButton divider>
<ListItemIcon>
<Css />
</ListItemIcon>
<ListItemText primary="CSS" />
</ListItemButton>
</ListItem>
</List>
</nav>
<nav aria-label="secondary mailbox folders">
<List>
<ListItem disablePadding>
<ListItemButton divider>
<ListItemText
primary="Javascript" />
</ListItemButton>
</ListItem>
<ListItem disablePadding>
<ListItemButton
divider component="a"
href="#simple-list">
<ListItemText primary="PHP" />
</ListItemButton>
</ListItem>
</List>
</nav>
</Box>
</center>
</div>
);
} export default App;
|
Output:
Reference: https://mui.com/material-ui/api/list-item-button/