MetaList

The MetaList component is simply an inline rendering of listed items. Each item is separated by a bullet point.

For more information on how to use the features and props for this component, check out the developer documentation.

The MetaList component takes an array of ReactNodes for the items prop. Any item that is plain text will have the secondary Text variant applied.

By default, any items that overflow their container will move onto a new line, preserving all of the content. If you would like to keep the MetaList component confined to a single line, pass false to the wrapItems prop. This will trim any Text items that overflow with an ellipsis. Non-text items will be trimmed without an ellipsis.

NameTypeDefaultDescription
items*ReactNode[]Array of nodes or text to be rendered in the list.
classNamestringAdditional CSS classes.
refRef<HTMLUListElement>Ref for the wrapping element.
wrapItemsbooleantrue If true, MetaList items that extend past the MetaList's container will wrap to a new line.