Filter group

Filter buttons

Use EuiFilterGroup to wrap EuiFilterButtons into a container that looks nice against form fields (like search). These buttons are used in two different patterns. The most simplest use is that of an on/off pattern to show whether a filter is on. Add the prop withNext to remove the border between it and the next EuiFilterButton to visually group similar or opposite style filters.

Add the prop withNext to remove the border between it and the next EuiFilterButton to visually group similar or opposite style filters.

Set hasActiveFilters to true when the filter is active.

Loading...

Multi-select

To provide a long list of grouped filters, we recommend wrapping the filter button within an EuiPopover and passing the items to a searchable EuiSelectable.

Indicating number of filters

By passing a number to numFilters you can express the number of filters available. When the user has applied these filter add the prop hasActiveFilters as before and this will change the coloring of the indicator. You can also supply a number to numActiveFilterswhich will change the number displayed.

Loading...

Layout

By default, the bar is auto-widthed based on its contents. To expand the bar to fill its parent's width add fullWidth. This will also set each button to grow. If you do not want the button to grow, set grow=false.

Loading...

Props

EuiFilterGroup

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 fullWidth# ↦	Description and type Expand the whole bar to fill its parent's width Type: boolean ↦	Default value false ↵
Prop compressed# ↦	Description and type When true, creates a shorter height filter group matching that of compressed form controls Type: boolean ↦	Default value ↵

𐘂𐘂

EuiFilterButton

Extends ButtonHTMLAttributes, AnchorHTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop hasActiveFilters# ↦	Description and type Bolds the button if true Type: boolean ↦	Default value ↵
Prop numFilters# ↦	Description and type Pass the total number of filters available and it will add a subdued notification badge showing the number Type: number ↦	Default value ↵
Prop numActiveFilters# ↦	Description and type Pass the number of selected filters and it will add a bright notification badge showing the number Type: number ↦	Default value ↵
Prop isSelected# ↦	Description and type Applies a visual state to the button useful when using with a popover. Applies the boolean state as the aria-pressed property to create a toggle button. Only use when the readable text does not change between states. Type: boolean ↦	Default value ↵
Prop grow# ↦	Description and type Should the button grow to fill its container, best used for dropdown buttons Type: boolean ↦	Default value true ↵
Prop withNext# ↦	Description and type Remove border after button, good for opposite filters Type: boolean ↦	Default value ↵
Prop badgeColor# ↦	Description and type Change color of the counter badge Type: "accent" | "success" | "subdued" ↦	Default value accent ↵
Prop color# ↦	Description and type Any of the named color palette options. Type: "text" | "accent" | "primary" | "success" | "warning" | "danger" ↦	Default value text ↵
Prop target# ↦	Description and type Type: string ↦	Default value ↵
Prop rel# ↦	Description and type Type: string ↦	Default value ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵
Prop isLoading# ↦	Description and type Force disables the button and changes the icon to a loading spinner Type: boolean ↦	Default value ↵
Prop contentProps# ↦	Description and type Object of props passed to the <span> wrapping the button's content Type: CommonProps & EuiButtonDisplayContentType ↦	Default value ↵
Prop type# ↦	Description and type Type: "button" | "reset" | "submit" ↦	Default value button ↵
Prop iconType# ↦	Description and type Any type accepted by EuiIcon Type: IconType ↦	Default value ↵
Prop iconSide# ↦	Description and type Can only be one side left or right Type: ButtonContentIconSide ↦	Default value right ↵
Prop textProps# ↦	Description and type Object of props passed to the <span> wrapping the content's text/children only (not icon) This span wrapper can be removed by passing textProps={false}. Type: false | (HTMLAttributes<HTMLSpanElement> & CommonProps & { ref?: Ref<HTMLSpanElement>; 'data-text'?: string; }) ↦	Default value ↵
Prop iconSize# ↦	Description and type Type: "s" | "m" ↦	Default value ↵
Prop isDisabled# ↦	Description and type disabled is also allowed Type: boolean ↦	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 href# ↦	Description and type Type: string ↦	Default value ↵
Prop onClick# ↦	Description and type Type: MouseEventHandler<HTMLAnchorElement> | MouseEventHandler<HTMLButtonElement> ↦	Default value ↵
Prop buttonRef# ↦	Description and type Type: Ref<HTMLAnchorElement | HTMLButtonElement> ↦	Default value ↵

𐘂𐘂