ListItemButton

Overview

ListItemButton is a list item that makes it functional or clickable. Also, ListItemButton could be set up only after ListItem first gets set up.

Please refer to this for more information: https://mui.com/material-ui/api/list-item-button/.

Import

CODE

import { ListItem, ListItemButton } from '@mui/material';

The above source will be imported automatically after dragging and dropping the Basic Component to the UI Preview Panel.

Property

Property:

Name	Default	Description
Id-name	Placeholder: <id-name>	The Id-name of the created component.
State	State: Normal	The State of the created Component.
Margin and Padding	Size Unit: Px	The component Margin and Padding with many selectable Size Units.
Size	Size Unit: Px	The component Size includes Width and Height with many selectable Size Units.
Alignment	Align-items: None	The component Alignment includes Align-item.
Layout	Position: None Size Unit: Px	The component layout includes Position and Top - Right - Bottom - Left size with many selectable Size Units.
General	Disabled: False Selected: False Visibility: None Opacity: 100%	The component General includes Disabled, Selected, Visibility, Opacity, and Background.
Advanced Style		The component Advanced Style includes Classname and Inline Style addition.

Code Sample:

CODE

<ListItemButton
                    sx={{':active': {
                    'width': '200px','height': '200px',
                    'position': 'absolute',
                    'top': '10px','right': '20px','bottom': '20px','left': '10px',
                    'margin': '10px 20px 30px 30px',
                    'padding': '10px 20px 30px 30px',},}}
                     alignItems="flex-start">
</ListItemButton>

Related Components