| Name | Description | Default | Type |
|---|---|---|---|
items* | Array of nodes or text to be rendered in the list. | | ReactNode[] |
className | Additional CSS classes. | | string |
ref | Ref for the wrapping element. | | Ref<HTMLUListElement> |
wrapItems | If true, MetaList items that extend past the MetaList's container will wrap to a new line. | true | boolean |
MetaList
core package3.2.2
Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit Pega Community.
The MetaList component is simply an inline rendering of listed items. Each item is separated by a bullet point.
Usage
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.
Example
- email@example.com
- •
- Verified
- •
- Go to Pega.com