List group

---

The EuiListGroup component is used to present EuiListGroupItems in a neatly formatted list. Use the flush and bordered properties for full-width and bordered presentations, respectively.

Adjust the gutterSize prop to increase or decrease the spacing between items.

List of links

Display EuiListGroupItems as links by providing an href value and change their state with the isActive and isDisabled properties.

If your link is external or will open in a new tab, you can manually set the external property. However, just like with the EuiLink component, setting target="_blank" defaults to external={true}.

As is done in this example, the EuiListGroup component can also accept an array of items via the listItems property.

Secondary link actions

The extraAction property adds a secondary icon button to any list item. It accepts several properties of its own, including color, onClick, iconType, and alwaysShow, and can be used for actions such as pinning, favoriting, or deleting an item.

Text wrapping and tooltips

Optional props showToolTip and wrapLines can be used to augment the display of list items. Use these when lists are inside small containers where it is likely that the content will be truncated.

Similarly, toolTipText can be used to provide tooltip text. By default, the tooltip will have the text same as the label.

You can also use toolTipProps to customize tooltip placement, title, and other behaviors.

List item color and size

EuiListGroupItems will get by default the color text. You can enforce a different color of primary, text, or subdued with the color prop. Or provide the prop directly to EuiListGroup.

They also accept options for text size; 'xs' | 's' | 'm' | 'l'.

Pinnable list group

EuiPinnableListGroup is simply an extra wrapper around an EuiListGroup that provides visual indicators for pinning.

Pinning is the concept that users can click a pin icon and add it to a subset of links (most likely shown in different list group). By providing an onPinClick handler, the component will automatically add the pin action to the item. However, the consuming application must manage the listItemsand their pinned state.

In order to get the full benefit of using EuiPinnableListGroup, the component only supports providing list items via the listItem prop and does not support children.