diff --git a/packages/eui/.vrt/reference/forms-euifilterbutton--full-width-and-grow-desktop.png b/packages/eui/.vrt/reference/forms-euifilterbutton--full-width-and-grow-desktop.png
index 57c90c5a072b..9161705d82ba 100644
Binary files a/packages/eui/.vrt/reference/forms-euifilterbutton--full-width-and-grow-desktop.png and b/packages/eui/.vrt/reference/forms-euifilterbutton--full-width-and-grow-desktop.png differ
diff --git a/packages/eui/.vrt/reference/forms-euifilterbutton--full-width-and-grow-mobile.png b/packages/eui/.vrt/reference/forms-euifilterbutton--full-width-and-grow-mobile.png
index bc95caf42f32..74fc74eeb717 100644
Binary files a/packages/eui/.vrt/reference/forms-euifilterbutton--full-width-and-grow-mobile.png and b/packages/eui/.vrt/reference/forms-euifilterbutton--full-width-and-grow-mobile.png differ
diff --git a/packages/eui/.vrt/reference/forms-euifilterbutton--high-contrast-desktop.png b/packages/eui/.vrt/reference/forms-euifilterbutton--high-contrast-desktop.png
index e7b01a889e00..e93abc28dd62 100644
Binary files a/packages/eui/.vrt/reference/forms-euifilterbutton--high-contrast-desktop.png and b/packages/eui/.vrt/reference/forms-euifilterbutton--high-contrast-desktop.png differ
diff --git a/packages/eui/.vrt/reference/forms-euifilterbutton--high-contrast-mobile.png b/packages/eui/.vrt/reference/forms-euifilterbutton--high-contrast-mobile.png
index 3cf215d69242..9ca334b1f482 100644
Binary files a/packages/eui/.vrt/reference/forms-euifilterbutton--high-contrast-mobile.png and b/packages/eui/.vrt/reference/forms-euifilterbutton--high-contrast-mobile.png differ
diff --git a/packages/eui/.vrt/reference/forms-euifilterbutton--mixed-buttons-desktop.png b/packages/eui/.vrt/reference/forms-euifilterbutton--mixed-buttons-desktop.png
new file mode 100644
index 000000000000..5e38d65868a4
Binary files /dev/null and b/packages/eui/.vrt/reference/forms-euifilterbutton--mixed-buttons-desktop.png differ
diff --git a/packages/eui/.vrt/reference/forms-euifilterbutton--mixed-buttons-mobile.png b/packages/eui/.vrt/reference/forms-euifilterbutton--mixed-buttons-mobile.png
new file mode 100644
index 000000000000..a2c8f051c7c6
Binary files /dev/null and b/packages/eui/.vrt/reference/forms-euifilterbutton--mixed-buttons-mobile.png differ
diff --git a/packages/eui/.vrt/reference/forms-euifilterbutton--multiple-buttons-desktop.png b/packages/eui/.vrt/reference/forms-euifilterbutton--multiple-buttons-desktop.png
index 1e246a08417f..8c65439b87d0 100644
Binary files a/packages/eui/.vrt/reference/forms-euifilterbutton--multiple-buttons-desktop.png and b/packages/eui/.vrt/reference/forms-euifilterbutton--multiple-buttons-desktop.png differ
diff --git a/packages/eui/.vrt/reference/forms-euifilterbutton--multiple-buttons-mobile.png b/packages/eui/.vrt/reference/forms-euifilterbutton--multiple-buttons-mobile.png
index c135dadf78d0..7354a545f17d 100644
Binary files a/packages/eui/.vrt/reference/forms-euifilterbutton--multiple-buttons-mobile.png and b/packages/eui/.vrt/reference/forms-euifilterbutton--multiple-buttons-mobile.png differ
diff --git a/packages/eui/.vrt/reference/forms-euifilterbutton--playground-desktop.png b/packages/eui/.vrt/reference/forms-euifilterbutton--playground-desktop.png
index 7193af284c53..fca538e9f9ec 100644
Binary files a/packages/eui/.vrt/reference/forms-euifilterbutton--playground-desktop.png and b/packages/eui/.vrt/reference/forms-euifilterbutton--playground-desktop.png differ
diff --git a/packages/eui/.vrt/reference/forms-euifilterbutton--playground-mobile.png b/packages/eui/.vrt/reference/forms-euifilterbutton--playground-mobile.png
index bcb70c927948..3ff482aa2e66 100644
Binary files a/packages/eui/.vrt/reference/forms-euifilterbutton--playground-mobile.png and b/packages/eui/.vrt/reference/forms-euifilterbutton--playground-mobile.png differ
diff --git a/packages/eui/.vrt/reference/forms-euifiltergroup--multiple-popovers-desktop.png b/packages/eui/.vrt/reference/forms-euifiltergroup--multiple-popovers-desktop.png
index 86c986000c57..54822b03047a 100644
Binary files a/packages/eui/.vrt/reference/forms-euifiltergroup--multiple-popovers-desktop.png and b/packages/eui/.vrt/reference/forms-euifiltergroup--multiple-popovers-desktop.png differ
diff --git a/packages/eui/.vrt/reference/forms-euifiltergroup--multiple-popovers-mobile.png b/packages/eui/.vrt/reference/forms-euifiltergroup--multiple-popovers-mobile.png
index 26d8800c2511..d973db74bbc4 100644
Binary files a/packages/eui/.vrt/reference/forms-euifiltergroup--multiple-popovers-mobile.png and b/packages/eui/.vrt/reference/forms-euifiltergroup--multiple-popovers-mobile.png differ
diff --git a/packages/eui/.vrt/reference/forms-euifiltergroup--playground-desktop.png b/packages/eui/.vrt/reference/forms-euifiltergroup--playground-desktop.png
index b4a58936dfa3..135c1ec8db5e 100644
Binary files a/packages/eui/.vrt/reference/forms-euifiltergroup--playground-desktop.png and b/packages/eui/.vrt/reference/forms-euifiltergroup--playground-desktop.png differ
diff --git a/packages/eui/.vrt/reference/forms-euifiltergroup--playground-mobile.png b/packages/eui/.vrt/reference/forms-euifiltergroup--playground-mobile.png
index 0618899efc5b..05b9a5f36996 100644
Binary files a/packages/eui/.vrt/reference/forms-euifiltergroup--playground-mobile.png and b/packages/eui/.vrt/reference/forms-euifiltergroup--playground-mobile.png differ
diff --git a/packages/eui/.vrt/reference/forms-euifiltergroup--with-popover-desktop.png b/packages/eui/.vrt/reference/forms-euifiltergroup--with-popover-desktop.png
index 21611c7f5263..a1818368bac6 100644
Binary files a/packages/eui/.vrt/reference/forms-euifiltergroup--with-popover-desktop.png and b/packages/eui/.vrt/reference/forms-euifiltergroup--with-popover-desktop.png differ
diff --git a/packages/eui/.vrt/reference/forms-euifiltergroup--with-popover-mobile.png b/packages/eui/.vrt/reference/forms-euifiltergroup--with-popover-mobile.png
index fa3d33d94f67..9fbafb5a60ed 100644
Binary files a/packages/eui/.vrt/reference/forms-euifiltergroup--with-popover-mobile.png and b/packages/eui/.vrt/reference/forms-euifiltergroup--with-popover-mobile.png differ
diff --git a/packages/eui/.vrt/reference/forms-euisearchbar-euisearchbar--playground-desktop.png b/packages/eui/.vrt/reference/forms-euisearchbar-euisearchbar--playground-desktop.png
index bf9c325b3716..4398e4f3fb01 100644
Binary files a/packages/eui/.vrt/reference/forms-euisearchbar-euisearchbar--playground-desktop.png and b/packages/eui/.vrt/reference/forms-euisearchbar-euisearchbar--playground-desktop.png differ
diff --git a/packages/eui/.vrt/reference/forms-euisearchbar-euisearchbar--playground-mobile.png b/packages/eui/.vrt/reference/forms-euisearchbar-euisearchbar--playground-mobile.png
index b2b67a69ac81..90b2fde93402 100644
Binary files a/packages/eui/.vrt/reference/forms-euisearchbar-euisearchbar--playground-mobile.png and b/packages/eui/.vrt/reference/forms-euisearchbar-euisearchbar--playground-mobile.png differ
diff --git a/packages/eui/.vrt/reference/forms-euisearchbar-euisearchbarfilters--playground-desktop.png b/packages/eui/.vrt/reference/forms-euisearchbar-euisearchbarfilters--playground-desktop.png
index fe99a2a0c15b..fff779e6845b 100644
Binary files a/packages/eui/.vrt/reference/forms-euisearchbar-euisearchbarfilters--playground-desktop.png and b/packages/eui/.vrt/reference/forms-euisearchbar-euisearchbarfilters--playground-desktop.png differ
diff --git a/packages/eui/.vrt/reference/forms-euisearchbar-euisearchbarfilters--playground-mobile.png b/packages/eui/.vrt/reference/forms-euisearchbar-euisearchbarfilters--playground-mobile.png
index 6b4eb9f415b4..a372a540c1f4 100644
Binary files a/packages/eui/.vrt/reference/forms-euisearchbar-euisearchbarfilters--playground-mobile.png and b/packages/eui/.vrt/reference/forms-euisearchbar-euisearchbarfilters--playground-mobile.png differ
diff --git a/packages/eui/.vrt/reference/tabular-content-euiinmemorytable--kitchen-sink-desktop.png b/packages/eui/.vrt/reference/tabular-content-euiinmemorytable--kitchen-sink-desktop.png
index 490c81f200cb..45fe60fefc9c 100644
Binary files a/packages/eui/.vrt/reference/tabular-content-euiinmemorytable--kitchen-sink-desktop.png and b/packages/eui/.vrt/reference/tabular-content-euiinmemorytable--kitchen-sink-desktop.png differ
diff --git a/packages/eui/.vrt/reference/tabular-content-euiinmemorytable--kitchen-sink-mobile.png b/packages/eui/.vrt/reference/tabular-content-euiinmemorytable--kitchen-sink-mobile.png
index cce65f7d8790..4f690640fc56 100644
Binary files a/packages/eui/.vrt/reference/tabular-content-euiinmemorytable--kitchen-sink-mobile.png and b/packages/eui/.vrt/reference/tabular-content-euiinmemorytable--kitchen-sink-mobile.png differ
diff --git a/packages/eui/changelogs/upcoming/9953.md b/packages/eui/changelogs/upcoming/9953.md
index 0451b89e5556..d1ccffe00f46 100644
--- a/packages/eui/changelogs/upcoming/9953.md
+++ b/packages/eui/changelogs/upcoming/9953.md
@@ -1,5 +1,4 @@
 - Updated styles on `EuiButtonGroup` with legacy Options API
