diff --git a/CHANGELOG.md b/CHANGELOG.md
index 15e977f4419..cbabaca4057 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 - Converted `EuiFormRow` to Typescript ([#2712](https://github.com/elastic/eui/pull/2712))
 - Updated `logoAPM`, `logoSecurity` and `logoEnterpriseSearch`. Added `logoWorkplaceSearch` and `logoObservability` ([#2769](https://github.com/elastic/eui/pull/2769))
+- Convert `EuiFilterButton` to TypeScript ([#2761](https://github.com/elastic/eui/pull/2761))
+- Convert `EuiFilterSelectItem` to TypeScript ([#2761](https://github.com/elastic/eui/pull/2761))
 
 **Deprecations**
 
diff --git a/src/components/filter_group/__snapshots__/filter_button.test.js.snap b/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap
similarity index 100%
rename from src/components/filter_group/__snapshots__/filter_button.test.js.snap
rename to src/components/filter_group/__snapshots__/filter_button.test.tsx.snap
diff --git a/src/components/filter_group/__snapshots__/filter_select_item.test.js.snap b/src/components/filter_group/__snapshots__/filter_select_item.test.tsx.snap
similarity index 100%
rename from src/components/filter_group/__snapshots__/filter_select_item.test.js.snap
rename to src/components/filter_group/__snapshots__/filter_select_item.test.tsx.snap
diff --git a/src/components/filter_group/filter_button.test.js b/src/components/filter_group/filter_button.test.tsx
similarity index 100%
rename from src/components/filter_group/filter_button.test.js
rename to src/components/filter_group/filter_button.test.tsx
diff --git a/src/components/filter_group/filter_button.js b/src/components/filter_group/filter_button.tsx
similarity index 62%
rename from src/components/filter_group/filter_button.js
rename to src/components/filter_group/filter_button.tsx
index fb025321fb6..771f35bda5a 100644
--- a/src/components/filter_group/filter_button.js
+++ b/src/components/filter_group/filter_button.tsx
@@ -1,28 +1,59 @@
-import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
+import React, { Fragment, FunctionComponent } from 'react';
 import classNames from 'classnames';
 
 import { EuiI18n } from '../i18n';
 import { EuiNotificationBadge } from '../badge/notification_badge';
-import { COLORS, ICON_SIDES, EuiButtonEmpty } from '../button/button_empty';
-
-import { IconPropType } from '../icon';
+import { EuiButtonEmpty, EuiButtonEmptyProps } from '../button/button_empty';
 
 import { useInnerText } from '../inner_text';
 
-export const EuiFilterButton = ({
+export type EuiFilterButtonProps = EuiButtonEmptyProps & {
+  /**
+   * Bolds the button if true
+   */
+  hasActiveFilters?: boolean;
+  /**
+   * Pass the total number of filters available and it will
+   * add a subdued notification badge showing the number
+   */
+  numFilters?: number;
+  /**
+   * Pass the number of selected filters and it will
+   * add a bright notification badge showing the number
+   */
+  numActiveFilters?: number;
+  /**
+   * Applies a visual state to the button useful when using with a popover.
+   */
+  isSelected?: boolean;
+  /**
+   * Should the button grow to fill its container, best used for dropdown buttons
+   */
+  grow?: boolean;
+  /**
+   * Remove border after button, good for opposite filters
+   */
+  withNext?: boolean;
+  /**
+   * _DEPRECATED: use `withNext`_
+   * Remove border after button, good for opposite filters
+   */
+  noDivider?: boolean;
+};
+
+export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps> = ({
   children,
   className,
   iconType,
-  iconSide,
-  color,
+  iconSide = 'right',
+  color = 'text',
   hasActiveFilters,
   numFilters,
   numActiveFilters,
   isDisabled,
   isSelected,
-  type,
-  grow,
+  type = 'button',
+  grow = true,
   noDivider,
   withNext,
   textProps,
@@ -69,19 +100,22 @@ export const EuiFilterButton = ({
       {numFiltersDefined && (
         <EuiI18n
           token="euiFilterButton.filterBadge"
-          values={{ count: numActiveFilters || numFilters, hasActiveFilters }}
-          default={({ count, hasActiveFilters }) =>
-            `${count} ${hasActiveFilters ? 'active' : 'available'} filters`
-          }>
-          {filterBadge => (
-            <EuiNotificationBadge
-              className="euiFilterButton__notification"
-              size="m"
-              aria-label={filterBadge}
-              color={isDisabled || !hasActiveFilters ? 'subdued' : 'accent'}>
-              {numActiveFilters || numFilters}
-            </EuiNotificationBadge>
-          )}
+          values={{
+            count: numActiveFilters || numFilters,
+            hasActiveFilters: hasActiveFilters ? 'active' : 'available',
+          }}
+          default="{count} {hasActiveFilters} filters">
+          {(filterBadge: string) => {
+            return (
+              <EuiNotificationBadge
+                className="euiFilterButton__notification"
+                size="m"
+                aria-label={filterBadge}
+                color={isDisabled || !hasActiveFilters ? 'subdued' : 'accent'}>
+                {numActiveFilters || numFilters}
+              </EuiNotificationBadge>
+            );
+          }}
         </EuiI18n>
       )}
     </Fragment>
@@ -101,58 +135,3 @@ export const EuiFilterButton = ({
     </EuiButtonEmpty>
   );
 };
-
-EuiFilterButton.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  onClick: PropTypes.func,
-  /**
-   * Use any one of our icons
-   */
-  iconType: IconPropType,
-  iconSide: PropTypes.oneOf(ICON_SIDES),
-  color: PropTypes.oneOf(COLORS),
-  /**
-   * Bolds the button if true
-   */
-  hasActiveFilters: PropTypes.bool,
-  /**
-   * Pass the total number of filters available and it will
-   * add a subdued notification badge showing the number
-   */
-  numFilters: PropTypes.number,
-  /**
-   * Pass the number of selected filters and it will
-   * add a bright notification badge showing the number
-   */
-  numActiveFilters: PropTypes.number,
-  /**
-   * Applies a visual state to the button useful when using with a popover.
-   */
-  isSelected: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  /**
-   * Defines html button input type
-   */
-  type: PropTypes.string,
-  /**
-   * Should the button grow to fill its container, best used for dropdown buttons
-   */
-  grow: PropTypes.bool,
-  /**
-   * Remove border after button, good for opposite filters
-   */
-  withNext: PropTypes.bool,
-  /**
-   * _DEPRECATED: use `withNext`_
-   * Remove border after button, good for opposite filters
-   */
-  noDivider: PropTypes.bool,
-};
-
-EuiFilterButton.defaultProps = {
-  type: 'button',
-  iconSide: 'right',
-  color: 'text',
-  grow: true,
-};
diff --git a/src/components/filter_group/filter_select_item.test.js b/src/components/filter_group/filter_select_item.test.tsx
similarity index 100%
rename from src/components/filter_group/filter_select_item.test.js
rename to src/components/filter_group/filter_select_item.test.tsx
diff --git a/src/components/filter_group/filter_select_item.js b/src/components/filter_group/filter_select_item.tsx
similarity index 64%
rename from src/components/filter_group/filter_select_item.js
rename to src/components/filter_group/filter_select_item.tsx
index b93b134d3ae..eeee1c322c7 100644
--- a/src/components/filter_group/filter_select_item.js
+++ b/src/components/filter_group/filter_select_item.tsx
@@ -1,44 +1,44 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, { ButtonHTMLAttributes, Component } from 'react';
 import classNames from 'classnames';
 
+import { CommonProps } from '../common';
+
 import { EuiFlexGroup, EuiFlexItem } from '../flex';
 
 import { EuiIcon } from '../icon';
 
-const CHECKED_ON = 'on';
-const CHECKED_OFF = 'off';
+export type FilterChecked = 'on' | 'off';
+export interface EuiFilterSelectItemProps
+  extends CommonProps,
+    ButtonHTMLAttributes<HTMLButtonElement> {
+  checked?: FilterChecked;
+  showIcons?: boolean;
+  isFocused?: boolean;
+}
 
-const resolveIconAndColor = checked => {
+const resolveIconAndColor = (checked?: FilterChecked) => {
   if (!checked) {
     return { icon: 'empty' };
   }
-  return checked === CHECKED_ON
+  return checked === 'on'
     ? { icon: 'check', color: 'text' }
     : { icon: 'cross', color: 'text' };
 };
 
-export class EuiFilterSelectItem extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { hasFocus: false };
-  }
-
-  focus = () => {
-    if (this.buttonRef) {
-      this.buttonRef.focus();
-    }
+export class EuiFilterSelectItem extends Component<EuiFilterSelectItemProps> {
+  static defaultProps = {
+    showIcons: true,
   };
 
-  onFocus = () => {
-    if (this.mounted) {
-      this.setState({ hasFocus: true });
-    }
+  buttonRef: HTMLButtonElement | null = null;
+
+  state = {
+    hasFocus: false,
   };
 
-  onBlur = () => {
-    if (this.mounted) {
-      this.setState({ hasFocus: false });
+  focus = () => {
+    if (this.buttonRef) {
+      this.buttonRef.focus();
     }
   };
 
@@ -98,18 +98,3 @@ export class EuiFilterSelectItem extends Component {
     );
   }
 }
-
-EuiFilterSelectItem.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  /**
-   * Applies an icon and visual styling to activated items
-   */
-  checked: PropTypes.oneOf([CHECKED_ON, CHECKED_OFF]),
-  onClick: PropTypes.func,
-  showIcons: PropTypes.bool,
-};
-
-EuiFilterSelectItem.defaultProps = {
-  showIcons: true,
-};
diff --git a/src/components/filter_group/index.d.ts b/src/components/filter_group/index.d.ts
deleted file mode 100644
index 933facbf6ef..00000000000
--- a/src/components/filter_group/index.d.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { Component, FunctionComponent, ButtonHTMLAttributes } from 'react';
-
-import {
-  CommonProps,
-  ExclusiveUnion,
-  PropsForAnchor,
-  PropsForButton,
-} from '../common';
-import { EuiButtonEmptyProps } from '../button';
-import { EuiFilterGroupProps } from './filter_group';
-
-declare module '@elastic/eui' {
-  /**
-   * Filter button type defs
-   *
-   * @see './filter_button.js'
-   */
-
-  export type EuiFilterButtonProps = EuiButtonEmptyProps & {
-    numFilters?: number;
-    numActiveFilters?: number;
-    hasActiveFilters?: boolean;
-    isSelected?: boolean;
-    isDisabled?: boolean;
-    grow?: boolean;
-    withNext?: boolean;
-    /**
-     * _DEPRECATED use `withNext`_
-     */
-    noDivider?: boolean;
-  };
-
-  type EuiFilterButtonPropsForAnchor = PropsForAnchor<EuiFilterButtonProps>;
-
-  type EuiFilterButtonPropsForButton = PropsForButton<EuiFilterButtonProps>;
-
-  type Props = ExclusiveUnion<
-    EuiFilterButtonPropsForAnchor,
-    EuiFilterButtonPropsForButton
-  >;
-  export const EuiFilterButton: FunctionComponent<Props>;
-
-  /**
-   * Filter group type defs
-   *
-   * @see './filter_group.js'
-   */
-  export const EuiFilterGroup: FunctionComponent<EuiFilterGroupProps>;
-
-  /**
-   * Filter select item type defs
-   *
-   * @see './filter_select_item.js'
-   */
-
-  export type FilterChecked = 'on' | 'off';
-  export interface EuiFilterSelectItemProps {
-    checked?: FilterChecked;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  }
-
-  // eslint-disable-next-line react/prefer-stateless-function
-  export class EuiFilterSelectItem extends Component<
-    CommonProps &
-      ButtonHTMLAttributes<HTMLButtonElement> &
-      EuiFilterSelectItemProps
-  > {
-    render(): JSX.Element;
-  }
-}
diff --git a/src/components/filter_group/index.js b/src/components/filter_group/index.js
deleted file mode 100644
index 397868fbae9..00000000000
--- a/src/components/filter_group/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export { EuiFilterGroup } from './filter_group';
-
-export { EuiFilterButton } from './filter_button';
-
-export { EuiFilterSelectItem } from './filter_select_item';
diff --git a/src/components/filter_group/index.ts b/src/components/filter_group/index.ts
new file mode 100644
index 00000000000..07207555857
--- /dev/null
+++ b/src/components/filter_group/index.ts
@@ -0,0 +1,9 @@
+export { EuiFilterGroup, EuiFilterGroupProps } from './filter_group';
+
+export { EuiFilterButton, EuiFilterButtonProps } from './filter_button';
+
+export {
+  EuiFilterSelectItem,
+  EuiFilterSelectItemProps,
+  FilterChecked,
+} from './filter_select_item';
diff --git a/src/components/index.d.ts b/src/components/index.d.ts
index 0841f75163c..271af437ab9 100644
--- a/src/components/index.d.ts
+++ b/src/components/index.d.ts
@@ -1,7 +1,6 @@
 /// <reference path="./code/index.d.ts" />
 /// <reference path="./combo_box/index.d.ts" />
 /// <reference path="./date_picker/index.d.ts" />
-/// <reference path="./filter_group/index.d.ts" />
 /// <reference path="./form/index.d.ts" />
 /// <reference path="./modal/index.d.ts" />
 /// <reference path="./tabs/index.d.ts" />
diff --git a/src/components/search_bar/filters/__snapshots__/field_value_selection_filter.test.js.snap b/src/components/search_bar/filters/__snapshots__/field_value_selection_filter.test.js.snap
index 8247abbd294..5cf798a14d8 100644
--- a/src/components/search_bar/filters/__snapshots__/field_value_selection_filter.test.js.snap
+++ b/src/components/search_bar/filters/__snapshots__/field_value_selection_filter.test.js.snap
@@ -5,13 +5,11 @@ exports[`FieldValueSelectionFilter active - field is global 1`] = `
   anchorPosition="downCenter"
   button={
     <EuiFilterButton
-      color="text"
       grow={true}
       hasActiveFilters={true}
       iconSide="right"
       iconType="arrowDown"
       onClick={[Function]}
-      type="button"
     >
       Tag
     </EuiFilterButton>
@@ -65,13 +63,11 @@ exports[`FieldValueSelectionFilter active - fields in options 1`] = `
   anchorPosition="downCenter"
   button={
     <EuiFilterButton
-      color="text"
       grow={true}
       hasActiveFilters={true}
       iconSide="right"
       iconType="arrowDown"
       onClick={[Function]}
-      type="button"
     >
       Tag
     </EuiFilterButton>
@@ -125,13 +121,11 @@ exports[`FieldValueSelectionFilter inactive - field is global 1`] = `
   anchorPosition="downCenter"
   button={
     <EuiFilterButton
-      color="text"
       grow={true}
       hasActiveFilters={false}
       iconSide="right"
       iconType="arrowDown"
       onClick={[Function]}
-      type="button"
     >
       Tag
     </EuiFilterButton>
@@ -184,13 +178,11 @@ exports[`FieldValueSelectionFilter inactive - fields in options 1`] = `
   anchorPosition="downCenter"
   button={
     <EuiFilterButton
-      color="text"
       grow={true}
       hasActiveFilters={false}
       iconSide="right"
       iconType="arrowDown"
       onClick={[Function]}
-      type="button"
     >
       Tag
     </EuiFilterButton>
@@ -243,13 +235,11 @@ exports[`FieldValueSelectionFilter render - all configurations 1`] = `
   anchorPosition="downCenter"
   button={
     <EuiFilterButton
-      color="text"
       grow={true}
       hasActiveFilters={false}
       iconSide="right"
       iconType="arrowDown"
       onClick={[Function]}
-      type="button"
     >
       Tag
     </EuiFilterButton>
@@ -289,13 +279,11 @@ exports[`FieldValueSelectionFilter render - fields in options 1`] = `
   anchorPosition="downCenter"
   button={
     <EuiFilterButton
-      color="text"
       grow={true}
       hasActiveFilters={false}
       iconSide="right"
       iconType="arrowDown"
       onClick={[Function]}
-      type="button"
     >
       Tag
     </EuiFilterButton>
@@ -348,13 +336,11 @@ exports[`FieldValueSelectionFilter render - multi-select OR 1`] = `
   anchorPosition="downCenter"
   button={
     <EuiFilterButton
-      color="text"
       grow={true}
       hasActiveFilters={false}
       iconSide="right"
       iconType="arrowDown"
       onClick={[Function]}
-      type="button"
     >
       Tag
     </EuiFilterButton>
@@ -394,13 +380,11 @@ exports[`FieldValueSelectionFilter render - options as a function 1`] = `
   anchorPosition="downCenter"
   button={
     <EuiFilterButton
-      color="text"
       grow={true}
       hasActiveFilters={false}
       iconSide="right"
       iconType="arrowDown"
       onClick={[Function]}
-      type="button"
     >
       Tag
     </EuiFilterButton>
@@ -440,13 +424,11 @@ exports[`FieldValueSelectionFilter render - options as an array 1`] = `
   anchorPosition="downCenter"
   button={
     <EuiFilterButton
-      color="text"
       grow={true}
       hasActiveFilters={false}
       iconSide="right"
       iconType="arrowDown"
       onClick={[Function]}
-      type="button"
     >
       Tag
     </EuiFilterButton>
diff --git a/src/components/search_bar/filters/__snapshots__/field_value_toggle_filter.test.js.snap b/src/components/search_bar/filters/__snapshots__/field_value_toggle_filter.test.js.snap
index 3796cb5c880..b5ad5cfbe9e 100644
--- a/src/components/search_bar/filters/__snapshots__/field_value_toggle_filter.test.js.snap
+++ b/src/components/search_bar/filters/__snapshots__/field_value_toggle_filter.test.js.snap
@@ -3,12 +3,8 @@
 exports[`FieldValueToggleFilter render - active 1`] = `
 <EuiFilterButton
   aria-pressed={true}
-  color="text"
-  grow={true}
   hasActiveFilters={true}
-  iconSide="right"
   onClick={[Function]}
-  type="button"
 >
   Kibana
 </EuiFilterButton>
@@ -17,12 +13,8 @@ exports[`FieldValueToggleFilter render - active 1`] = `
 exports[`FieldValueToggleFilter render - active negated - custom negated name 1`] = `
 <EuiFilterButton
   aria-pressed={true}
-  color="text"
-  grow={true}
   hasActiveFilters={true}
-  iconSide="right"
   onClick={[Function]}
-  type="button"
 >
   Others
 </EuiFilterButton>
@@ -31,12 +23,8 @@ exports[`FieldValueToggleFilter render - active negated - custom negated name 1`
 exports[`FieldValueToggleFilter render - active negated 1`] = `
 <EuiFilterButton
   aria-pressed={true}
-  color="text"
-  grow={true}
   hasActiveFilters={true}
-  iconSide="right"
   onClick={[Function]}
-  type="button"
 >
   Not Kibana
 </EuiFilterButton>
@@ -45,12 +33,8 @@ exports[`FieldValueToggleFilter render - active negated 1`] = `
 exports[`FieldValueToggleFilter render 1`] = `
 <EuiFilterButton
   aria-pressed={false}
-  color="text"
-  grow={true}
   hasActiveFilters={false}
-  iconSide="right"
   onClick={[Function]}
-  type="button"
 >
   Kibana
 </EuiFilterButton>
diff --git a/src/components/search_bar/filters/__snapshots__/field_value_toggle_group_filter.test.js.snap b/src/components/search_bar/filters/__snapshots__/field_value_toggle_group_filter.test.js.snap
index e04a56a0c82..d78fddb680c 100644
--- a/src/components/search_bar/filters/__snapshots__/field_value_toggle_group_filter.test.js.snap
+++ b/src/components/search_bar/filters/__snapshots__/field_value_toggle_group_filter.test.js.snap
@@ -4,28 +4,20 @@ exports[`TermToggleGroupFilter render - active 1`] = `
 Array [
   <EuiFilterButton
     aria-pressed={true}
-    color="text"
-    grow={true}
     hasActiveFilters={true}
-    iconSide="right"
     key="field_value_toggle_filter_item_0"
     noDivider={true}
     onClick={[Function]}
-    type="button"
     withNext={true}
   >
     Kibana
   </EuiFilterButton>,
   <EuiFilterButton
     aria-pressed={false}
-    color="text"
-    grow={true}
     hasActiveFilters={false}
-    iconSide="right"
     key="field_value_toggle_filter_item_1"
     noDivider={false}
     onClick={[Function]}
-    type="button"
     withNext={false}
   >
     Elasticsearch
@@ -37,28 +29,20 @@ exports[`TermToggleGroupFilter render - active negated - custom negated name 1`]
 Array [
   <EuiFilterButton
     aria-pressed={true}
-    color="text"
-    grow={true}
     hasActiveFilters={true}
-    iconSide="right"
     key="field_value_toggle_filter_item_0"
     noDivider={true}
     onClick={[Function]}
-    type="button"
     withNext={true}
   >
     -Kibana
   </EuiFilterButton>,
   <EuiFilterButton
     aria-pressed={false}
-    color="text"
-    grow={true}
     hasActiveFilters={false}
-    iconSide="right"
     key="field_value_toggle_filter_item_1"
     noDivider={false}
     onClick={[Function]}
-    type="button"
     withNext={false}
   >
     Elasticsearch
@@ -70,28 +54,20 @@ exports[`TermToggleGroupFilter render - active negated 1`] = `
 Array [
   <EuiFilterButton
     aria-pressed={true}
-    color="text"
-    grow={true}
     hasActiveFilters={true}
-    iconSide="right"
     key="field_value_toggle_filter_item_0"
     noDivider={true}
     onClick={[Function]}
-    type="button"
     withNext={true}
   >
     Not Kibana
   </EuiFilterButton>,
   <EuiFilterButton
     aria-pressed={false}
-    color="text"
-    grow={true}
     hasActiveFilters={false}
-    iconSide="right"
     key="field_value_toggle_filter_item_1"
     noDivider={false}
     onClick={[Function]}
-    type="button"
     withNext={false}
   >
     Elasticsearch
@@ -103,28 +79,20 @@ exports[`TermToggleGroupFilter render 1`] = `
 Array [
   <EuiFilterButton
     aria-pressed={false}
-    color="text"
-    grow={true}
     hasActiveFilters={false}
-    iconSide="right"
     key="field_value_toggle_filter_item_0"
     noDivider={true}
     onClick={[Function]}
-    type="button"
     withNext={true}
   >
     Kibana
   </EuiFilterButton>,
   <EuiFilterButton
     aria-pressed={false}
-    color="text"
-    grow={true}
     hasActiveFilters={false}
-    iconSide="right"
     key="field_value_toggle_filter_item_1"
     noDivider={false}
     onClick={[Function]}
-    type="button"
     withNext={false}
   >
     Elasticsearch
diff --git a/src/components/search_bar/filters/__snapshots__/is_filter.test.js.snap b/src/components/search_bar/filters/__snapshots__/is_filter.test.js.snap
index 8a7c1e570d3..6c657c5c7f0 100644
--- a/src/components/search_bar/filters/__snapshots__/is_filter.test.js.snap
+++ b/src/components/search_bar/filters/__snapshots__/is_filter.test.js.snap
@@ -3,12 +3,8 @@
 exports[`IsFilter render 1`] = `
 <EuiFilterButton
   aria-pressed={false}
-  color="text"
-  grow={true}
   hasActiveFilters={false}
-  iconSide="right"
   onClick={[Function]}
-  type="button"
 >
   Open
 </EuiFilterButton>