ListItem
SfListItem is a component that can be used in all sorts of menus. It comes with styles for common data states like disabled and selected.
Examples
ListItem sizes
SfListItem supports 3 sizes that can be set with the size prop: 'sm', 'base', 'lg'.
ListItem slots
SfListItem provides slotPrefix and slotSuffix props that you can use to add custom content before/after your default content. This can be useful for adding inputs, thumbnails, icons, or any other content to your list items.
ListItem truncate
For items with a lot of text content, you can use Tailwind's truncate class.
Accessibility notes
ListItem component can be rendered as an <li> or <a> or any other tag by providing it with prop as.
When no tag provided, the component will render as an <li>. To achieve proper accessibility it is important to implement required properties depending on the passed tag.