-- Updated styles of `EuiFilterGroup` and `EuiFilterButton` to align with `EuiButtonGroup`
 - Updated usages of `EuiButtonGroup` in `EuiDataGrid`'s display selector and column sorting to use the Children API
 - Updated `EuiSuperDatePicker`'s time window buttons to use `EuiButtonGroup` with Children API
 
diff --git a/packages/eui/changelogs/upcoming/9961.md b/packages/eui/changelogs/upcoming/9961.md
new file mode 100644
index 000000000000..53719bc8b5e6
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/9961.md
@@ -0,0 +1,5 @@
+- Updated styles of `EuiFilterButton`
+- Updated `EuiFilterGroup`
+    - Updated styles
+    - Added `display` prop (values: `'regular' | 'highlighted'`) to render different visual toggle variants
+    - Added `showDividers` prop to optionally render dividers between group children
\ No newline at end of file
diff --git a/packages/eui/src/components/button/button_context.tsx b/packages/eui/src/components/button/button_context.tsx
index 57ae990c48c8..9b2a0677896f 100644
--- a/packages/eui/src/components/button/button_context.tsx
+++ b/packages/eui/src/components/button/button_context.tsx
@@ -31,7 +31,10 @@ export const EuiButtonContext = createContext<{
    * Set by `EuiButtonGroup` with `variant="selection"` to resolve per-button
    * selected state and its derived display props.
    */
-  getSelectionProps?: (id: string) => {
+  getSelectionProps?: (
+    id: string,
+    isDisabled?: boolean
+  ) => {
     isSelected: boolean;
     fill: boolean;
     display?: 'fill' | 'base';
diff --git a/packages/eui/src/components/button/button_group/button_group.styles.ts b/packages/eui/src/components/button/button_group/button_group.styles.ts
index c5a2ce0e6a7d..ccf5d9339f20 100644
--- a/packages/eui/src/components/button/button_group/button_group.styles.ts
+++ b/packages/eui/src/components/button/button_group/button_group.styles.ts
@@ -263,8 +263,10 @@ export const euiButtonGroupButtonsStyles = (euiThemeContext: UseEuiTheme) => {
 
         ${segmentedChildrenStyles}
 
-        *:where(.euiButton, .euiButtonIcon):is(${euiDisabledSelector}) {
-          background-color: transparent;
+        *:where(.euiButton, .euiButtonIcon) {
+          &:where(:is(${euiDisabledSelector}):not([aria-pressed='true'])) {
+            background-color: transparent;
+          }
         }
 
         &:where([data-dividers='true'] &) {
@@ -316,20 +318,22 @@ export const euiButtonGroupButtonsStyles = (euiThemeContext: UseEuiTheme) => {
 
       &:where([data-variant='selection'][data-display='regular'] &) {
         *:where(.euiButton, .euiButtonIcon):is([aria-pressed='true']) {
-          background-color: ${euiTheme.colors.backgroundLightText};
+          &:not(:is(${euiDisabledSelector})) {
+            background-color: ${euiTheme.colors.backgroundLightText};
 
-          ${highContrastModeStyles(euiThemeContext, {
-            none: `
-              background-color: ${euiTheme.colors.backgroundLightText};
-            `,
-            preferred: `
-              border: ${euiTheme.border.thin};
-            `,
-            forced: `
-              background-color: ${euiTheme.colors.fullShade};
-              border: none;
-            `,
-          })}
+            ${highContrastModeStyles(euiThemeContext, {
+              none: `
+                background-color: ${euiTheme.colors.backgroundLightText};
+              `,
+              preferred: `
+                border: ${euiTheme.border.thin};
+              `,
+              forced: `
+                background-color: ${euiTheme.colors.fullShade};
+                border: none;
+              `,
+            })}
+          }
         }
       }
 
@@ -343,6 +347,10 @@ export const euiButtonGroupButtonsStyles = (euiThemeContext: UseEuiTheme) => {
             `,
           })}
         }
+
+        *:where(.euiButton, .euiButtonIcon):is(${euiDisabledSelector}) {
+          background-color: transparent;
+        }
       }
     `,
     noWrap: css`
@@ -454,7 +462,7 @@ const _highContrastStyles = (euiThemeContext: UseEuiTheme) => {
         color: ${euiTheme.colors.emptyShade};
         background-color: ${euiTheme.colors.fullShade};
 
-        &:is(:hover, :focus):not(${euiDisabledSelector}) {
+        &:is(:hover, :focus):not(:is(${euiDisabledSelector})) {
           &::before {
             border-color: ${euiTheme.colors.textInverse};
           }
diff --git a/packages/eui/src/components/button/button_group/button_group.tsx b/packages/eui/src/components/button/button_group/button_group.tsx
index 58dd541a96c9..71de709e7609 100644
--- a/packages/eui/src/components/button/button_group/button_group.tsx
+++ b/packages/eui/src/components/button/button_group/button_group.tsx
@@ -468,10 +468,12 @@ export const EuiButtonGroupChildren: FunctionComponent<ChildrenModeProps> = ({
         fill: false,
       }),
       ...(isSelection && {
-        getSelectionProps: (id: string) => {
+        getSelectionProps: (id: string, _isDisabled?: boolean) => {
           const selected = isSelected(id);
           const isInverse = display === 'inverse';
-          const hasFill = selected && display === 'highlighted';
+          const hasFill =
+            (selected && display === 'highlighted') ||
+            !!(selected && _isDisabled);
 
           return {
             isSelected: selected,
diff --git a/packages/eui/src/components/button/use_button_common_props.ts b/packages/eui/src/components/button/use_button_common_props.ts
index 160237f65d4c..5a593cbb4125 100644
--- a/packages/eui/src/components/button/use_button_common_props.ts
+++ b/packages/eui/src/components/button/use_button_common_props.ts
@@ -89,7 +89,7 @@ export function useEuiButtonCommonProps<
   });
 
   const selectionProps =
-    id != null ? groupContext.getSelectionProps?.(id) : undefined;
+    id != null ? groupContext.getSelectionProps?.(id, isDisabled) : undefined;
 
   const onClick = selectionProps
     ? (event: React.MouseEvent<HTMLElement>) => {
diff --git a/packages/eui/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap b/packages/eui/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap
index e31877c2643f..d58dc5921b47 100644
--- a/packages/eui/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap
+++ b/packages/eui/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap
@@ -2,77 +2,62 @@
 
 exports[`EuiFilterButton does not render a badge or count if numFilters is not passed 1`] = `
 <div
-  class="euiFilterButton__wrapper css-xcxo9u-wrapper"
+  class="euiFilterButton__wrapper css-1bvxi87-wrapper-isIconOnly"
 >
   <button
     aria-label="aria-label"
-    class="euiButtonEmpty euiFilterButton testClass1 testClass2 emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-default-euiTestCss"
+    class="euiButtonEmpty euiFilterButton euiFilterButton-isIconOnly testClass1 testClass2 emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-isIconOnly-euiTestCss"
     data-test-subj="test subject string"
     type="button"
   >
     <span
       class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
-    >
-      <span
-        class="euiFilterButton__text emotion-euiFilterButton__text"
-      />
-    </span>
+    />
   </button>
 </div>
 `;
 
 exports[`EuiFilterButton props badgeColor renders 1`] = `
 <div
-  class="euiFilterButton__wrapper css-xcxo9u-wrapper"
+  class="euiFilterButton__wrapper css-1bvxi87-wrapper-isIconOnly"
 >
   <button
-    class="euiButtonEmpty euiFilterButton emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-default"
+    class="euiButtonEmpty euiFilterButton euiFilterButton-isIconOnly emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-isIconOnly"
     type="button"
   >
     <span
       class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
-    >
-      <span
-        class="euiFilterButton__text emotion-euiFilterButton__text"
-      />
-    </span>
+    />
   </button>
 </div>
 `;
 
 exports[`EuiFilterButton props grow can be turned off 1`] = `
 <div
-  class="euiFilterButton__wrapper css-1j0znlt-wrapper-noGrow"
+  class="euiFilterButton__wrapper css-1nag8c-wrapper-isIconOnly-noGrow"
 >
   <button
-    class="euiButtonEmpty euiFilterButton emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-default"
+    class="euiButtonEmpty euiFilterButton euiFilterButton-isIconOnly emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-isIconOnly"
     type="button"
   >
     <span
       class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
-    >
-      <span
-        class="euiFilterButton__text emotion-euiFilterButton__text"
-      />
-    </span>
+    />
   </button>
 </div>
 `;
 
 exports[`EuiFilterButton props iconType and iconSide renders 1`] = `
 <div
-  class="euiFilterButton__wrapper css-xcxo9u-wrapper"
+  class="euiFilterButton__wrapper css-1bvxi87-wrapper-isIconOnly"
 >
   <button
-    class="euiButtonEmpty euiFilterButton emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-default"
+    class="euiButtonEmpty euiFilterButton euiFilterButton-isIconOnly emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-isIconOnly"
     type="button"
   >
     <span
       class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content-hasIcon"
     >
-      <span
-        class="euiFilterButton__text emotion-euiFilterButton__text"
-      />
       <span
         color="inherit"
         data-euiicon-type="user"
@@ -84,58 +69,47 @@ exports[`EuiFilterButton props iconType and iconSide renders 1`] = `
 
 exports[`EuiFilterButton props isDisabled renders 1`] = `
 <div
-  class="euiFilterButton__wrapper css-xcxo9u-wrapper"
+  class="euiFilterButton__wrapper css-1bvxi87-wrapper-isIconOnly"
 >
   <button
-    class="euiButtonEmpty euiFilterButton emotion-euiButtonDisplay-euiButtonEmpty-m-empty-disabled-isDisabled-euiFilterButton-default"
+    class="euiButtonEmpty euiFilterButton euiFilterButton-isIconOnly emotion-euiButtonDisplay-euiButtonEmpty-m-empty-disabled-isDisabled-euiFilterButton-isIconOnly"
     data-test-subj="button"
     disabled=""
     type="button"
   >
     <span
       class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
-    >
-      <span
-        class="euiFilterButton__text emotion-euiFilterButton__text"
-      />
-    </span>
+    />
   </button>
 </div>
 `;
 
 exports[`EuiFilterButton props isSelected renders 1`] = `
 <div
-  class="euiFilterButton__wrapper css-xcxo9u-wrapper"
+  class="euiFilterButton__wrapper css-1bvxi87-wrapper-isIconOnly"
 >
   <button
-    class="euiButtonEmpty euiFilterButton euiFilterButton-isSelected emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-default"
+    class="euiButtonEmpty euiFilterButton euiFilterButton-isSelected euiFilterButton-isIconOnly emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-isIconOnly"
     type="button"
   >
     <span
       class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
-    >
-      <span
-        class="euiFilterButton__text emotion-euiFilterButton__text"
-      />
-    </span>
+    />
   </button>
 </div>
 `;
 
 exports[`EuiFilterButton props numActiveFilters and hasActiveFilters renders 1`] = `
 <div
-  class="euiFilterButton__wrapper css-xcxo9u-wrapper"
+  class="euiFilterButton__wrapper css-1bvxi87-wrapper-isIconOnly"
 >
   <button
-    class="euiButtonEmpty euiFilterButton euiFilterButton-hasActiveFilters emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-hasActiveFilters-default"
+    class="euiButtonEmpty euiFilterButton euiFilterButton-hasActiveFilters euiFilterButton-isIconOnly emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-hasActiveFilters-isIconOnly"
     type="button"
   >
     <span
       class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
     >
-      <span
-        class="euiFilterButton__text euiFilterButton__text-hasNotification emotion-euiFilterButton__text-hasNotification"
-      />
       <span
         class="euiThemeProvider emotion-euiColorMode-LIGHT"
       >
@@ -154,18 +128,15 @@ exports[`EuiFilterButton props numActiveFilters and hasActiveFilters renders 1`]
 
 exports[`EuiFilterButton props numFilters renders 1`] = `
 <div
-  class="euiFilterButton__wrapper css-w61jgg-wrapper-hasNotification"
+  class="euiFilterButton__wrapper css-1r66fqw-wrapper-hasNotification-isIconOnly"
 >
   <button
-    class="euiButtonEmpty euiFilterButton euiFilterButton-hasNotification emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-default"
+    class="euiButtonEmpty euiFilterButton euiFilterButton-hasNotification euiFilterButton-isIconOnly emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-isIconOnly"
     type="button"
   >
     <span
       class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
     >
-      <span
-        class="euiFilterButton__text euiFilterButton__text-hasNotification emotion-euiFilterButton__text-hasNotification"
-      />
       <span
         class="euiThemeProvider emotion-euiColorMode-LIGHT"
       >
@@ -184,79 +155,64 @@ exports[`EuiFilterButton props numFilters renders 1`] = `
 
 exports[`EuiFilterButton props type renders 1`] = `
 <div
-  class="euiFilterButton__wrapper css-xcxo9u-wrapper"
+  class="euiFilterButton__wrapper css-1bvxi87-wrapper-isIconOnly"
 >
   <button
-    class="euiButtonEmpty euiFilterButton emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-default"
+    class="euiButtonEmpty euiFilterButton euiFilterButton-isIconOnly emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-isIconOnly"
     type="button"
   >
     <span
       class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
-    >
-      <span
-        class="euiFilterButton__text emotion-euiFilterButton__text"
-      />
-    </span>
+    />
   </button>
 </div>
 `;
 
 exports[`EuiFilterButton props withNext renders 1`] = `
 <div
-  class="euiFilterButton__wrapper css-2spkli-wrapper-withNext"
+  class="euiFilterButton__wrapper css-152vodj-wrapper-withNext-isIconOnly"
 >
   <button
-    class="euiButtonEmpty euiFilterButton emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-default"
+    class="euiButtonEmpty euiFilterButton euiFilterButton-isIconOnly emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-isIconOnly"
     type="button"
   >
     <span
       class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
-    >
-      <span
-        class="euiFilterButton__text emotion-euiFilterButton__text"
-      />
-    </span>
+    />
   </button>
 </div>
 `;
 
 exports[`EuiFilterButton renders 1`] = `
 <div
-  class="euiFilterButton__wrapper css-xcxo9u-wrapper"
+  class="euiFilterButton__wrapper css-1bvxi87-wrapper-isIconOnly"
 >
   <button
     aria-label="aria-label"
-    class="euiButtonEmpty euiFilterButton testClass1 testClass2 emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-default-euiTestCss"
+    class="euiButtonEmpty euiFilterButton euiFilterButton-isIconOnly testClass1 testClass2 emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-isIconOnly-euiTestCss"
     data-test-subj="test subject string"
     type="button"
   >
     <span
       class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
-    >
-      <span
-        class="euiFilterButton__text emotion-euiFilterButton__text"
-      />
-    </span>
+    />
   </button>
 </div>
 `;
 
 exports[`EuiFilterButton renders zero properly 1`] = `
 <div
-  class="euiFilterButton__wrapper css-w61jgg-wrapper-hasNotification"
+  class="euiFilterButton__wrapper css-1r66fqw-wrapper-hasNotification-isIconOnly"
 >
   <button
     aria-label="aria-label"
-    class="euiButtonEmpty euiFilterButton euiFilterButton-hasNotification testClass1 testClass2 emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-default-euiTestCss"
+    class="euiButtonEmpty euiFilterButton euiFilterButton-hasNotification euiFilterButton-isIconOnly testClass1 testClass2 emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-isIconOnly-euiTestCss"
     data-test-subj="test subject string"
     type="button"
   >
     <span
       class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
     >
-      <span
-        class="euiFilterButton__text euiFilterButton__text-hasNotification emotion-euiFilterButton__text-hasNotification"
-      />
       <span
         class="euiThemeProvider emotion-euiColorMode-LIGHT"
       >
diff --git a/packages/eui/src/components/filter_group/__snapshots__/filter_group.test.tsx.snap b/packages/eui/src/components/filter_group/__snapshots__/filter_group.test.tsx.snap
index eb05b9d1d9f3..370d5d6b964d 100644
--- a/packages/eui/src/components/filter_group/__snapshots__/filter_group.test.tsx.snap
+++ b/packages/eui/src/components/filter_group/__snapshots__/filter_group.test.tsx.snap
@@ -1,21 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiFilterGroup renders 1`] = `
-<div
-  aria-label="aria-label"
-  class="euiFilterGroup testClass1 testClass2 emotion-euiFilterGroup-uncompressed-euiTestCss"
-  data-test-subj="test subject string"
-/>
-`;
-
 exports[`EuiFilterGroup props compressed 1`] = `
 <div
   class="euiFilterGroup emotion-euiFilterGroup-compressed"
+  data-display="regular"
+  data-dividers="true"
 />
 `;
 
 exports[`EuiFilterGroup props fullWidth 1`] = `
 <div
   class="euiFilterGroup emotion-euiFilterGroup-fullWidth-uncompressed"
+  data-display="regular"
+  data-dividers="true"
+/>
+`;
+
+exports[`EuiFilterGroup renders 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiFilterGroup testClass1 testClass2 emotion-euiFilterGroup-uncompressed-euiTestCss"
+  data-display="regular"
+  data-dividers="true"
+  data-test-subj="test subject string"
 />
 `;
diff --git a/packages/eui/src/components/filter_group/filter_button.stories.tsx b/packages/eui/src/components/filter_group/filter_button.stories.tsx
index 09abf1da45d9..a27b44aa0bbb 100644
--- a/packages/eui/src/components/filter_group/filter_button.stories.tsx
+++ b/packages/eui/src/components/filter_group/filter_button.stories.tsx
@@ -97,6 +97,22 @@ export const FullWidthAndGrow: Story = {
   ),
 };
 
+export const MixedButtons: Story = {
+  tags: ['vrt-only'],
+  render: ({ ...args }) => (
+    <EuiFilterGroup>
+      <EuiFilterButton {...args}>Filter one</EuiFilterButton>
+      <EuiFilterButton {...args}>Filter two</EuiFilterButton>
+      <EuiFilterButton {...args}>Filter three</EuiFilterButton>
+      <EuiFilterButton iconType="menu" iconSide="right" />
+    </EuiFilterGroup>
+  ),
+  args: {
+    numFilters: 5,
+    iconType: 'chevronSingleDown',
+  },
+};
+
 export const HighContrast: Story = {
   ...FullWidthAndGrow,
   tags: ['vrt-only'],
diff --git a/packages/eui/src/components/filter_group/filter_button.styles.ts b/packages/eui/src/components/filter_group/filter_button.styles.ts
index 9be3d18cdc36..d89c402e1473 100644
--- a/packages/eui/src/components/filter_group/filter_button.styles.ts
+++ b/packages/eui/src/components/filter_group/filter_button.styles.ts
@@ -16,6 +16,8 @@ import {
   euiTextTruncate,
   highContrastModeStyles,
   preventForcedColors,
+  euiButtonSizeMap,
+  euiDisabledSelector,
 } from '../../global_styling';
 import { euiFormVariables } from '../form/form.styles';
 
@@ -31,14 +33,28 @@ export const euiFilterButtonDisplay = (euiThemeContext: UseEuiTheme) => {
 export const euiFilterButtonStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
 
+  const buttonSizeMap = euiButtonSizeMap(euiThemeContext);
   const selectedSelector = '.euiFilterButton-isSelected';
   const withNextSelector = '& + .euiFilterButton__wrapper';
 
+  const containerPadding = euiTheme.size.xs;
+
   return {
     euiFilterButton: css`
-      position: relative;
+      --euiFilterButtonInsetSize: ${buttonSizeMap.m.getInsetHeight(
+        buttonSizeMap.m.height,
+        containerPadding
+      )};
+      --euiFilterButtonRadius: ${buttonSizeMap.m.radiusInset};
 
+      position: relative;
+      block-size: var(--euiFilterButtonInsetSize);
       ${logicalCSS('width', '100%')}
+      border: none;
+      border-radius: var(
+        --euiFilterButtonRadius,
+        ${euiTheme.border.radius.small}
+      );
 
       &:not(${selectedSelector}) {
         &:hover,
@@ -49,23 +65,19 @@ export const euiFilterButtonStyles = (euiThemeContext: UseEuiTheme) => {
           }
         }
       }
+
+      /* use increased specificity over base button */
+      &&:focus-visible {
+        outline-style: auto;
+        outline-offset: 0;
+      }
     `,
     buttonType: {
-      default: css`
-        border-radius: 0;
-
-        &:focus-visible {
-          z-index: 1;
-          outline-offset: -${euiTheme.border.width.thick};
-          border-radius: ${euiTheme.border.radius.small};
-          transition: none;
-        }
-      `,
       toggle: css`
         ${euiFilterButtonDisplay(euiThemeContext)}
 
-        &:focus-visible {
-          outline-offset: ${mathWithUnits(euiTheme.focus.width, (x) => x / 2)};
+        &:where(:is(${euiDisabledSelector}):not([aria-pressed="true"])) {
+          background-color: transparent;
         }
 
         ${highContrastModeStyles(euiThemeContext, {
@@ -79,9 +91,21 @@ export const euiFilterButtonStyles = (euiThemeContext: UseEuiTheme) => {
         })}
       `,
     },
+    compressed: css`
+      --euiFilterButtonInsetSize: ${buttonSizeMap.s.getInsetHeight(
+        buttonSizeMap.s.height,
+        containerPadding
+      )};
+      --euiFilterButtonRadius: ${buttonSizeMap.s.radiusInset};
+    `,
     withNext: css`
       ${withNextSelector} {
-        ${logicalCSS('margin-left', `-${euiTheme.size.xs}`)}
+        margin-inline-start: -${containerPadding};
+
+        /* account for group faux border spacing */
+        &:where(.euiFilterGroup[data-dividers='true'] &) {
+          margin-inline-start: -${mathWithUnits([containerPadding, euiTheme.border.width.thin], (x, y) => x + y)};
+        }
 
         /* Remove just the left faux border */
         &::before {
@@ -101,14 +125,31 @@ export const euiFilterButtonStyles = (euiThemeContext: UseEuiTheme) => {
     hasActiveFilters: css`
       font-weight: ${euiTheme.font.weight.medium};
     `,
+    isSelected: css`
+      &${selectedSelector} {
+        background-color: ${euiTheme.colors.backgroundLightText};
+
+        ${highContrastModeStyles(euiThemeContext, {
+          preferred: `
+            border: ${euiTheme.border.thin};
+          `,
+        })}
+      }
+    `,
+    isIconOnly: css`
+      inline-size: var(--euiFilterButtonInsetSize);
+      min-inline-size: var(--euiFilterButtonInsetSize);
+    `,
   };
 };
 
 export const euiFilterButtonWrapperStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
 
+  const buttonSizeMap = euiButtonSizeMap(euiThemeContext);
   const { borderColor } = euiFormVariables(euiThemeContext);
   const border = `${euiTheme.border.width.thin} solid ${borderColor}`;
+  const containerPadding = euiTheme.size.xs;
 
   // Pseudo elements create borders without affecting width. We also prefer them
   // over box-shadow for Windows high contrast theme compatibility
@@ -116,9 +157,12 @@ export const euiFilterButtonWrapperStyles = (euiThemeContext: UseEuiTheme) => {
     &::before {
       content: '';
       position: absolute;
-      inset: 0;
-      ${logicalCSS('border-left', border)}
-
+      inset-inline-start: -${euiTheme.border.width.thin};
+      block-size: calc(
+        var(--euiFilterButtonSize, ${euiTheme.size.xl}) - ${euiTheme.size.base}
+      );
+      inline-size: ${euiTheme.border.width.thin};
+      border-inline-start: ${border};
       pointer-events: none;
     }
   `;
@@ -127,7 +171,9 @@ export const euiFilterButtonWrapperStyles = (euiThemeContext: UseEuiTheme) => {
     &::after {
       content: '';
       position: absolute;
-      inset: 0;
+      inset-block-start: -${euiTheme.border.width.thin};
+      inset-inline-start: 0;
+      inline-size: calc(100% + ${euiTheme.border.width.thin});
       ${logicalCSS('border-bottom', border)}
       pointer-events: none;
     }
@@ -135,18 +181,33 @@ export const euiFilterButtonWrapperStyles = (euiThemeContext: UseEuiTheme) => {
 
   return {
     wrapper: css`
+      --euiFilterButtonSize: ${buttonSizeMap.m.height};
+
       ${euiFilterButtonDisplay(euiThemeContext)}
       position: relative;
       display: flex;
       align-items: center;
+      block-size: var(--euiFilterButtonSize, ${euiTheme.size.xl});
+
+      padding: ${containerPadding};
 
+      & + :where(:has(.euiFilterButton)) {
+        margin-inline-start: -${containerPadding};
+      }
+    `,
+    compressed: css`
+      --euiFilterButtonSize: ${buttonSizeMap.s.height};
+    `,
+    hasDividers: css`
       ${leftBorder}
       ${bottomBorder}
 
-      ${logicalCSS('padding-vertical', euiTheme.size.xs)}
+      & + :where(:has(.euiFilterButton)) {
+        margin-inline-start: 0;
+      }
     `,
-    hasToggle: css`
-      ${logicalCSS('padding-horizontal', euiTheme.size.xs)}
+    isIconOnly: css`
+      min-inline-size: auto;
     `,
   };
 };
diff --git a/packages/eui/src/components/filter_group/filter_button.test.tsx b/packages/eui/src/components/filter_group/filter_button.test.tsx
index bc69fb8917e9..cb7c999d54fd 100644
--- a/packages/eui/src/components/filter_group/filter_button.test.tsx
+++ b/packages/eui/src/components/filter_group/filter_button.test.tsx
@@ -14,7 +14,7 @@ import { shouldRenderCustomStyles } from '../..//test/internal';
 import { EuiFilterButton } from './filter_button';
 
 describe('EuiFilterButton', () => {
-  shouldRenderCustomStyles(<EuiFilterButton />, {
+  shouldRenderCustomStyles(<EuiFilterButton>Filter</EuiFilterButton>, {
     childProps: ['textProps', 'contentProps'],
   });
 
@@ -140,7 +140,9 @@ describe('EuiFilterButton', () => {
 
     it('allows customizing the inner filter button text via textProps', () => {
       const { getByTestSubject } = render(
-        <EuiFilterButton textProps={{ 'data-test-subj': 'test' }} />
+        <EuiFilterButton textProps={{ 'data-test-subj': 'test' }}>
+          Filter
+        </EuiFilterButton>
       );
 
       expect(getByTestSubject('test')).toBeInTheDocument();
diff --git a/packages/eui/src/components/filter_group/filter_button.tsx b/packages/eui/src/components/filter_group/filter_button.tsx
index 54f0351c4b0d..4ee26fff2a6c 100644
--- a/packages/eui/src/components/filter_group/filter_button.tsx
+++ b/packages/eui/src/components/filter_group/filter_button.tsx
@@ -23,14 +23,15 @@ import { DistributiveOmit } from '../common';
 import { EuiNotificationBadge } from '../badge';
 import { BadgeNotificationColor } from '../badge/notification_badge/badge_notification';
 import { EuiButtonEmpty, EuiButtonEmptyProps } from '../button/button_empty';
+import { type Props as EuiButtonProps, EuiButton } from '../button/button';
+import { _compressedButtonFocusColors } from '../button/button_group/button_group_button.styles';
 
 import {
   euiFilterButtonStyles,
   euiFilterButtonWrapperStyles,
   euiFilterButtonChildStyles,
 } from './filter_button.styles';
-import { EuiButtonGroupButton } from '../button/button_group/button_group_button';
-import { _compressedButtonFocusColors } from '../button/button_group/button_group_button.styles';
+import { useEuiFilterGroupContext } from './filter_group_context';
 
 export type EuiFilterButtonProps = {
   /**
@@ -78,6 +79,7 @@ export type EuiFilterButtonProps = {
    */
   badgeColor?: BadgeNotificationColor;
   /**
+   * @deprecated - Will be fixed to 'text' in the future.
    * Any of the named color palette options.
    *
    * Do not use the following colors for standalone buttons directly,
@@ -103,7 +105,8 @@ export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps> = ({
   numFilters,
   numActiveFilters,
   isToggle,
-  isDisabled,
+  isDisabled: _isDisabled,
+  disabled,
   isSelected,
   type = 'button',
   grow = true,
@@ -112,13 +115,17 @@ export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps> = ({
   contentProps,
   ...rest
 }) => {
+  const { colorMode } = useEuiTheme();
+
+  const { compressed, display, showDividers } = useEuiFilterGroupContext();
+  const isDisabled = _isDisabled || disabled;
+  const fill =
+    isToggle && isSelected && (display === 'highlighted' || color !== 'text');
+
   const id = useGeneratedHtmlId({ prefix: 'filter-button' });
   const numFiltersDefined = numFilters != null; // != instead of !== to allow for null and undefined
   const numActiveFiltersDefined = !!numActiveFilters;
 
-  const euiThemeContext = useEuiTheme();
-  const { colorMode } = euiThemeContext;
-
   // assumption about type of usage based on icon usage
   // requires manual override to apply correct aria attributes for more custom usages
   const isCollapsible = !isToggle && iconType === 'chevronSingleDown';
@@ -129,13 +136,19 @@ export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps> = ({
 
   const toggleVariantStyles = [
     isToggle && styles.buttonType.toggle,
+    isToggle &&
+      isSelected &&
+      display !== 'highlighted' &&
+      color === 'text' &&
+      styles.isSelected,
     !isToggle && !isDisabled && focusColorStyles[color],
-    !isToggle && styles.buttonType.default,
   ];
 
   const cssStyles = [
     styles.euiFilterButton,
     hasActiveFilters && styles.hasActiveFilters,
+    compressed && styles.compressed,
+    !children && styles.isIconOnly,
     ...toggleVariantStyles,
   ];
 
@@ -145,7 +158,9 @@ export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps> = ({
     wrapperStyles.wrapper,
     withNext && styles.withNext,
     numFiltersDefined && styles.hasNotification,
-    isToggle && wrapperStyles.hasToggle,
+    compressed && wrapperStyles.compressed,
+    showDividers && wrapperStyles.hasDividers,
+    !children && wrapperStyles.isIconOnly,
     !grow && styles.noGrow,
   ];
 
@@ -162,6 +177,7 @@ export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps> = ({
       'euiFilterButton-isSelected': isSelected,
       'euiFilterButton-hasActiveFilters': hasActiveFilters,
       'euiFilterButton-hasNotification': numFiltersDefined,
+      'euiFilterButton-isIconOnly': !children,
       'euiFilterButton-isToggle': isToggle,
     },
     className
@@ -225,7 +241,7 @@ export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps> = ({
   const dataText =
     children && typeof children === 'string' ? children : innerText;
 
-  const textContent = (
+  const textContent = children && (
     <span
       ref={ref}
       data-text={dataText}
@@ -274,23 +290,17 @@ export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps> = ({
   return (
     <div className={wrapperClasses} css={wrapperCssStyles}>
       {isToggle && !isCollapsible ? (
-        <EuiButtonGroupButton
+        <EuiButton
           id={id}
-          label={
-            <>
-              {textContent}
-              {badgeElement}
-            </>
-          }
           className={classes}
           css={cssStyles}
           color={color}
           isSelected={isSelected}
-          size="compressed"
+          fill={fill}
+          size="s"
           isDisabled={isDisabled}
           iconSide={iconSide}
           iconType={iconType}
-          isIconOnly={false}
           type={type}
           textProps={false}
           contentProps={{
@@ -301,9 +311,12 @@ export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps> = ({
               contentProps?.css,
             ],
           }}
-          {...rest}
+          {...(rest as EuiButtonProps)}
           onClick={onToggleClick}
-        />
+        >
+          {textContent}
+          {badgeElement}
+        </EuiButton>
       ) : (
         button
       )}
diff --git a/packages/eui/src/components/filter_group/filter_group.stories.tsx b/packages/eui/src/components/filter_group/filter_group.stories.tsx
index 4befe10a6e07..b1276a60a835 100644
--- a/packages/eui/src/components/filter_group/filter_group.stories.tsx
+++ b/packages/eui/src/components/filter_group/filter_group.stories.tsx
@@ -20,6 +20,8 @@ const meta: Meta<EuiFilterGroupProps> = {
     // Component defaults
     compressed: false,
     fullWidth: false,
+    display: 'regular',
+    showDividers: true,
   },
 };
 
@@ -27,21 +29,25 @@ export default meta;
 type Story = StoryObj<EuiFilterGroupProps>;
 
 export const Playground: Story = {
-  render: ({ ...args }) => (
-    <EuiFilterGroup {...args}>
-      <EuiFilterButton isToggle>Toggle Filter</EuiFilterButton>
-      <EuiFilterButton
-        numFilters={5}
-        hasActiveFilters
-        iconType="chevronSingleDown"
-      >
-        Selection Filter
-      </EuiFilterButton>
-    </EuiFilterGroup>
-  ),
+  render: function Render({ ...args }) {
+    const [isToggled, setToggled] = useState(false);
+
+    return (
+      <EuiFilterGroup {...args}>
+        <EuiFilterButton
+          isToggle
+          isSelected={isToggled}
+          onClick={() => setToggled((toggled) => !toggled)}
+        >
+          Toggle Filter
+        </EuiFilterButton>
+        <FilterButtonPopover label="Selection Filter" />
+      </EuiFilterGroup>
+    );
+  },
 };
 
-const FilterButtonPopover = () => {
+const FilterButtonPopover = ({ label = 'Composers' }: { label?: string }) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
   return (
@@ -57,7 +63,7 @@ const FilterButtonPopover = () => {
           hasActiveFilters={true}
           numActiveFilters={2}
         >
-          Composers
+          {label}
         </EuiFilterButton>
       }
     >
diff --git a/packages/eui/src/components/filter_group/filter_group.styles.ts b/packages/eui/src/components/filter_group/filter_group.styles.ts
index bcb86f589fa5..49f6a530ac46 100644
--- a/packages/eui/src/components/filter_group/filter_group.styles.ts
+++ b/packages/eui/src/components/filter_group/filter_group.styles.ts
@@ -25,9 +25,6 @@ export const euiFilterGroupStyles = (euiThemeContext: UseEuiTheme) => {
   const { backgroundColor } = euiFormVariables(euiThemeContext);
   const buttonSizeMap = euiButtonSizeMap(euiThemeContext);
 
-  const borderRadius = euiTheme.border.radius.small;
-  const borderRadiusCompressed = euiTheme.border.radius.small;
-
   const containerPadding = euiTheme.size.xs;
 
   return {
@@ -36,7 +33,6 @@ export const euiFilterGroupStyles = (euiThemeContext: UseEuiTheme) => {
       display: inline-flex;
       ${logicalCSS('max-width', '100%')}
       overflow: hidden;
-
       background-color: ${backgroundColor};
 
       /* Adds the border on a pseudo element to prevent height differences between wrapper and buttons.
@@ -51,6 +47,11 @@ export const euiFilterGroupStyles = (euiThemeContext: UseEuiTheme) => {
         pointer-events: none;
       }
 
+      &:where([data-dividers='true']) {
+        /* space for dividers */
+        gap: ${euiTheme.border.width.thin};
+      }
+
       .euiFilterButton-isToggle {
         /* reduced padding to account for outer container padding */
         padding-inline: ${mathWithUnits(
@@ -62,9 +63,15 @@ export const euiFilterGroupStyles = (euiThemeContext: UseEuiTheme) => {
       /* Account for popover or tooltip wrappers around EuiFilterButtons */
       > *:not(.euiFilterButton__wrapper, .euiFilterButton) {
         ${euiFilterButtonDisplay(euiThemeContext)}
+
+        &:has(.euiFilterButton-isIconOnly) {
+          min-inline-size: auto;
+        }
       }
+
       /* Force popover anchors to expand */
-      .euiPopover > .euiFilterButton {
+      .euiPopover
+        > *:is(.euiToolTipAnchor, .euiFilterButton__wrapper, .euiFilterButton) {
         ${logicalCSS('width', '100%')}
       }
 
@@ -88,46 +95,10 @@ export const euiFilterGroupStyles = (euiThemeContext: UseEuiTheme) => {
       display: flex;
     `,
     uncompressed: css`
-      border-radius: ${borderRadius};
-
-      .euiFilterButton__wrapper {
-        ${logicalCSS('height', buttonSizeMap.m.height)}
-      }
-
-      .euiFilterButton {
-        ${logicalCSS('height', buttonSizeMap.m.height)}
-      }
-
-      .euiFilterButton-isToggle {
-        ${logicalCSS(
-          'height',
-          buttonSizeMap.m.getInsetHeight(
-            buttonSizeMap.m.height,
-            containerPadding
-          )
-        )}
-      }
+      border-radius: ${buttonSizeMap.m.radius};
     `,
     compressed: css`
-      border-radius: ${borderRadiusCompressed};
-
-      .euiFilterButton__wrapper {
-        ${logicalCSS('height', buttonSizeMap.s.height)}
-      }
-
-      .euiFilterButton {
-        ${logicalCSS('height', buttonSizeMap.s.height)}
-      }
-
-      .euiFilterButton-isToggle {
-        ${logicalCSS(
-          'height',
-          buttonSizeMap.s.getInsetHeight(
-            buttonSizeMap.s.height,
-            containerPadding
-          )
-        )}
-      }
+      border-radius: ${buttonSizeMap.s.radius};
     `,
     /**
      * Not used in EuiFilterGroup directly, but used by EuiSearchBar and consumers
diff --git a/packages/eui/src/components/filter_group/filter_group.tsx b/packages/eui/src/components/filter_group/filter_group.tsx
index 802bbb848170..03a8c9b5aa46 100644
--- a/packages/eui/src/components/filter_group/filter_group.tsx
+++ b/packages/eui/src/components/filter_group/filter_group.tsx
@@ -6,13 +6,19 @@
  * Side Public License, v 1.
  */
 
-import React, { HTMLAttributes, ReactNode, FunctionComponent } from 'react';
+import React, {
+  HTMLAttributes,
+  ReactNode,
+  FunctionComponent,
+  useMemo,
+} from 'react';
 import classNames from 'classnames';
 
 import { useEuiMemoizedStyles } from '../../services';
 import { CommonProps } from '../common';
 
 import { euiFilterGroupStyles } from './filter_group.styles';
+import { EuiFilterGroupContext } from './filter_group_context';
 
 export type EuiFilterGroupProps = HTMLAttributes<HTMLDivElement> &
   CommonProps & {
@@ -25,6 +31,18 @@ export type EuiFilterGroupProps = HTMLAttributes<HTMLDivElement> &
      *  When `true`, creates a shorter height filter group matching that of `compressed` form controls
      */
     compressed?: boolean;
+    /**
+     * Visual display variant:
+     * - `'regular'`: subdued toggle state
+     * - `'highlighted'`: highlighted toggle state
+     * @default 'regular'
+     */
+    display?: 'regular' | 'highlighted';
+    /**
+     * Shows dividers between buttons.
+     * @default true
+     */
+    showDividers?: boolean;
   };
 
 /**
@@ -35,6 +53,8 @@ export const EuiFilterGroup: FunctionComponent<EuiFilterGroupProps> = ({
   className,
   fullWidth = false,
   compressed,
+  display = 'regular',
+  showDividers = true,
   ...rest
 }) => {
   const styles = useEuiMemoizedStyles(euiFilterGroupStyles);
@@ -46,9 +66,22 @@ export const EuiFilterGroup: FunctionComponent<EuiFilterGroupProps> = ({
 
   const classes = classNames('euiFilterGroup', className);
 
+  const contextValue = useMemo(
+    () => ({ compressed, display, showDividers }),
+    [compressed, display, showDividers]
+  );
+
   return (
-    <div className={classes} css={cssStyles} {...rest}>
-      {children}
-    </div>
+    <EuiFilterGroupContext.Provider value={contextValue}>
+      <div
+        className={classes}
+        css={cssStyles}
+        {...rest}
+        data-display={display}
+        data-dividers={showDividers || undefined}
+      >
+        {children}
+      </div>
+    </EuiFilterGroupContext.Provider>
   );
 };
diff --git a/packages/eui/src/components/filter_group/filter_group_context.tsx b/packages/eui/src/components/filter_group/filter_group_context.tsx
new file mode 100644
index 000000000000..b1a2f413a371
--- /dev/null
+++ b/packages/eui/src/components/filter_group/filter_group_context.tsx
@@ -0,0 +1,21 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { createContext, useContext } from 'react';
+
+export interface EuiFilterGroupContextShape {
+  compressed?: boolean;
+  display?: 'regular' | 'highlighted';
+  showDividers?: boolean;
+}
+
+export const EuiFilterGroupContext = createContext<EuiFilterGroupContextShape>(
+  {}
+);
+
+export const useEuiFilterGroupContext = () => useContext(EuiFilterGroupContext);
diff --git a/packages/eui/src/components/form/form_control_layout/form_control_layout.styles.ts b/packages/eui/src/components/form/form_control_layout/form_control_layout.styles.ts
index d5e90d8bc362..5dc2775fabdf 100644
--- a/packages/eui/src/components/form/form_control_layout/form_control_layout.styles.ts
+++ b/packages/eui/src/components/form/form_control_layout/form_control_layout.styles.ts
@@ -258,6 +258,11 @@ export const euiFormControlLayoutSideNodeStyles = (
       :where(:not(:has(:disabled))) label {
         color: ${form.labelColor};
       }
+
+      /* padding is handled in the form layout side wrapper */
+      .euiFilterButton__wrapper {
+        padding: 0;
+      }
     `,
     uncompressed: {
       uncompressed: `
diff --git a/packages/eui/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap b/packages/eui/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap
index 851219d3a4d8..3103f128d251 100644
--- a/packages/eui/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap
+++ b/packages/eui/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap
@@ -153,14 +153,16 @@ exports[`SearchBar render - provided query, filters 1`] = `
   >
     <div
       class="euiFilterGroup emotion-euiFilterGroup-uncompressed"
+      data-display="regular"
+      data-dividers="true"
     >
       <div
-        class="euiFilterButton__wrapper css-1elc3kl-wrapper-hasToggle"
+        class="euiFilterButton__wrapper css-lcbovg-wrapper-hasDividers"
       >
         <button
           aria-pressed="false"
-          class="euiButtonGroupButton euiFilterButton euiFilterButton-isToggle emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-empty-text-euiFilterButton-toggle"
-          data-test-subj="filter-button_generated-id"
+          class="euiButton euiFilterButton euiFilterButton-isToggle emotion-euiButtonDisplay-s-defaultMinWidth-base-text-euiFilterButton-toggle"
+          id="filter-button_generated-id"
           type="button"
         >
           <span
@@ -180,12 +182,12 @@ exports[`SearchBar render - provided query, filters 1`] = `
         class="euiPopover emotion-euiPopover-inline-block"
       >
         <div
-          class="euiFilterButton__wrapper css-xcxo9u-wrapper"
+          class="euiFilterButton__wrapper css-lcbovg-wrapper-hasDividers"
         >
           <button
             aria-expanded="false"
             aria-label="Tag Selection"
-            class="euiButtonEmpty euiFilterButton emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-default"
+            class="euiButtonEmpty euiFilterButton emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton"
             type="button"
           >
             <span
diff --git a/packages/eui/src/components/search_bar/__snapshots__/search_filters.test.tsx.snap b/packages/eui/src/components/search_bar/__snapshots__/search_filters.test.tsx.snap
index 5d370915845b..e25783dc77a7 100644
--- a/packages/eui/src/components/search_bar/__snapshots__/search_filters.test.tsx.snap
+++ b/packages/eui/src/components/search_bar/__snapshots__/search_filters.test.tsx.snap
@@ -3,20 +3,24 @@
 exports[`EuiSearchBarFilters render - no filters 1`] = `
 <div
   class="euiFilterGroup emotion-euiFilterGroup-uncompressed"
+  data-display="regular"
+  data-dividers="true"
 />
 `;
 
 exports[`EuiSearchBarFilters render - with filters 1`] = `
 <div
   class="euiFilterGroup emotion-euiFilterGroup-uncompressed"
+  data-display="regular"
+  data-dividers="true"
 >
   <div
-    class="euiFilterButton__wrapper css-1elc3kl-wrapper-hasToggle"
+    class="euiFilterButton__wrapper css-lcbovg-wrapper-hasDividers"
   >
     <button
       aria-pressed="false"
-      class="euiButtonGroupButton euiFilterButton euiFilterButton-isToggle emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-empty-text-euiFilterButton-toggle"
-      data-test-subj="filter-button_generated-id"
+      class="euiButton euiFilterButton euiFilterButton-isToggle emotion-euiButtonDisplay-s-defaultMinWidth-base-text-euiFilterButton-toggle"
+      id="filter-button_generated-id"
       type="button"
     >
       <span
@@ -36,12 +40,12 @@ exports[`EuiSearchBarFilters render - with filters 1`] = `
     class="euiPopover emotion-euiPopover-inline-block"
   >
     <div
-      class="euiFilterButton__wrapper css-xcxo9u-wrapper"
+      class="euiFilterButton__wrapper css-lcbovg-wrapper-hasDividers"
     >
       <button
         aria-expanded="false"
         aria-label="Tag Selection"
-        class="euiButtonEmpty euiFilterButton emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton-default"
+        class="euiButtonEmpty euiFilterButton emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFilterButton"
         type="button"
       >
         <span
diff --git a/packages/eui/src/components/search_bar/filters/__snapshots__/field_value_toggle_filter.test.tsx.snap b/packages/eui/src/components/search_bar/filters/__snapshots__/field_value_toggle_filter.test.tsx.snap
index 6a7356b22845..de05f2042e7b 100644
--- a/packages/eui/src/components/search_bar/filters/__snapshots__/field_value_toggle_filter.test.tsx.snap
+++ b/packages/eui/src/components/search_bar/filters/__snapshots__/field_value_toggle_filter.test.tsx.snap
@@ -2,12 +2,12 @@
 
 exports[`FieldValueToggleFilter render - active 1`] = `
 <div
-  class="euiFilterButton__wrapper css-1elc3kl-wrapper-hasToggle"
+  class="euiFilterButton__wrapper css-psd5px-wrapper"
 >
   <button
     aria-pressed="true"
-    class="euiButtonGroupButton euiButtonGroupButton-isSelected euiFilterButton euiFilterButton-isSelected euiFilterButton-hasActiveFilters euiFilterButton-isToggle emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-isSelected-empty-text-euiFilterButton-hasActiveFilters-toggle"
-    data-test-subj="filter-button_generated-id"
+    class="euiButton euiFilterButton euiFilterButton-isSelected euiFilterButton-hasActiveFilters euiFilterButton-isToggle emotion-euiButtonDisplay-s-defaultMinWidth-base-text-euiFilterButton-hasActiveFilters-toggle-isSelected"
+    id="filter-button_generated-id"
     type="button"
   >
     <span
@@ -27,12 +27,12 @@ exports[`FieldValueToggleFilter render - active 1`] = `
 
 exports[`FieldValueToggleFilter render - active negated - custom negated name 1`] = `
 <div
-  class="euiFilterButton__wrapper css-1elc3kl-wrapper-hasToggle"
+  class="euiFilterButton__wrapper css-psd5px-wrapper"
 >
   <button
     aria-pressed="true"
-    class="euiButtonGroupButton euiButtonGroupButton-isSelected euiFilterButton euiFilterButton-isSelected euiFilterButton-hasActiveFilters euiFilterButton-isToggle emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-isSelected-empty-text-euiFilterButton-hasActiveFilters-toggle"
-    data-test-subj="filter-button_generated-id"
+    class="euiButton euiFilterButton euiFilterButton-isSelected euiFilterButton-hasActiveFilters euiFilterButton-isToggle emotion-euiButtonDisplay-s-defaultMinWidth-base-text-euiFilterButton-hasActiveFilters-toggle-isSelected"
+    id="filter-button_generated-id"
     type="button"
   >
     <span
@@ -52,12 +52,12 @@ exports[`FieldValueToggleFilter render - active negated - custom negated name 1`
 
 exports[`FieldValueToggleFilter render - active negated 1`] = `
 <div
-  class="euiFilterButton__wrapper css-1elc3kl-wrapper-hasToggle"
+  class="euiFilterButton__wrapper css-psd5px-wrapper"
 >
   <button
     aria-pressed="true"
-    class="euiButtonGroupButton euiButtonGroupButton-isSelected euiFilterButton euiFilterButton-isSelected euiFilterButton-hasActiveFilters euiFilterButton-isToggle emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-isSelected-empty-text-euiFilterButton-hasActiveFilters-toggle"
-    data-test-subj="filter-button_generated-id"
+    class="euiButton euiFilterButton euiFilterButton-isSelected euiFilterButton-hasActiveFilters euiFilterButton-isToggle emotion-euiButtonDisplay-s-defaultMinWidth-base-text-euiFilterButton-hasActiveFilters-toggle-isSelected"
+    id="filter-button_generated-id"
     type="button"
   >
     <span
@@ -77,12 +77,12 @@ exports[`FieldValueToggleFilter render - active negated 1`] = `
 
 exports[`FieldValueToggleFilter renders 1`] = `
 <div
-  class="euiFilterButton__wrapper css-1elc3kl-wrapper-hasToggle"
+  class="euiFilterButton__wrapper css-psd5px-wrapper"
 >
   <button
     aria-pressed="false"
-    class="euiButtonGroupButton euiFilterButton euiFilterButton-isToggle emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-empty-text-euiFilterButton-toggle"
-    data-test-subj="filter-button_generated-id"
+    class="euiButton euiFilterButton euiFilterButton-isToggle emotion-euiButtonDisplay-s-defaultMinWidth-base-text-euiFilterButton-toggle"
+    id="filter-button_generated-id"
     type="button"
   >
     <span
diff --git a/packages/eui/src/components/search_bar/filters/__snapshots__/field_value_toggle_group_filter.test.tsx.snap b/packages/eui/src/components/search_bar/filters/__snapshots__/field_value_toggle_group_filter.test.tsx.snap
index 02d62559fd76..c696e441303f 100644
--- a/packages/eui/src/components/search_bar/filters/__snapshots__/field_value_toggle_group_filter.test.tsx.snap
+++ b/packages/eui/src/components/search_bar/filters/__snapshots__/field_value_toggle_group_filter.test.tsx.snap
@@ -2,12 +2,12 @@
 
 exports[`TermToggleGroupFilter render - active 1`] = `
 <div
-  class="euiFilterButton__wrapper css-1tpygcs-wrapper-withNext-hasToggle"
+  class="euiFilterButton__wrapper css-gf1zx3-wrapper-withNext"
 >
   <button
     aria-pressed="true"
-    class="euiButtonGroupButton euiButtonGroupButton-isSelected euiFilterButton euiFilterButton-isSelected euiFilterButton-hasActiveFilters euiFilterButton-isToggle emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-isSelected-empty-text-euiFilterButton-hasActiveFilters-toggle"
-    data-test-subj="filter-button_generated-id"
+    class="euiButton euiFilterButton euiFilterButton-isSelected euiFilterButton-hasActiveFilters euiFilterButton-isToggle emotion-euiButtonDisplay-s-defaultMinWidth-base-text-euiFilterButton-hasActiveFilters-toggle-isSelected"
+    id="filter-button_generated-id"
     type="button"
   >
     <span
@@ -27,12 +27,12 @@ exports[`TermToggleGroupFilter render - active 1`] = `
 
 exports[`TermToggleGroupFilter render - active negated - custom negated name 1`] = `
 <div
-  class="euiFilterButton__wrapper css-1tpygcs-wrapper-withNext-hasToggle"
+  class="euiFilterButton__wrapper css-gf1zx3-wrapper-withNext"
 >
   <button
     aria-pressed="true"
-    class="euiButtonGroupButton euiButtonGroupButton-isSelected euiFilterButton euiFilterButton-isSelected euiFilterButton-hasActiveFilters euiFilterButton-isToggle emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-isSelected-empty-text-euiFilterButton-hasActiveFilters-toggle"
-    data-test-subj="filter-button_generated-id"
+    class="euiButton euiFilterButton euiFilterButton-isSelected euiFilterButton-hasActiveFilters euiFilterButton-isToggle emotion-euiButtonDisplay-s-defaultMinWidth-base-text-euiFilterButton-hasActiveFilters-toggle-isSelected"
+    id="filter-button_generated-id"
     type="button"
   >
     <span
@@ -52,12 +52,12 @@ exports[`TermToggleGroupFilter render - active negated - custom negated name 1`]
 
 exports[`TermToggleGroupFilter render - active negated 1`] = `
 <div
-  class="euiFilterButton__wrapper css-1tpygcs-wrapper-withNext-hasToggle"
+  class="euiFilterButton__wrapper css-gf1zx3-wrapper-withNext"
 >
   <button
     aria-pressed="true"
-    class="euiButtonGroupButton euiButtonGroupButton-isSelected euiFilterButton euiFilterButton-isSelected euiFilterButton-hasActiveFilters euiFilterButton-isToggle emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-isSelected-empty-text-euiFilterButton-hasActiveFilters-toggle"
-    data-test-subj="filter-button_generated-id"
+    class="euiButton euiFilterButton euiFilterButton-isSelected euiFilterButton-hasActiveFilters euiFilterButton-isToggle emotion-euiButtonDisplay-s-defaultMinWidth-base-text-euiFilterButton-hasActiveFilters-toggle-isSelected"
+    id="filter-button_generated-id"
     type="button"
   >
     <span
@@ -77,12 +77,12 @@ exports[`TermToggleGroupFilter render - active negated 1`] = `
 
 exports[`TermToggleGroupFilter renders 1`] = `
 <div
-  class="euiFilterButton__wrapper css-1tpygcs-wrapper-withNext-hasToggle"
+  class="euiFilterButton__wrapper css-gf1zx3-wrapper-withNext"
 >
   <button
     aria-pressed="false"
-    class="euiButtonGroupButton euiFilterButton euiFilterButton-isToggle emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-empty-text-euiFilterButton-toggle"
-    data-test-subj="filter-button_generated-id"
+    class="euiButton euiFilterButton euiFilterButton-isToggle emotion-euiButtonDisplay-s-defaultMinWidth-base-text-euiFilterButton-toggle"
+    id="filter-button_generated-id"
     type="button"
   >
     <span
diff --git a/packages/eui/src/components/search_bar/filters/__snapshots__/is_filter.test.tsx.snap b/packages/eui/src/components/search_bar/filters/__snapshots__/is_filter.test.tsx.snap
index cbd62760120a..836dc3a6f13e 100644
--- a/packages/eui/src/components/search_bar/filters/__snapshots__/is_filter.test.tsx.snap
+++ b/packages/eui/src/components/search_bar/filters/__snapshots__/is_filter.test.tsx.snap
@@ -2,12 +2,12 @@
 
 exports[`IsFilter render 1`] = `
 <div
-  class="euiFilterButton__wrapper css-1elc3kl-wrapper-hasToggle"
+  class="euiFilterButton__wrapper css-psd5px-wrapper"
 >
   <button
     aria-pressed="false"
-    class="euiButtonGroupButton euiFilterButton euiFilterButton-isToggle emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-s-empty-text-euiFilterButton-toggle"
-    data-test-subj="filter-button_generated-id"
+    class="euiButton euiFilterButton euiFilterButton-isToggle emotion-euiButtonDisplay-s-defaultMinWidth-base-text-euiFilterButton-toggle"
+    id="filter-button_generated-id"
     type="button"
   >
     <span
diff --git a/packages/release-cli/kibana-prep-commits b/packages/release-cli/kibana-prep-commits
index 641e8da270d9..539e9ebc3221 100644
--- a/packages/release-cli/kibana-prep-commits
+++ b/packages/release-cli/kibana-prep-commits
@@ -9,5 +9,7 @@
 https://github.com/elastic/kibana/pull/287310/commits/2abc1ab916e13cee4972b0bed08344c80456002a
 https://github.com/elastic/kibana/pull/287310/commits/e7d41fe9d83bf889bb68eeb61eca4cab4ad0bd42
 https://github.com/elastic/kibana/pull/235177/commits/fe98fc4dea683a966f7c723432c28221e2ac8b3c
+https://github.com/elastic/kibana/pull/287310/commits/9cd54800d190fba79a50c2d52be514d1cf217c9a
+https://github.com/elastic/kibana/pull/287310/commits/11a47ae5c05b71b02635c3cb7e924c49d006620d
 
 # @previous
diff --git a/packages/website/docs/components/navigation/buttons/filter-group.mdx b/packages/website/docs/components/navigation/buttons/filter-group.mdx
index 159028658dcb..6d17e13fe859 100644
--- a/packages/website/docs/components/navigation/buttons/filter-group.mdx
+++ b/packages/website/docs/components/navigation/buttons/filter-group.mdx
@@ -5,9 +5,12 @@ sidebar_position: 4
 
 # Filter group
 
-## Filter buttons
+Use **EuiFilterGroup** to wrap **EuiFilterButton** components into a container that looks nice against form fields (like search).
+
+Use `display="highlighted"` only when multiple filter groups are used together to visually distinguish one group above the others.
+To hide the dividers between buttons, set `showDividers={false}`.
 
-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.
+## Filter buttons
 
 Add the prop `withNext` to remove the border between it and the next EuiFilterButton to visually group similar or opposite style filters.
 
@@ -17,50 +20,88 @@ Use `isToggle` to change the visual and functional type of the button element th
 
 ```tsx interactive
 import React, { useState } from 'react';
-import { EuiFilterGroup, EuiFilterButton } from '@elastic/eui';
+import {
+  EuiFilterGroup,
+  EuiFilterButton,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSelect,
+  EuiSwitch,
+  EuiSpacer,
+} from '@elastic/eui';
 
 export default () => {
+  const [display, setDisplay] = useState<'regular' | 'highlighted'>('regular');
+  const [showDividers, setShowDividers] = useState(true);
   const [isFilterOn, setIsFilterOn] = useState(false);
   const [isOnFilterOn, setIsOnFilterOn] = useState(false);
   const [isOffFilterOn, setIsOffFilterOn] = useState(false);
 
-  const toggleFilter = () => {
-    setIsFilterOn(!isFilterOn);
-  };
-
-  const toggleOnFilter = () => {
-    setIsOnFilterOn(!isOnFilterOn);
-    setIsOffFilterOn(isOffFilterOn && !isOnFilterOn ? false : isOffFilterOn);
-  };
-
-  const toggleOffFilter = () => {
-    setIsOffFilterOn(!isOffFilterOn);
-    setIsOnFilterOn(isOnFilterOn && !isOffFilterOn ? false : isOnFilterOn);
-  };
-
   return (
-    <EuiFilterGroup>
-      <EuiFilterButton hasActiveFilters={isFilterOn} isSelected={isFilterOn} onClick={toggleFilter} isToggle>
-        Single filter
-      </EuiFilterButton>
-      <EuiFilterButton
-        withNext
-        hasActiveFilters={isOnFilterOn}
-        isSelected={isOnFilterOn}
-        onClick={toggleOnFilter}
-        isToggle
-      >
-        On
-      </EuiFilterButton>
-      <EuiFilterButton
-        hasActiveFilters={isOffFilterOn}
-        isSelected={isOffFilterOn}
-        onClick={toggleOffFilter}
-        isToggle
-      >
-        Off
-      </EuiFilterButton>
-    </EuiFilterGroup>
+    <>
+      <EuiFlexGroup alignItems="center" gutterSize="m" wrap>
+        <EuiFlexItem grow={false}>
+          <EuiSelect
+            compressed
+            prepend="display"
+            options={[
+              { value: 'regular', text: 'regular' },
+              { value: 'highlighted', text: 'highlighted' },
+            ]}
+            value={display}
+            onChange={(e) =>
+              setDisplay(e.target.value as 'regular' | 'highlighted')
+            }
+          />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiSwitch
+            compressed
+            label="showDividers"
+            checked={showDividers}
+            onChange={(e) => setShowDividers(e.target.checked)}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiSpacer size="m" />
+      <EuiFilterGroup display={display} showDividers={showDividers}>
+        <EuiFilterButton
+          isToggle
+          isSelected={isFilterOn}
+          hasActiveFilters={isFilterOn}
+          onClick={() => setIsFilterOn(!isFilterOn)}
+        >
+          Single filter
+        </EuiFilterButton>
+        <EuiFilterButton
+          withNext
+          isToggle
+          isSelected={isOnFilterOn}
+          hasActiveFilters={isOnFilterOn}
+          onClick={() => {
+            setIsOnFilterOn(!isOnFilterOn);
+            setIsOffFilterOn(
+              isOffFilterOn && !isOnFilterOn ? false : isOffFilterOn
+            );
+          }}
+        >
+          On
+        </EuiFilterButton>
+        <EuiFilterButton
+          isToggle
+          isSelected={isOffFilterOn}
+          hasActiveFilters={isOffFilterOn}
+          onClick={() => {
+            setIsOffFilterOn(!isOffFilterOn);
+            setIsOnFilterOn(
+              isOnFilterOn && !isOffFilterOn ? false : isOnFilterOn
+            );
+          }}
+        >
+          Off
+        </EuiFilterButton>
+      </EuiFilterGroup>
+    </>
   );
 };
 ```