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