diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3df8601fb3c..029af6b0c44 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `7.2.0`.
+- Converted `EuiToggle` to TypeScript ([#1570](https://github.com/elastic/eui/pull/1570))
+- Added type definitions for `EuiButtonGroup`,`EuiButtonToggle`, `EuiFilterButton`, `EuiFilterGroup`, and `EuiFilterSelectItem` ([#1570](https://github.com/elastic/eui/pull/1570))
 
 ## [`7.2.0`](https://github.com/elastic/eui/tree/v7.2.0)
 
diff --git a/src/components/button/button_toggle/button_toggle.js b/src/components/button/button_toggle/button_toggle.js
index 76689a28dfd..544a5862c3d 100644
--- a/src/components/button/button_toggle/button_toggle.js
+++ b/src/components/button/button_toggle/button_toggle.js
@@ -91,6 +91,11 @@ EuiButtonToggle.propTypes = {
    */
   isEmpty: PropTypes.bool,
 
+  /**
+   * Initial state of the toggle
+   */
+  isSelected: PropTypes.bool,
+
   /**
    * Classnames to add to `EuiToggle` instead of the `EuiButton`
    */
diff --git a/src/components/button/index.d.ts b/src/components/button/index.d.ts
index e0b9bcb9dc2..900eb895eda 100644
--- a/src/components/button/index.d.ts
+++ b/src/components/button/index.d.ts
@@ -1,7 +1,8 @@
 import { CommonProps } from '../common';
 import { IconType, IconSize } from '../icon'
+import { ToggleType } from '../toggle'
 
-import { SFC, ButtonHTMLAttributes, AnchorHTMLAttributes, MouseEventHandler, HTMLAttributes } from 'react';
+import { SFC, ButtonHTMLAttributes, AnchorHTMLAttributes, ChangeEventHandler, MouseEventHandler, HTMLAttributes } from 'react';
 
 declare module '@elastic/eui' {
   type EuiButtonPropsForButtonOrLink<Props> = (
@@ -67,7 +68,7 @@ declare module '@elastic/eui' {
   >;
 
   /**
-   * button icon type defs
+   * empty button type defs
    *
    * @see './button_empty/button_empty.js'
    */
@@ -82,7 +83,7 @@ declare module '@elastic/eui' {
   export type EmptyButtonSizes = 'xs' | 's' | 'l';
   export type EmptyButtonFlush = 'left' | 'right';
 
-  export interface EuiButtonEmptyProps {
+  export type EuiButtonEmptyProps = EuiButtonPropsForButtonOrLink<CommonProps & {
     iconType?: IconType;
     iconSide?: EmptyButtonIconSide;
     color?: EmptyButtonColor;
@@ -92,9 +93,59 @@ declare module '@elastic/eui' {
     isDisabled?: boolean;
     contentProps?: HTMLAttributes<HTMLSpanElement>;
     textProps?: HTMLAttributes<HTMLSpanElement>;
+  }>
+
+  export const EuiButtonEmpty: SFC<EuiButtonEmptyProps>;
+
+  /**
+   * button toggle type defs
+   *
+   * @see './button_toggle/button_toggle.js'
+   */
+
+  export type EuiButtonToggleProps = EuiButtonProps & {
+      isEmpty?: boolean;
+      isIconOnly?: boolean;
+      isSelected?: boolean;
+      label: string;
+      toggleClassName?: string;
+      type?: ToggleType;
+    }
+
+  export const EuiButtonToggle: SFC<
+    EuiButtonPropsForButtonOrLink<CommonProps & EuiButtonToggleProps>
+  >;
+
+  /**
+   * button group type defs
+   *
+   * @see './button_group/button_group.js'
+   */
+
+  export type EuiButtonGroupIdToSelectedMap = { [id: string]: boolean };
+  export type GroupButtonSize = 's' | 'm';
+
+  export interface EuiButtonGroupOption {
+    id: string,
+    label: string,
+    isDisabled?: boolean,
   }
+  export interface EuiButtonGroupProps {
+      options: EuiButtonGroupOption[],
+      onChange: (id: string, value: any) => void;
+      buttonSize?: GroupButtonSize;
+      isDisabled?: boolean,
+      isFullWidth?: boolean;
+      isIconOnly?: boolean;
+      idSelected?: string;
+      idToSelectedMap?: EuiButtonGroupIdToSelectedMap;
+      legend?: string,
+      color?: ButtonColor,
+      type?: ToggleType,
+      name?: string;
+    }
 
-  export const EuiButtonEmpty: SFC<
-    EuiButtonPropsForButtonOrLink<CommonProps & EuiButtonEmptyProps>
+  export const EuiButtonGroup: SFC<
+    HTMLAttributes<HTMLDivElement> & EuiButtonGroupProps
   >;
 }
diff --git a/src/components/filter_group/index.d.ts b/src/components/filter_group/index.d.ts
new file mode 100644
index 00000000000..b9de2f21dfa
--- /dev/null
+++ b/src/components/filter_group/index.d.ts
@@ -0,0 +1,38 @@
+import { CommonProps } from '../common';
+import { IconType, IconSize } from '../icon'
+/// <reference path="../button/index.d.ts" />
+
+import { SFC, ButtonHTMLAttributes, HTMLAttributes } from 'react';
+
+declare module '@elastic/eui' {
+  /**
+   * Filter button type defs
+   *
+   * @see './filter_button.js'
+   */
+
+  export const EuiFilterButton: SFC<EuiButtonEmptyProps>;
+
+  /**
+   * Filter group type defs
+   *
+   * @see './filter_group.js'
+   */
+
+  export const EuiFilterGroup: SFC<CommonProps & HTMLAttributes<HTMLDivElement>>;
+
+  /**
+   * Filter select item type defs
+   *
+   * @see './filter_select_item.js'
+   */
+
+  export type FilterChecked = 'on' | 'off';
+  export interface EuiFilterSelectItemProps {
+    checked?: FilterChecked
+  }
+
+  export const EuiFilterSelectItem: SFC<CommonProps &
+    ButtonHTMLAttributes<HTMLButtonElement> & EuiFilterSelectItemProps
+  >;
+}
diff --git a/src/components/index.d.ts b/src/components/index.d.ts
index 15e5b16f865..94628eeb8fd 100644
--- a/src/components/index.d.ts
+++ b/src/components/index.d.ts
@@ -10,6 +10,7 @@
 /// <reference path="./description_list/index.d.ts" />
 /// <reference path="./empty_prompt/index.d.ts" />
 /// <reference path="./error_boundary/index.d.ts" />
+/// <reference path="./filter_group/index.d.ts" />
 /// <reference path="./flex/index.d.ts" />
 /// <reference path="./flyout/index.d.ts" />
 /// <reference path="./focus_trap/index.d.ts" />
diff --git a/src/components/toggle/__snapshots__/toggle.test.js.snap b/src/components/toggle/__snapshots__/toggle.test.tsx.snap
similarity index 100%
rename from src/components/toggle/__snapshots__/toggle.test.js.snap
rename to src/components/toggle/__snapshots__/toggle.test.tsx.snap
diff --git a/src/components/toggle/index.js b/src/components/toggle/index.js
deleted file mode 100644
index 9e66954edbe..00000000000
--- a/src/components/toggle/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export {
-  EuiToggle,
-  TYPES as TOGGLE_TYPES,
-} from './toggle';
diff --git a/src/components/toggle/index.ts b/src/components/toggle/index.ts
new file mode 100644
index 00000000000..811bbcc2eab
--- /dev/null
+++ b/src/components/toggle/index.ts
@@ -0,0 +1 @@
+export { EuiToggle, ToggleType, TYPES as TOGGLE_TYPES } from './toggle';
diff --git a/src/components/toggle/toggle.js b/src/components/toggle/toggle.js
deleted file mode 100644
index 4323f051550..00000000000
--- a/src/components/toggle/toggle.js
+++ /dev/null
@@ -1,102 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-const typeToInputTypeMap = {
-  'single': 'radio',
-  'multi': 'checkbox',
-};
-
-export const TYPES = Object.keys(typeToInputTypeMap);
-
-export const EuiToggle = ({
-  id,
-  className,
-  checked,
-  children,
-  inputClassName,
-  isDisabled,
-  label,
-  name,
-  onChange,
-  title,
-  type,
-  value,
-  ...rest,
-}) => {
-  const classes = classNames(
-    'euiToggle',
-    {
-      'euiToggle--checked': checked,
-    },
-    className
-  );
-
-  const inputClasses = classNames(
-    'euiToggle__input',
-    inputClassName,
-  );
-
-  return (
-    <div
-      className={classes}
-      {...rest}
-    >
-      <input
-        id={id}
-        className={inputClasses}
-        aria-label={label}
-        checked={checked}
-        disabled={isDisabled}
-        name={name}
-        onChange={onChange}
-        title={title}
-        type={typeToInputTypeMap[type]}
-        value={value}
-      />
-
-      {children}
-
-    </div>
-  );
-};
-
-EuiToggle.propTypes = {
-  id: PropTypes.string,
-
-  /**
-   * Initial state of the toggle
-   */
-  checked: PropTypes.bool,
-
-  /**
-   * For handling the onChange event of the input
-   */
-  onChange: PropTypes.func,
-  isDisabled: PropTypes.bool,
-
-  /**
-   * Use your own logic to pass the child you want according to
-   * the checked state of your component
-   */
-  children: PropTypes.node,
-
-  /**
-   * Determines the input type based on multiple or single item(s)
-   */
-  type: PropTypes.oneOf(TYPES),
-
-  /**
-   * What would typically be the input's label. Required for accessibility.
-   */
-  label: PropTypes.string.isRequired,
-
-  /**
-   * Additional classNames for the input itself
-   */
-  inputClassName: PropTypes.string,
-};
-
-EuiToggle.defaultProps = {
-  type: 'multi',
-};
diff --git a/src/components/toggle/toggle.test.js b/src/components/toggle/toggle.test.tsx
similarity index 72%
rename from src/components/toggle/toggle.test.js
rename to src/components/toggle/toggle.test.tsx
index 89e78c24d4a..95b5f4ef27c 100644
--- a/src/components/toggle/toggle.test.js
+++ b/src/components/toggle/toggle.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from 'enzyme';
-import { requiredProps } from '../../test';
+import { requiredProps } from '../../test/required_props';
 
 import { EuiToggle } from './toggle';
 
@@ -10,7 +10,6 @@ describe('EuiToggle', () => {
       <EuiToggle label="Is toggle on?" {...requiredProps} />
     );
 
-    expect(component)
-      .toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 });
diff --git a/src/components/toggle/toggle.tsx b/src/components/toggle/toggle.tsx
new file mode 100644
index 00000000000..78c24452cd3
--- /dev/null
+++ b/src/components/toggle/toggle.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import classNames from 'classnames';
+import { ChangeEventHandler, HTMLAttributes } from 'react';
+import { CommonProps } from '../common';
+
+const typeToInputTypeMap = {
+  single: 'radio',
+  multi: 'checkbox',
+};
+
+export const TYPES = Object.keys(typeToInputTypeMap);
+
+export type ToggleType = keyof typeof typeToInputTypeMap;
+
+export type EuiToggleProps = HTMLAttributes<HTMLDivElement> &
+  CommonProps & {
+    id?: string;
+    /**
+     * Initial state of the toggle
+     */
+    checked?: boolean;
+    /**
+     * For handling the onChange event of the input
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    isDisabled?: boolean;
+    name?: string;
+    /**
+     * Determines the input type based on multiple or single item(s)
+     */
+    type?: ToggleType;
+    /**
+     * What would typically be the input's label. Required for accessibility.
+     */
+    label: string;
+    /**
+     * Additional classNames for the input itself
+     */
+    inputClassName?: string;
+    value?: string | number;
+  };
+
+export const EuiToggle: React.SFC<EuiToggleProps> = ({
+  id,
+  className,
+  checked,
+  children,
+  inputClassName,
+  isDisabled,
+  label,
+  name,
+  onChange,
+  title,
+  type,
+  value,
+  ...rest
+}) => {
+  const classes = classNames(
+    'euiToggle',
+    { 'euiToggle--checked': checked },
+    className
+  );
+
+  const inputClasses = classNames('euiToggle__input', inputClassName);
+
+  return (
+    <div className={classes} {...rest}>
+      <input
+        id={id}
+        className={inputClasses}
+        aria-label={label}
+        checked={checked}
+        disabled={isDisabled}
+        name={name}
+        onChange={onChange}
+        title={title}
+        type={type ? typeToInputTypeMap[type] : undefined}
+        value={value}
+      />
+
+      {children}
+    </div>
+  );
+};
+
+EuiToggle.defaultProps = {
+  type: 'multi',
+};