Static 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 StaticListItems.
Note: Buttons should be associated to the list item content using aria-label or aria-labelledby.
You can separate the list of StaticListItems by adding a Divider component between items.
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 StaticListItems.
Note: Buttons should be associated to the list item content using aria-label or aria-labelledby.
You can separate the list of StaticListItems by adding a Divider component between items.
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 StaticListItems.
Note: Buttons should be associated to the list item content using aria-label or aria-labelledby.
You can separate the list of StaticListItems by adding a Divider component between items.