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.

Loading...

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.

Loading...

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.

Loading...

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.

Loading...

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'.

Loading...

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.

Loading...

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 ↵

𐘂𐘂