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.

Use isToggle to change the visual and functional type of the button element that's being rendered from a regular button to a toggle button.

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

You can use the numFilters prop to display the total number of filters available and numActiveFilters to set the number of currently active filters. Pass hasActiveFilters to visually indicate that there are active filters.

numActiveFilters accepts integer numbers. In special cases, you may pass a percentage value as a string if UX justifies it.

Loading...

Layout

By default, the bar is auto-width 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 HTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

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 Highlights active filters 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 The number of active (selected) filters. The value will be displayed as a bright notification badge. Accepted values are integers and percentages (e.g., 20%). Passing other values is not supported and may break the layout. @example 10 @example '20%' Type: string | number ↦	Default value ↵
Prop isToggle# ↦	Description and type Switches between toggle and regular button Type: boolean ↦	Default value false ↵
Prop isSelected# ↦	Description and type Applies a visual state to the button. Automatically applies aria-pressed when used with isToggle={true}. Otherwise applies aria-expanded when used with isToggle={false} and iconType="arrowDown" as trigger button for e.g. a popover. 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. Do not use the following colors for standalone buttons directly, they exist to serve other components: accent warning Type: "primary" | "text" | "accent" | "accentSecondary" | "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 ↵

𐘂𐘂