The Item component is used to display a single item in a list. It is used to display a single item in a list.
This can be used to display a list of usually interactive content, such as a list of contacts, or a list of messages.
List
component instead)Supporting visuals are a series of icons, images, avatars, and thumbnails that are often located in front of every list item.
They help to draw users' attention quickly, make the entire list UI design scannable, and align items better.
The title content, as the name suggests, is the main text content of each list item.
The content is the secondary text content of each list item.
Metadata is the additional information that is displayed in a list item. It is usually displayed in a smaller font size and is often located below the title and content.
Actions are a series of buttons that are usually located at the end of each list item. They are used to perform actions related to the list item.
The Item component has a few states that can be used to indicate the status of the item.
active
- Indicates that the item is currently active (usually selected, for example in a Sidebar)disabled
- Indicates that the item is currently disabled TODO: Add this statehover
- Indicates that the item is currently being hovered over