List Group
The ListGroup component is used to present ListGroupItems in a neatly formatted list. Use the flush and bordered properties for full-width and bordered presentations, respectively.
Show as flush
Show as bordered
List of links
Present ListGroupItems as links by providing an href value and change their appearance with the size, isActive, andisDisabled properties. As done in this example, the ListGroup component can also accept an array of items via the listItems property.
Show as flush
Show as bordered
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.
Show as flush
Show as bordered
- EUI button link
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.