Static list

Lab component

Also known as

List
Available since
@salt-ds/lab@1.0.0-alpha.48

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.

Density
Mode

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.