Facet
EuiFacetButtons are to be used when allowing lists with multiple search params to be filtered down
by these particular params. They allow for an icon
node and/or quantity
to be passed.
You can also indicate the current selection with isSelected
. Other props include isDisabled
and isLoading
(which will swap the quantity indicator with a loading icon).
Facet layout
Utilize the EuiFacetGroup wrapper to correctly layout multiple facets. You can supply a layout
of either
horizontal
or vertical
with the default being vertical
. Be sure to contain vertical layouts in a skinny component
or give it a max-width. You can also adjust the spacing between items with the gutterSize
prop.
Typically, each facet grouping should display similarly. For example, they should all have icons or be similar icon nodes (like avatars). It is up to you whether each group should be single or multi-selection.