diff --git a/packages/eui/changelogs/upcoming/8705.md b/packages/eui/changelogs/upcoming/8705.md
new file mode 100644
index 00000000000..667ec6bd10a
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/8705.md
@@ -0,0 +1 @@
+- Updated EuiFilterButton's `numActiveFilters` prop to accept percentage values
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 704ea57967c..b29e80a1a36 100644
--- a/packages/eui/src/components/filter_group/filter_button.stories.tsx
+++ b/packages/eui/src/components/filter_group/filter_button.stories.tsx
@@ -19,6 +19,7 @@ const meta: Meta<EuiFilterButtonProps> = {
   component: EuiFilterButton as any,
   argTypes: {
     color: { control: 'select', options: BUTTON_COLORS },
+    numActiveFilters: { control: 'text' },
   },
   args: {
     // Component defaults
diff --git a/packages/eui/src/components/filter_group/filter_button.tsx b/packages/eui/src/components/filter_group/filter_button.tsx
index 924dc4ecdd1..312595557fd 100644
--- a/packages/eui/src/components/filter_group/filter_button.tsx
+++ b/packages/eui/src/components/filter_group/filter_button.tsx
@@ -34,10 +34,16 @@ export type EuiFilterButtonProps = {
    */
   numFilters?: number;
   /**
-   * Pass the number of selected filters and it will
-   * add a bright notification badge showing the number
+   * 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%'
    */
-  numActiveFilters?: number;
+  numActiveFilters?: number | string;
   /**
    * Applies a visual state to the button useful when using with a popover.
    */
@@ -85,8 +91,7 @@ export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps> = ({
   ...rest
 }) => {
   const numFiltersDefined = numFilters != null; // != instead of !== to allow for null and undefined
-  const numActiveFiltersDefined =
-    numActiveFilters != null && numActiveFilters > 0;
+  const numActiveFiltersDefined = !!numActiveFilters;
 
   const styles = useEuiMemoizedStyles(euiFilterButtonStyles);
   const cssStyles = [
diff --git a/packages/website/docs/components/forms/search-and-filter/filter-group.mdx b/packages/website/docs/components/forms/search-and-filter/filter-group.mdx
index 1441ca67d1a..758891ebf7b 100644
--- a/packages/website/docs/components/forms/search-and-filter/filter-group.mdx
+++ b/packages/website/docs/components/forms/search-and-filter/filter-group.mdx
@@ -65,7 +65,12 @@ To provide a long list of grouped filters, we recommend wrapping the filter butt
 
 ### 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 `numActiveFilters`which will change the number displayed.
+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.
 
 ```tsx interactive
 import React, { useEffect, useRef, useState } from 'react';