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.

Props

EuiListGroup

Extends ButtonHTMLAttributes, AnchorHTMLAttributes


Prop	Description and type	Default value
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop bordered#	Description and type Add a border to the list container Type: `boolean`	Default value `false`
Prop flush#	Description and type Remove container padding, stretching list items to the edges Type: `boolean`	Default value `false`
Prop gutterSize#	Description and type Spacing between list items Type: `"s" \| "m" \| "none"`	Default value `s`
Prop listItems#	Description and type Items to display in this group. See #EuiListGroupItem Type: `EuiListGroupItemProps[]`	Default value
Prop color#	Description and type Change the colors of all `listItems` at once Type: `"text" \| "primary" \| "subdued"`	Default value `text`
Prop size#	Description and type Change the size of all `listItems` at once Type: `"xs" \| "s" \| "m" \| "l"`	Default value `m`
Prop maxWidth#	Description and type Sets the max-width of the page. Set to `true` to use the default size, set to `false` to not restrict the width, or set to a number/string for a custom CSS width/measurement. Type: `boolean \| MaxWidth<string \| number>`	Default value `true`
Prop showToolTips#	Description and type Display tooltips on all list items Type: `boolean`	Default value `false`
Prop wrapText#	Description and type Allow link text to wrap vs truncated Type: `boolean`	Default value `false`
Prop ariaLabelledby#	Description and type Type: `string`	Default value

EuiListGroupItem

Extends ButtonHTMLAttributes, AnchorHTMLAttributes


Prop	Description and type	Default value
Prop label#	Description and type Content to be displayed in the list item Type: `ReactNode`	Default value Required
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop size#	Description and type Size of the label text Type: `"xs" \| "s" \| "m" \| "l"`	Default value `m`
Prop color#	Description and type By default the item will get the color `text`. You can customize the color of the item by passing a color name. Type: `"text" \| "primary" \| "subdued"`	Default value `text`
Prop isActive#	Description and type Apply styles indicating an item is active Type: `boolean`	Default value `false`
Prop isDisabled#	Description and type Apply styles indicating an item is disabled Type: `boolean`	Default value
Prop href#	Description and type Make the list item label a link. While permitted, `href` and `onClick` should not be used together in most cases and may create problems. Type: `string`	Default value
Prop rel#	Description and type Type: `string`	Default value
Prop target#	Description and type Type: `string`	Default value
Prop external#	Description and type Set to true to show an icon indicating that it is an external link; Defaults to true if `target="_blank"` Type: `boolean`	Default value
Prop iconType#	Description and type Adds `EuiIcon` of `EuiIcon.type` Type: `IconType`	Default value
Prop iconProps#	Description and type Further extend the props applied to EuiIcon Type: `Omit<EuiIconProps, "type">`	Default value
Prop icon#	Description and type Custom node to pass as the icon. Cannot be used in conjunction with `iconType` and `iconProps`. Type: `ReactElement`	Default value
Prop showToolTip#	Description and type Display tooltip on list item Type: `boolean`	Default value `false`
Prop extraAction#	Description and type An object of #EuiListGroupItemExtraAction props. Adds an `EuiButtonIcon` to the right side of the item; `iconType` is required; pass `alwaysShow` if you don't want the default behavior of only showing on hover Type: `EuiListGroupItemExtraActionProps`	Default value
Prop onClick#	Description and type Make the list item label a button. While permitted, `href` and `onClick` should not be used together in most cases and may create problems. Type: `MouseEventHandler<HTMLButtonElement>`	Default value
Prop wrapText#	Description and type Allow link text to wrap Type: `boolean`	Default value
Prop buttonRef#	Description and type Pass-through ref reference specifically for targeting instances where the item content is rendered as a `button` Type: `React.Ref<HTMLButtonElement>`	Default value
Prop toolTipText#	Description and type Text to be displayed in the tooltip when `showToolTip` is true. By default the text will be same as the label text. Type: `string`	Default value
Prop toolTipProps#	Description and type Allows customizing the tooltip shown when `showToolTip` is true. Accepts any props that EuiToolTip accepts. Type: `Partial<EuiToolTipProps>`	Default value

EuiPinnableListGroup

Extends ButtonHTMLAttributes, AnchorHTMLAttributes


Prop	Description and type	Default value
Prop listItems#	Description and type Extends `EuiListGroupItemProps`, at the very least, expecting a `label`. See #EuiPinnableListGroupItem Type: `EuiPinnableListGroupItemProps[]`	Default value Required
Prop onPinClick#	Description and type Shows the pin icon and calls this function on click. Returns `item: EuiPinnableListGroupItemProps` Type: `(item: EuiPinnableListGroupItemProps) => void`	Default value Required
Prop pinTitle#	Description and type The pin icon needs a title/aria-label for accessibility. It is a function that passes the item back and must return a string `(item) => string`. Default is `"Pin item"` Type: `(item: EuiPinnableListGroupItemProps) => string`	Default value
Prop unpinTitle#	Description and type The unpin icon needs a title/aria-label for accessibility. It is a function that passes the item back and must return a string `(item) => string`. Default is `"Unpin item"` Type: `(item: EuiPinnableListGroupItemProps) => string`	Default value
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop bordered#	Description and type Add a border to the list container Type: `boolean`	Default value
Prop flush#	Description and type Remove container padding, stretching list items to the edges Type: `boolean`	Default value
Prop gutterSize#	Description and type Spacing between list items Type: `"s" \| "m" \| "none"`	Default value
Prop color#	Description and type Change the colors of all `listItems` at once Type: `"text" \| "primary" \| "subdued"`	Default value `text`
Prop size#	Description and type Change the size of all `listItems` at once Type: `"xs" \| "s" \| "m" \| "l"`	Default value `m`
Prop maxWidth#	Description and type Sets the max-width of the page. Set to `true` to use the default size, set to `false` to not restrict the width, or set to a number/string for a custom CSS width/measurement. Type: `boolean \| MaxWidth<string \| number>`	Default value
Prop showToolTips#	Description and type Display tooltips on all list items Type: `boolean`	Default value
Prop wrapText#	Description and type Allow link text to wrap vs truncated Type: `boolean`	Default value
Prop ariaLabelledby#	Description and type Type: `string`	Default value