| 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> |
testId | Applies a data-testid attribute to a component's root element and may be utilized as a prefix for descendant elements. Descendant element data-testid attributes are applied in a component to component specific manner. | | string |
wrapItems | If true, MetaList items that extend past the MetaList's container will wrap to a new line. | true | boolean |
MetaList
core package4.0.1
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.
Examples
- email@example.com
- •
- Verified
- •
- Go to Pega.comOpens in a new tab