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.
Horizontal and large gutter
Props
EuiFacetButton
Prop | Description and type | Default value |
|---|---|---|
Prop children# | Description and type ReactNode to render as this component's content ReactNode | Default value Required |
Prop buttonRef# | Description and type Type: RefCallback<HTMLButtonElement> | Default value |
Prop icon# | Description and type Any node, but preferably a ReactNode | Default value |
Prop isDisabled# | Description and type Type: boolean | Default value false |
Prop isLoading# | Description and type Adds/swaps for loading spinner & disables boolean | Default value false |
Prop isSelected# | Description and type Changes visual of button to indicate it's currently selected boolean | Default value false |
Prop quantity# | Description and type Adds a notification indicator for displaying the quantity provided number | Default value |
Prop element# | Description and type Type: "a" | "button" | "span" | Default value |
Prop size# | Description and type Type: "xs" | "s" | "m" | Default value |
Prop fullWidth# | Description and type Extends the button to 100% width boolean | Default value |
Prop minWidth# | Description and type Override the default minimum width false | MinWidth<string | number> | Default value |
Prop contentProps# | Description and type Object of props passed to the wrapping the button's content CommonProps & EuiButtonDisplayContentType | Default value |
Prop style# | Description and type Type: CSSProperties | Default value |
Prop type# | Description and type Type: "button" | "reset" | "submit" | Default value |
Prop iconType# | Description and type Any IconType | Default value |
Prop iconSide# | Description and type Can only be one side ButtonContentIconSide | Default value |
Prop textProps# | Description and type Object of props passed to the This span wrapper can be removed by passing false | (HTMLAttributes<HTMLSpanElement> & CommonProps & { ref?: Ref<HTMLSpanElement>; 'data-text'?: string; }) | Default value |
Prop iconSize# | Description and type Type: "s" | "m" | 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 |
EuiFacetGroup
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. 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 layout# | Description and type Vertically in a column, or horizontally in one wrapping line "horizontal" | "vertical" | Default value vertical |
Prop gutterSize# | Description and type Distance between facet buttons. "s" | "m" | "l" | "none" | Default value m |