Extending Material Design’s list item component
Material Design list component must be one of the most versatile components in the whole design system. It’s flexible and great for both displaying information as well as facilitating user interaction through buttons and other controls. However, there is room for some added functionality!
The list item is comprised a primary and secondary text, with optional items before and after the text.
Items before the text are usually an avatar or an icon. The trailing items can be anything really, including user interactions like a switch or an icon button. The primary text is a title and the secondary text is a paragraph.
Extending the list item component
The list item component has potential to carry more functionality. Some extra features may be added without overloading the component making it too cluttered and complex.
By adding an overline text above the primary text we are able to display more information to the user about some context. And allowing for two secondary action components makes the component even more useful.
Want to use it too?
Of course you do! If you’re a designer you can use the Figma file to start using the component in your mockups. And if you’re a developer using MUI you can use the mui-listitem-extended library.
Figma file
To start using the extended list item component in your designs just go to the Figma file created by Adi Chakravarty and duplicate it. Then you can start editing the list component provided in the 🕹 Playground or copy the List component into your project.
React components
To install the library run npm install mui-listitem-extended and import the wrapper components:
import { ListItemTextExtended, ListItemSecondaryActionExtended } from 'mui-listitem-extended'These components will work as drop-in replacements for the ListItemText and ListItemSecondaryAction from MUI and are super simple to use. They work exactly the same but with the additional features:
// ListItemText with overline
<ListItemTextExtended
primary="Title"
secondary="Some text"
overline="overline" />// ListItemSecondaryAction with two actions
<ListItemSecondaryActionExtended>
<IconButton>
<Inbox/>
</IconButton>
<IconButton>
<Comment />
</IconButton>
</ListItemSecondaryActionExtended>
Check out the library Github repo for full example:
Demo app
For some inspiration check out the demo app above. It showcases what one can do with the extended list items and MUI list items in general! To see how the components are implemented go to the repo below:
Credits
Big thank you to Material Design and MUI for developing these great resources and providing them to the community for free!
