Static list
Lab componentStatic list
StaticList
manages the layout of non-interactive list items, providing a structured and composable way to display content. It's ideal for use in patterns like file upload or checkout baskets.
The default Static list
allows users to show non-interactive list items.
For complex labels, you can add additional elements to provide further context or descriptions for each list item.
Note: To ensure correct spacing when using buttons or icons, wrap your static content inside StaticListItemContent
.
Icons
can be used to help users quickly identify the related contents inside the StaticListItem
.
- Icons should be displayed before labels.
- Use icons consistently across all static list items within the same group.
You can use Button
to add actions to the StaticListItem
s.
Note: Buttons should be associated to the list item content using aria-label
or aria-labelledby
.
You can separate the list of StaticListItem
s by adding a Divider
component between items.