From 538d1d98459f5425cdc303e6a3ad2e2e481e6ae0 Mon Sep 17 00:00:00 2001
From: Matt <github@nospam.33m.co>
Date: Sun, 27 Sep 2020 23:45:20 +0100
Subject: [PATCH 1/6] [ToggleButtons] Move from lab to core

---
 docs/src/pages.js                             |   4 +-
 .../toggle-button/CustomizedDividers.js       |   4 +-
 .../toggle-button/CustomizedDividers.tsx      |   4 +-
 .../toggle-button/StandaloneToggleButton.js   |   2 +-
 .../toggle-button/StandaloneToggleButton.tsx  |   2 +-
 .../toggle-button/ToggleButtonNotEmpty.js     |   4 +-
 .../toggle-button/ToggleButtonNotEmpty.tsx    |   4 +-
 .../toggle-button/ToggleButtonSizes.js        |   4 +-
 .../toggle-button/ToggleButtonSizes.tsx       |   4 +-
 .../components/toggle-button/ToggleButtons.js |   4 +-
 .../toggle-button/ToggleButtons.tsx           |   4 +-
 .../toggle-button/ToggleButtonsMultiple.js    |   4 +-
 .../toggle-button/ToggleButtonsMultiple.tsx   |   4 +-
 .../toggle-button/VerticalToggleButtons.js    |   4 +-
 .../toggle-button/VerticalToggleButtons.tsx   |   4 +-
 .../components/toggle-button/toggle-button.md |  19 +-
 .../pages/guides/migration-v4/migration-v4.md |  11 +
 .../src/ToggleButton/ToggleButton.d.ts        |  81 +------
 .../src/ToggleButton/ToggleButton.js          | 199 ++----------------
 .../ToggleButtonGroup/ToggleButtonGroup.d.ts  |  72 +------
 .../src/themeAugmentation/components.d.ts     |   8 -
 .../src/ToggleButton/ToggleButton.d.ts        |  79 +++++++
 .../src/ToggleButton/ToggleButton.js          | 177 ++++++++++++++++
 .../src/ToggleButton/ToggleButton.test.js     |   0
 .../material-ui/src/ToggleButton/index.d.ts   |   2 +
 .../material-ui/src/ToggleButton/index.js     |   1 +
 .../ToggleButtonGroup/ToggleButtonGroup.d.ts  |  70 ++++++
 .../ToggleButtonGroup/ToggleButtonGroup.js    | 133 ++++++++++++
 .../ToggleButtonGroup.test.js                 |   0
 .../src/ToggleButtonGroup/index.d.ts          |   2 +
 .../src/ToggleButtonGroup/index.js            |   1 +
 .../src/ToggleButtonGroup/isValueSelected.js  |   0
 .../ToggleButtonGroup/isValueSelected.test.js |   0
 packages/material-ui/src/index.d.ts           |   6 +
 packages/material-ui/src/index.js             |   6 +
 .../material-ui/src/styles/overrides.d.ts     |   4 +
 packages/material-ui/src/styles/props.d.ts    |   4 +
 37 files changed, 563 insertions(+), 368 deletions(-)
 create mode 100644 packages/material-ui/src/ToggleButton/ToggleButton.d.ts
 create mode 100644 packages/material-ui/src/ToggleButton/ToggleButton.js
 rename packages/{material-ui-lab => material-ui}/src/ToggleButton/ToggleButton.test.js (100%)
 create mode 100644 packages/material-ui/src/ToggleButton/index.d.ts
 create mode 100644 packages/material-ui/src/ToggleButton/index.js
 create mode 100644 packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.d.ts
 create mode 100644 packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.js
 rename packages/{material-ui-lab => material-ui}/src/ToggleButtonGroup/ToggleButtonGroup.test.js (100%)
 create mode 100644 packages/material-ui/src/ToggleButtonGroup/index.d.ts
 create mode 100644 packages/material-ui/src/ToggleButtonGroup/index.js
 rename packages/{material-ui-lab => material-ui}/src/ToggleButtonGroup/isValueSelected.js (100%)
 rename packages/{material-ui-lab => material-ui}/src/ToggleButtonGroup/isValueSelected.test.js (100%)

diff --git a/docs/src/pages.js b/docs/src/pages.js
index 29437f9601f95f..3f37e8278d0135 100644
--- a/docs/src/pages.js
+++ b/docs/src/pages.js
@@ -39,12 +39,13 @@ const pages = [
           { pathname: '/components/floating-action-button' },
           { pathname: '/components/pickers', title: 'Date / Time' },
           { pathname: '/components/radio-buttons' },
+          { pathname: '/components/rating' },
           { pathname: '/components/selects' },
           { pathname: '/components/slider' },
-          { pathname: '/components/rating' },
           { pathname: '/components/switches' },
           { pathname: '/components/text-fields' },
           { pathname: '/components/transfer-list' },
+          { pathname: '/components/toggle-button' },
         ],
       },
       {
@@ -126,7 +127,6 @@ const pages = [
           { pathname: '/components/rating' },
           { pathname: '/components/slider-styled' },
           { pathname: '/components/timeline' },
-          { pathname: '/components/toggle-button' },
           { pathname: '/components/trap-focus' },
           { pathname: '/components/tree-view' },
         ],
diff --git a/docs/src/pages/components/toggle-button/CustomizedDividers.js b/docs/src/pages/components/toggle-button/CustomizedDividers.js
index 0cfd61fbf447af..7ce31a2a113613 100644
--- a/docs/src/pages/components/toggle-button/CustomizedDividers.js
+++ b/docs/src/pages/components/toggle-button/CustomizedDividers.js
@@ -11,8 +11,8 @@ import FormatColorFillIcon from '@material-ui/icons/FormatColorFill';
 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
 import Divider from '@material-ui/core/Divider';
 import Paper from '@material-ui/core/Paper';
-import ToggleButton from '@material-ui/lab/ToggleButton';
-import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+import ToggleButton from '@material-ui/core/ToggleButton';
+import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup';
 
 const useStyles = makeStyles((theme) => ({
   paper: {
diff --git a/docs/src/pages/components/toggle-button/CustomizedDividers.tsx b/docs/src/pages/components/toggle-button/CustomizedDividers.tsx
index 7ad323c0b264d5..618b77b031c2da 100644
--- a/docs/src/pages/components/toggle-button/CustomizedDividers.tsx
+++ b/docs/src/pages/components/toggle-button/CustomizedDividers.tsx
@@ -16,8 +16,8 @@ import FormatColorFillIcon from '@material-ui/icons/FormatColorFill';
 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
 import Divider from '@material-ui/core/Divider';
 import Paper from '@material-ui/core/Paper';
-import ToggleButton from '@material-ui/lab/ToggleButton';
-import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+import ToggleButton from '@material-ui/core/ToggleButton';
+import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
diff --git a/docs/src/pages/components/toggle-button/StandaloneToggleButton.js b/docs/src/pages/components/toggle-button/StandaloneToggleButton.js
index b13824454b869f..a06bba21db07b5 100644
--- a/docs/src/pages/components/toggle-button/StandaloneToggleButton.js
+++ b/docs/src/pages/components/toggle-button/StandaloneToggleButton.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import CheckIcon from '@material-ui/icons/Check';
-import ToggleButton from '@material-ui/lab/ToggleButton';
+import ToggleButton from '@material-ui/core/ToggleButton';
 
 export default function StandaloneToggleButton() {
   const [selected, setSelected] = React.useState(false);
diff --git a/docs/src/pages/components/toggle-button/StandaloneToggleButton.tsx b/docs/src/pages/components/toggle-button/StandaloneToggleButton.tsx
index b13824454b869f..a06bba21db07b5 100644
--- a/docs/src/pages/components/toggle-button/StandaloneToggleButton.tsx
+++ b/docs/src/pages/components/toggle-button/StandaloneToggleButton.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import CheckIcon from '@material-ui/icons/Check';
-import ToggleButton from '@material-ui/lab/ToggleButton';
+import ToggleButton from '@material-ui/core/ToggleButton';
 
 export default function StandaloneToggleButton() {
   const [selected, setSelected] = React.useState(false);
diff --git a/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.js b/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.js
index ce70d7d0a705d3..735ab642d64a4b 100644
--- a/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.js
+++ b/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.js
@@ -8,8 +8,8 @@ import LaptopIcon from '@material-ui/icons/Laptop';
 import TvIcon from '@material-ui/icons/Tv';
 import PhoneAndroidIcon from '@material-ui/icons/PhoneAndroid';
 import Grid from '@material-ui/core/Grid';
-import ToggleButton from '@material-ui/lab/ToggleButton';
-import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+import ToggleButton from '@material-ui/core/ToggleButton';
+import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup';
 
 const useStyles = makeStyles((theme) => ({
   toggleContainer: {
diff --git a/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.tsx b/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.tsx
index e443e6daafd5a4..4737884de46abc 100644
--- a/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.tsx
+++ b/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.tsx
@@ -8,8 +8,8 @@ import LaptopIcon from '@material-ui/icons/Laptop';
 import TvIcon from '@material-ui/icons/Tv';
 import PhoneAndroidIcon from '@material-ui/icons/PhoneAndroid';
 import Grid from '@material-ui/core/Grid';
-import ToggleButton from '@material-ui/lab/ToggleButton';
-import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+import ToggleButton from '@material-ui/core/ToggleButton';
+import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup';
 
 const useStyles = makeStyles((theme) => ({
   toggleContainer: {
diff --git a/docs/src/pages/components/toggle-button/ToggleButtonSizes.js b/docs/src/pages/components/toggle-button/ToggleButtonSizes.js
index 9eb2c14cc0bb5e..54f68830dac12d 100644
--- a/docs/src/pages/components/toggle-button/ToggleButtonSizes.js
+++ b/docs/src/pages/components/toggle-button/ToggleButtonSizes.js
@@ -4,8 +4,8 @@ import FormatAlignCenterIcon from '@material-ui/icons/FormatAlignCenter';
 import FormatAlignRightIcon from '@material-ui/icons/FormatAlignRight';
 import FormatAlignJustifyIcon from '@material-ui/icons/FormatAlignJustify';
 import Grid from '@material-ui/core/Grid';
-import ToggleButton from '@material-ui/lab/ToggleButton';
-import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+import ToggleButton from '@material-ui/core/ToggleButton';
+import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup';
 
 export default function ToggleButtonSizes() {
   const [alignment, setAlignment] = React.useState('left');
diff --git a/docs/src/pages/components/toggle-button/ToggleButtonSizes.tsx b/docs/src/pages/components/toggle-button/ToggleButtonSizes.tsx
index aa2d070b129967..2a722296c7dfcc 100644
--- a/docs/src/pages/components/toggle-button/ToggleButtonSizes.tsx
+++ b/docs/src/pages/components/toggle-button/ToggleButtonSizes.tsx
@@ -4,8 +4,8 @@ import FormatAlignCenterIcon from '@material-ui/icons/FormatAlignCenter';
 import FormatAlignRightIcon from '@material-ui/icons/FormatAlignRight';
 import FormatAlignJustifyIcon from '@material-ui/icons/FormatAlignJustify';
 import Grid from '@material-ui/core/Grid';
-import ToggleButton from '@material-ui/lab/ToggleButton';
-import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+import ToggleButton from '@material-ui/core/ToggleButton';
+import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup';
 
 export default function ToggleButtonSizes() {
   const [alignment, setAlignment] = React.useState('left');
diff --git a/docs/src/pages/components/toggle-button/ToggleButtons.js b/docs/src/pages/components/toggle-button/ToggleButtons.js
index 5a01beb879c412..5274a641fc5206 100644
--- a/docs/src/pages/components/toggle-button/ToggleButtons.js
+++ b/docs/src/pages/components/toggle-button/ToggleButtons.js
@@ -3,8 +3,8 @@ import FormatAlignLeftIcon from '@material-ui/icons/FormatAlignLeft';
 import FormatAlignCenterIcon from '@material-ui/icons/FormatAlignCenter';
 import FormatAlignRightIcon from '@material-ui/icons/FormatAlignRight';
 import FormatAlignJustifyIcon from '@material-ui/icons/FormatAlignJustify';
-import ToggleButton from '@material-ui/lab/ToggleButton';
-import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+import ToggleButton from '@material-ui/core/ToggleButton';
+import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup';
 
 export default function ToggleButtons() {
   const [alignment, setAlignment] = React.useState('left');
diff --git a/docs/src/pages/components/toggle-button/ToggleButtons.tsx b/docs/src/pages/components/toggle-button/ToggleButtons.tsx
index b61cbd9d55ce54..90db9fb370be21 100644
--- a/docs/src/pages/components/toggle-button/ToggleButtons.tsx
+++ b/docs/src/pages/components/toggle-button/ToggleButtons.tsx
@@ -3,8 +3,8 @@ import FormatAlignLeftIcon from '@material-ui/icons/FormatAlignLeft';
 import FormatAlignCenterIcon from '@material-ui/icons/FormatAlignCenter';
 import FormatAlignRightIcon from '@material-ui/icons/FormatAlignRight';
 import FormatAlignJustifyIcon from '@material-ui/icons/FormatAlignJustify';
-import ToggleButton from '@material-ui/lab/ToggleButton';
-import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+import ToggleButton from '@material-ui/core/ToggleButton';
+import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup';
 
 export default function ToggleButtons() {
   const [alignment, setAlignment] = React.useState<string | null>('left');
diff --git a/docs/src/pages/components/toggle-button/ToggleButtonsMultiple.js b/docs/src/pages/components/toggle-button/ToggleButtonsMultiple.js
index 0b148c171e2eb4..a1ac9866af7641 100644
--- a/docs/src/pages/components/toggle-button/ToggleButtonsMultiple.js
+++ b/docs/src/pages/components/toggle-button/ToggleButtonsMultiple.js
@@ -4,8 +4,8 @@ import FormatItalicIcon from '@material-ui/icons/FormatItalic';
 import FormatUnderlinedIcon from '@material-ui/icons/FormatUnderlined';
 import FormatColorFillIcon from '@material-ui/icons/FormatColorFill';
 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
-import ToggleButton from '@material-ui/lab/ToggleButton';
-import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+import ToggleButton from '@material-ui/core/ToggleButton';
+import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup';
 
 export default function ToggleButtonsMultiple() {
   const [formats, setFormats] = React.useState(() => ['bold', 'italic']);
diff --git a/docs/src/pages/components/toggle-button/ToggleButtonsMultiple.tsx b/docs/src/pages/components/toggle-button/ToggleButtonsMultiple.tsx
index 5f8127ca9871fb..7628e3b67116f2 100644
--- a/docs/src/pages/components/toggle-button/ToggleButtonsMultiple.tsx
+++ b/docs/src/pages/components/toggle-button/ToggleButtonsMultiple.tsx
@@ -4,8 +4,8 @@ import FormatItalicIcon from '@material-ui/icons/FormatItalic';
 import FormatUnderlinedIcon from '@material-ui/icons/FormatUnderlined';
 import FormatColorFillIcon from '@material-ui/icons/FormatColorFill';
 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
-import ToggleButton from '@material-ui/lab/ToggleButton';
-import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+import ToggleButton from '@material-ui/core/ToggleButton';
+import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup';
 
 export default function ToggleButtonsMultiple() {
   const [formats, setFormats] = React.useState(() => ['bold', 'italic']);
diff --git a/docs/src/pages/components/toggle-button/VerticalToggleButtons.js b/docs/src/pages/components/toggle-button/VerticalToggleButtons.js
index e716b6e20f1ccf..c5fff0ef3ce6ea 100644
--- a/docs/src/pages/components/toggle-button/VerticalToggleButtons.js
+++ b/docs/src/pages/components/toggle-button/VerticalToggleButtons.js
@@ -2,8 +2,8 @@ import * as React from 'react';
 import ViewListIcon from '@material-ui/icons/ViewList';
 import ViewModuleIcon from '@material-ui/icons/ViewModule';
 import ViewQuiltIcon from '@material-ui/icons/ViewQuilt';
-import ToggleButton from '@material-ui/lab/ToggleButton';
-import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+import ToggleButton from '@material-ui/core/ToggleButton';
+import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup';
 
 export default function VerticalToggleButtons() {
   const [view, setView] = React.useState('list');
diff --git a/docs/src/pages/components/toggle-button/VerticalToggleButtons.tsx b/docs/src/pages/components/toggle-button/VerticalToggleButtons.tsx
index e6b3d00c3f6cd1..18543f12422c94 100644
--- a/docs/src/pages/components/toggle-button/VerticalToggleButtons.tsx
+++ b/docs/src/pages/components/toggle-button/VerticalToggleButtons.tsx
@@ -2,8 +2,8 @@ import * as React from 'react';
 import ViewListIcon from '@material-ui/icons/ViewList';
 import ViewModuleIcon from '@material-ui/icons/ViewModule';
 import ViewQuiltIcon from '@material-ui/icons/ViewQuilt';
-import ToggleButton from '@material-ui/lab/ToggleButton';
-import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+import ToggleButton from '@material-ui/core/ToggleButton';
+import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup';
 
 export default function VerticalToggleButtons() {
   const [view, setView] = React.useState('list');
diff --git a/docs/src/pages/components/toggle-button/toggle-button.md b/docs/src/pages/components/toggle-button/toggle-button.md
index 1501dbc8d26b13..a378f14ded1621 100644
--- a/docs/src/pages/components/toggle-button/toggle-button.md
+++ b/docs/src/pages/components/toggle-button/toggle-button.md
@@ -3,7 +3,6 @@ title: Toggle Button React component
 components: ToggleButton, ToggleButtonGroup
 githubLabel: 'component: ToggleButton'
 materialDesign: https://material.io/components/buttons#toggle-button
-packageName: '@material-ui/lab'
 ---
 
 # Toggle Buttons
@@ -18,31 +17,31 @@ The `ToggleButtonGroup` controls the selected state of its child buttons when gi
 
 ## Exclusive selection
 
-Text justification toggle buttons present options for left, right, center, full, and justified text with only one item available for selection at a time.
-Selecting one option deselects any other.
+With exclusive selection, selecting one option deselects any other. In this example text justification toggle buttons present options for left, right, center, full, and justified text with only one item available for selection at a time.
 
 {{"demo": "pages/components/toggle-button/ToggleButtons.js"}}
 
 ## Multiple selection
 
-Logically-grouped options, like bold, italic, and underline, allow multiple options to be selected.
+Multiple selection allows for logically-grouped options, like bold, italic, and underline, to have multiple options selected.
 
 {{"demo": "pages/components/toggle-button/ToggleButtonsMultiple.js"}}
 
 ## Sizes
 
-Fancy larger or smaller buttons? Use the `size` prop.
+For larger or smaller buttons use the `size` prop.
 
 {{"demo": "pages/components/toggle-button/ToggleButtonSizes.js"}}
 
 ## Vertical buttons
 
+The buttons can be stacked vertically with the `orientation` prop set to "vertical".
+
 {{"demo": "pages/components/toggle-button/VerticalToggleButtons.js"}}
 
 ## Enforce value set
 
-If you want to enforce at least one button to be active, you can adapt your handleChange
-function.
+If you want to enforce that at least one button must be active, you can adapt your handleChange function.
 
 ```jsx
 const handleFormat = (event, newFormats) => {
@@ -73,5 +72,11 @@ Here is an example of customizing the component. You can learn more about this i
 
 ## Accessibility
 
+### ARIA
+
 - ToggleButtonGroup has `role="group"`. You should provide an accessible label with `aria-label="label"`, `aria-labelledby="id"` or `<label>`.
 - ToggleButton sets `aria-pressed="<bool>"` according to the button state. You should label each button with `aria-label`.
+
+### Keyboard
+
+At present, toggle buttons are in DOM order. Navigate between them with the tab key. The button behavior follows standard keyboard semantics.
diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md
index 8d93590997056e..c22ab8a1b6afc9 100644
--- a/docs/src/pages/guides/migration-v4/migration-v4.md
+++ b/docs/src/pages/guides/migration-v4/migration-v4.md
@@ -748,6 +748,17 @@ const theme = createMuitheme({
   +<TextareAutosize minRows={1}>
   ```
 
+### ToggleButton
+
+- Move the component from the lab to the core. The component is now stable.
+
+  ```diff
+  -import ToggleButton from '@material-ui/lab/ToggleButton';
+  -import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+  +import ToggleButton from '@material-ui/core/ToggleButton';
+  +import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup';
+  ```
+
 ### Typography
 
 - Replace the `srOnly` prop so as to not duplicate the capabilities of [System](https://material-ui.com/system/basics/):
diff --git a/packages/material-ui-lab/src/ToggleButton/ToggleButton.d.ts b/packages/material-ui-lab/src/ToggleButton/ToggleButton.d.ts
index 7e95759ffab0b4..7a6d30af1f8e93 100644
--- a/packages/material-ui-lab/src/ToggleButton/ToggleButton.d.ts
+++ b/packages/material-ui-lab/src/ToggleButton/ToggleButton.d.ts
@@ -1,79 +1,2 @@
-import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '@material-ui/core/ButtonBase';
-import { OverrideProps } from '@material-ui/core/OverridableComponent';
-
-export type ToggleButtonTypeMap<
-  P = {},
-  D extends React.ElementType = 'button'
-> = ExtendButtonBaseTypeMap<{
-  props: P & {
-    /**
-     * The content of the button.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: {
-      /** Styles applied to the root element. */
-      root?: string;
-      /** Pseudo-class applied to the root element if `disabled={true}`. */
-      disabled?: string;
-      /** Pseudo-class applied to the root element if `selected={true}`. */
-      selected?: string;
-      /** Styles applied to the `label` wrapper element. */
-      label?: string;
-      /** Styles applied to the root element if `size="small"`. */
-      sizeSmall?: string;
-      /** Styles applied to the root element if `size="large"`. */
-      sizeLarge?: string;
-    };
-    /**
-     * If `true`, the button will be disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * If `true`, the  keyboard focus ripple will be disabled.
-     * @default false
-     */
-    disableFocusRipple?: boolean;
-    /**
-     * If `true`, the button will be rendered in an active state.
-     */
-    selected?: boolean;
-    /**
-     * The size of the button.
-     * The prop defaults to the value inherited from the parent ToggleButtonGroup component.
-     * @default 'medium'
-     */
-    size?: 'small' | 'medium' | 'large';
-    /**
-     * The value to associate with the button when selected in a
-     * ToggleButtonGroup.
-     */
-    value: NonNullable<unknown>;
-  };
-  defaultComponent: D;
-}>;
-
-/**
- *
- * Demos:
- *
- * - [Toggle Button](https://material-ui.com/components/toggle-button/)
- *
- * API:
- *
- * - [ToggleButton API](https://material-ui.com/api/toggle-button/)
- * - inherits [ButtonBase API](https://material-ui.com/api/button-base/)
- */
-declare const ToggleButton: ExtendButtonBase<ToggleButtonTypeMap>;
-
-export type ToggleButtonProps<
-  D extends React.ElementType = ToggleButtonTypeMap['defaultComponent'],
-  P = {}
-> = OverrideProps<ToggleButtonTypeMap<P, D>, D>;
-
-export type ToggleButtonClassKey = keyof NonNullable<ToggleButtonTypeMap['props']['classes']>;
-
-export default ToggleButton;
+export { default } from '@material-ui/core/ToggleButton';
+export * from '@material-ui/core/ToggleButton';
diff --git a/packages/material-ui-lab/src/ToggleButton/ToggleButton.js b/packages/material-ui-lab/src/ToggleButton/ToggleButton.js
index d40a2fdd8d6717..abc4962af2c324 100644
--- a/packages/material-ui-lab/src/ToggleButton/ToggleButton.js
+++ b/packages/material-ui-lab/src/ToggleButton/ToggleButton.js
@@ -1,177 +1,24 @@
-// @inheritedComponent ButtonBase
-
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import { fade, withStyles } from '@material-ui/core/styles';
-import ButtonBase from '@material-ui/core/ButtonBase';
-import { capitalize } from '@material-ui/core/utils';
-
-export const styles = (theme) => ({
-  /* Styles applied to the root element. */
-  root: {
-    ...theme.typography.button,
-    borderRadius: theme.shape.borderRadius,
-    padding: 11,
-    border: `1px solid ${fade(theme.palette.action.active, 0.12)}`,
-    color: fade(theme.palette.action.active, 0.38),
-    '&$selected': {
-      color: theme.palette.action.active,
-      backgroundColor: fade(theme.palette.action.active, 0.12),
-      '&:hover': {
-        backgroundColor: fade(theme.palette.action.active, 0.15),
-      },
-      '& + &': {
-        borderLeft: 0,
-        marginLeft: 0,
-      },
-    },
-    '&$disabled': {
-      color: fade(theme.palette.action.disabled, 0.12),
-    },
-    '&:hover': {
-      textDecoration: 'none',
-      // Reset on mouse devices
-      backgroundColor: fade(theme.palette.text.primary, 0.05),
-      '@media (hover: none)': {
-        backgroundColor: 'transparent',
-      },
-    },
-  },
-  /* Pseudo-class applied to the root element if `disabled={true}`. */
-  disabled: {},
-  /* Pseudo-class applied to the root element if `selected={true}`. */
-  selected: {},
-  /* Styles applied to the `label` wrapper element. */
-  label: {
-    width: '100%', // Ensure the correct width for iOS Safari
-    display: 'inherit',
-    alignItems: 'inherit',
-    justifyContent: 'inherit',
-  },
-  /* Styles applied to the root element if `size="small"`. */
-  sizeSmall: {
-    padding: 7,
-    fontSize: theme.typography.pxToRem(13),
-  },
-  /* Styles applied to the root element if `size="large"`. */
-  sizeLarge: {
-    padding: 15,
-    fontSize: theme.typography.pxToRem(15),
-  },
+import React from 'react';
+import ToggleButton from '@material-ui/core/ToggleButton';
+
+let warnedOnce = false;
+
+/**
+ * @ignore - do not document.
+ */
+export default React.forwardRef(function DeprecatedToggleButton(props, ref) {
+  if (!warnedOnce) {
+    console.warn(
+      [
+        'Material-UI: The ToggleButton component was moved from the lab to the core.',
+        '',
+        "You should use `import { ToggleButton } from '@material-ui/core'`",
+        "or `import ToggleButton from '@material-ui/core/ToggleButton'`",
+      ].join('\n'),
+    );
+
+    warnedOnce = true;
+  }
+
+  return <ToggleButton ref={ref} {...props} />;
 });
-
-const ToggleButton = React.forwardRef(function ToggleButton(props, ref) {
-  const {
-    children,
-    classes,
-    className,
-    disabled = false,
-    disableFocusRipple = false,
-    onChange,
-    onClick,
-    selected,
-    size = 'medium',
-    value,
-    ...other
-  } = props;
-
-  const handleChange = (event) => {
-    if (onClick) {
-      onClick(event, value);
-      if (event.isDefaultPrevented()) {
-        return;
-      }
-    }
-
-    if (onChange) {
-      onChange(event, value);
-    }
-  };
-
-  return (
-    <ButtonBase
-      className={clsx(
-        classes.root,
-        {
-          [classes.disabled]: disabled,
-          [classes.selected]: selected,
-          [classes[`size${capitalize(size)}`]]: size !== 'medium',
-        },
-        className,
-      )}
-      disabled={disabled}
-      focusRipple={!disableFocusRipple}
-      ref={ref}
-      onClick={handleChange}
-      onChange={onChange}
-      value={value}
-      aria-pressed={selected}
-      {...other}
-    >
-      <span className={classes.label}>{children}</span>
-    </ButtonBase>
-  );
-});
-
-ToggleButton.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
-  /**
-   * The content of the button.
-   */
-  children: PropTypes.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * If `true`, the button will be disabled.
-   * @default false
-   */
-  disabled: PropTypes.bool,
-  /**
-   * If `true`, the  keyboard focus ripple will be disabled.
-   * @default false
-   */
-  disableFocusRipple: PropTypes.bool,
-  /**
-   * If `true`, the ripple effect will be disabled.
-   *
-   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
-   * to highlight the element by applying separate styles with the `focusVisibleClassName`.
-   * @default false
-   */
-  disableRipple: PropTypes.bool,
-  /**
-   * @ignore
-   */
-  onChange: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onClick: PropTypes.func,
-  /**
-   * If `true`, the button will be rendered in an active state.
-   */
-  selected: PropTypes.bool,
-  /**
-   * The size of the button.
-   * The prop defaults to the value inherited from the parent ToggleButtonGroup component.
-   * @default 'medium'
-   */
-  size: PropTypes.oneOf(['large', 'medium', 'small']),
-  /**
-   * The value to associate with the button when selected in a
-   * ToggleButtonGroup.
-   */
-  value: PropTypes.any.isRequired,
-};
-
-export default withStyles(styles, { name: 'MuiToggleButton' })(ToggleButton);
diff --git a/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.d.ts b/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.d.ts
index 75eafcb3bfb4b9..f34a648b73031c 100644
--- a/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.d.ts
+++ b/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.d.ts
@@ -1,70 +1,2 @@
-import * as React from 'react';
-import { InternalStandardProps as StandardProps } from '@material-ui/core';
-
-export interface ToggleButtonGroupProps
-  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'children'> {
-  /**
-   * The content of the button.
-   */
-  children?: React.ReactNode;
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes?: {
-    /** Styles applied to the root element. */
-    root?: string;
-    /** Styles applied to the root element if `orientation="vertical"`. */
-    vertical?: string;
-    /** Styles applied to the children. */
-    grouped?: string;
-    /** Styles applied to the children if `orientation="horizontal"`. */
-    groupedHorizontal?: string;
-    /** Styles applied to the children if `orientation="vertical"`. */
-    groupedVertical?: string;
-  };
-  /**
-   * If `true`, only allow one of the child ToggleButton values to be selected.
-   * @default false
-   */
-  exclusive?: boolean;
-  /**
-   * Callback fired when the value changes.
-   *
-   * @param {object} event The event source of the callback.
-   * @param {any} value of the selected buttons. When `exclusive` is true
-   * this is a single value; when false an array of selected values. If no value
-   * is selected and `exclusive` is true the value is null; when false an empty array.
-   */
-  onChange?: (event: React.MouseEvent<HTMLElement>, value: any) => void;
-  /**
-   * The group orientation (layout flow direction).
-   * @default 'horizontal'
-   */
-  orientation?: 'horizontal' | 'vertical';
-  /**
-   * The size of the buttons.
-   * @default 'medium'
-   */
-  size?: 'small' | 'medium' | 'large';
-  /**
-   * The currently selected value within the group or an array of selected
-   * values when `exclusive` is false.
-   *
-   * The value must have reference equality with the option in order to be selected.
-   */
-  value?: any;
-}
-
-export type ToggleButtonGroupClassKey = keyof NonNullable<ToggleButtonGroupProps['classes']>;
-
-/**
- *
- * Demos:
- *
- * - [Toggle Button](https://material-ui.com/components/toggle-button/)
- *
- * API:
- *
- * - [ToggleButtonGroup API](https://material-ui.com/api/toggle-button-group/)
- */
-export default function ToggleButtonGroup(props: ToggleButtonGroupProps): JSX.Element;
+export { default } from '@material-ui/core/ToggleButtonGroup';
+export * from '@material-ui/core/ToggleButtonGroup';
diff --git a/packages/material-ui-lab/src/themeAugmentation/components.d.ts b/packages/material-ui-lab/src/themeAugmentation/components.d.ts
index 428216733a6154..f99f720861e1a0 100644
--- a/packages/material-ui-lab/src/themeAugmentation/components.d.ts
+++ b/packages/material-ui-lab/src/themeAugmentation/components.d.ts
@@ -56,14 +56,6 @@ export interface LabComponents {
     defaultProps?: ComponentsProps['MuiTimelineSeparator'];
     styleOverrides?: ComponentsOverrides['MuiTimelineSeparator'];
   };
-  MuiToggleButton?: {
-    defaultProps?: ComponentsProps['MuiToggleButton'];
-    styleOverrides?: ComponentsOverrides['MuiToggleButton'];
-  };
-  MuiToggleButtonGroup?: {
-    defaultProps?: ComponentsProps['MuiToggleButtonGroup'];
-    styleOverrides?: ComponentsOverrides['MuiToggleButtonGroup'];
-  };
   MuiTreeItem?: {
     defaultProps?: ComponentsProps['MuiTreeItem'];
     styleOverrides?: ComponentsOverrides['MuiTreeItem'];
diff --git a/packages/material-ui/src/ToggleButton/ToggleButton.d.ts b/packages/material-ui/src/ToggleButton/ToggleButton.d.ts
new file mode 100644
index 00000000000000..7e95759ffab0b4
--- /dev/null
+++ b/packages/material-ui/src/ToggleButton/ToggleButton.d.ts
@@ -0,0 +1,79 @@
+import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '@material-ui/core/ButtonBase';
+import { OverrideProps } from '@material-ui/core/OverridableComponent';
+
+export type ToggleButtonTypeMap<
+  P = {},
+  D extends React.ElementType = 'button'
+> = ExtendButtonBaseTypeMap<{
+  props: P & {
+    /**
+     * The content of the button.
+     */
+    children?: React.ReactNode;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: {
+      /** Styles applied to the root element. */
+      root?: string;
+      /** Pseudo-class applied to the root element if `disabled={true}`. */
+      disabled?: string;
+      /** Pseudo-class applied to the root element if `selected={true}`. */
+      selected?: string;
+      /** Styles applied to the `label` wrapper element. */
+      label?: string;
+      /** Styles applied to the root element if `size="small"`. */
+      sizeSmall?: string;
+      /** Styles applied to the root element if `size="large"`. */
+      sizeLarge?: string;
+    };
+    /**
+     * If `true`, the button will be disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, the  keyboard focus ripple will be disabled.
+     * @default false
+     */
+    disableFocusRipple?: boolean;
+    /**
+     * If `true`, the button will be rendered in an active state.
+     */
+    selected?: boolean;
+    /**
+     * The size of the button.
+     * The prop defaults to the value inherited from the parent ToggleButtonGroup component.
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * The value to associate with the button when selected in a
+     * ToggleButtonGroup.
+     */
+    value: NonNullable<unknown>;
+  };
+  defaultComponent: D;
+}>;
+
+/**
+ *
+ * Demos:
+ *
+ * - [Toggle Button](https://material-ui.com/components/toggle-button/)
+ *
+ * API:
+ *
+ * - [ToggleButton API](https://material-ui.com/api/toggle-button/)
+ * - inherits [ButtonBase API](https://material-ui.com/api/button-base/)
+ */
+declare const ToggleButton: ExtendButtonBase<ToggleButtonTypeMap>;
+
+export type ToggleButtonProps<
+  D extends React.ElementType = ToggleButtonTypeMap['defaultComponent'],
+  P = {}
+> = OverrideProps<ToggleButtonTypeMap<P, D>, D>;
+
+export type ToggleButtonClassKey = keyof NonNullable<ToggleButtonTypeMap['props']['classes']>;
+
+export default ToggleButton;
diff --git a/packages/material-ui/src/ToggleButton/ToggleButton.js b/packages/material-ui/src/ToggleButton/ToggleButton.js
new file mode 100644
index 00000000000000..d40a2fdd8d6717
--- /dev/null
+++ b/packages/material-ui/src/ToggleButton/ToggleButton.js
@@ -0,0 +1,177 @@
+// @inheritedComponent ButtonBase
+
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { fade, withStyles } from '@material-ui/core/styles';
+import ButtonBase from '@material-ui/core/ButtonBase';
+import { capitalize } from '@material-ui/core/utils';
+
+export const styles = (theme) => ({
+  /* Styles applied to the root element. */
+  root: {
+    ...theme.typography.button,
+    borderRadius: theme.shape.borderRadius,
+    padding: 11,
+    border: `1px solid ${fade(theme.palette.action.active, 0.12)}`,
+    color: fade(theme.palette.action.active, 0.38),
+    '&$selected': {
+      color: theme.palette.action.active,
+      backgroundColor: fade(theme.palette.action.active, 0.12),
+      '&:hover': {
+        backgroundColor: fade(theme.palette.action.active, 0.15),
+      },
+      '& + &': {
+        borderLeft: 0,
+        marginLeft: 0,
+      },
+    },
+    '&$disabled': {
+      color: fade(theme.palette.action.disabled, 0.12),
+    },
+    '&:hover': {
+      textDecoration: 'none',
+      // Reset on mouse devices
+      backgroundColor: fade(theme.palette.text.primary, 0.05),
+      '@media (hover: none)': {
+        backgroundColor: 'transparent',
+      },
+    },
+  },
+  /* Pseudo-class applied to the root element if `disabled={true}`. */
+  disabled: {},
+  /* Pseudo-class applied to the root element if `selected={true}`. */
+  selected: {},
+  /* Styles applied to the `label` wrapper element. */
+  label: {
+    width: '100%', // Ensure the correct width for iOS Safari
+    display: 'inherit',
+    alignItems: 'inherit',
+    justifyContent: 'inherit',
+  },
+  /* Styles applied to the root element if `size="small"`. */
+  sizeSmall: {
+    padding: 7,
+    fontSize: theme.typography.pxToRem(13),
+  },
+  /* Styles applied to the root element if `size="large"`. */
+  sizeLarge: {
+    padding: 15,
+    fontSize: theme.typography.pxToRem(15),
+  },
+});
+
+const ToggleButton = React.forwardRef(function ToggleButton(props, ref) {
+  const {
+    children,
+    classes,
+    className,
+    disabled = false,
+    disableFocusRipple = false,
+    onChange,
+    onClick,
+    selected,
+    size = 'medium',
+    value,
+    ...other
+  } = props;
+
+  const handleChange = (event) => {
+    if (onClick) {
+      onClick(event, value);
+      if (event.isDefaultPrevented()) {
+        return;
+      }
+    }
+
+    if (onChange) {
+      onChange(event, value);
+    }
+  };
+
+  return (
+    <ButtonBase
+      className={clsx(
+        classes.root,
+        {
+          [classes.disabled]: disabled,
+          [classes.selected]: selected,
+          [classes[`size${capitalize(size)}`]]: size !== 'medium',
+        },
+        className,
+      )}
+      disabled={disabled}
+      focusRipple={!disableFocusRipple}
+      ref={ref}
+      onClick={handleChange}
+      onChange={onChange}
+      value={value}
+      aria-pressed={selected}
+      {...other}
+    >
+      <span className={classes.label}>{children}</span>
+    </ButtonBase>
+  );
+});
+
+ToggleButton.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * The content of the button.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * If `true`, the button will be disabled.
+   * @default false
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, the  keyboard focus ripple will be disabled.
+   * @default false
+   */
+  disableFocusRipple: PropTypes.bool,
+  /**
+   * If `true`, the ripple effect will be disabled.
+   *
+   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
+   * to highlight the element by applying separate styles with the `focusVisibleClassName`.
+   * @default false
+   */
+  disableRipple: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  onChange: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onClick: PropTypes.func,
+  /**
+   * If `true`, the button will be rendered in an active state.
+   */
+  selected: PropTypes.bool,
+  /**
+   * The size of the button.
+   * The prop defaults to the value inherited from the parent ToggleButtonGroup component.
+   * @default 'medium'
+   */
+  size: PropTypes.oneOf(['large', 'medium', 'small']),
+  /**
+   * The value to associate with the button when selected in a
+   * ToggleButtonGroup.
+   */
+  value: PropTypes.any.isRequired,
+};
+
+export default withStyles(styles, { name: 'MuiToggleButton' })(ToggleButton);
diff --git a/packages/material-ui-lab/src/ToggleButton/ToggleButton.test.js b/packages/material-ui/src/ToggleButton/ToggleButton.test.js
similarity index 100%
rename from packages/material-ui-lab/src/ToggleButton/ToggleButton.test.js
rename to packages/material-ui/src/ToggleButton/ToggleButton.test.js
diff --git a/packages/material-ui/src/ToggleButton/index.d.ts b/packages/material-ui/src/ToggleButton/index.d.ts
new file mode 100644
index 00000000000000..1fc7822337a76c
--- /dev/null
+++ b/packages/material-ui/src/ToggleButton/index.d.ts
@@ -0,0 +1,2 @@
+export { default } from './ToggleButton';
+export * from './ToggleButton';
diff --git a/packages/material-ui/src/ToggleButton/index.js b/packages/material-ui/src/ToggleButton/index.js
new file mode 100644
index 00000000000000..5061a1766c789e
--- /dev/null
+++ b/packages/material-ui/src/ToggleButton/index.js
@@ -0,0 +1 @@
+export { default } from './ToggleButton';
diff --git a/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.d.ts b/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.d.ts
new file mode 100644
index 00000000000000..75eafcb3bfb4b9
--- /dev/null
+++ b/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.d.ts
@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { InternalStandardProps as StandardProps } from '@material-ui/core';
+
+export interface ToggleButtonGroupProps
+  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'children'> {
+  /**
+   * The content of the button.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: {
+    /** Styles applied to the root element. */
+    root?: string;
+    /** Styles applied to the root element if `orientation="vertical"`. */
+    vertical?: string;
+    /** Styles applied to the children. */
+    grouped?: string;
+    /** Styles applied to the children if `orientation="horizontal"`. */
+    groupedHorizontal?: string;
+    /** Styles applied to the children if `orientation="vertical"`. */
+    groupedVertical?: string;
+  };
+  /**
+   * If `true`, only allow one of the child ToggleButton values to be selected.
+   * @default false
+   */
+  exclusive?: boolean;
+  /**
+   * Callback fired when the value changes.
+   *
+   * @param {object} event The event source of the callback.
+   * @param {any} value of the selected buttons. When `exclusive` is true
+   * this is a single value; when false an array of selected values. If no value
+   * is selected and `exclusive` is true the value is null; when false an empty array.
+   */
+  onChange?: (event: React.MouseEvent<HTMLElement>, value: any) => void;
+  /**
+   * The group orientation (layout flow direction).
+   * @default 'horizontal'
+   */
+  orientation?: 'horizontal' | 'vertical';
+  /**
+   * The size of the buttons.
+   * @default 'medium'
+   */
+  size?: 'small' | 'medium' | 'large';
+  /**
+   * The currently selected value within the group or an array of selected
+   * values when `exclusive` is false.
+   *
+   * The value must have reference equality with the option in order to be selected.
+   */
+  value?: any;
+}
+
+export type ToggleButtonGroupClassKey = keyof NonNullable<ToggleButtonGroupProps['classes']>;
+
+/**
+ *
+ * Demos:
+ *
+ * - [Toggle Button](https://material-ui.com/components/toggle-button/)
+ *
+ * API:
+ *
+ * - [ToggleButtonGroup API](https://material-ui.com/api/toggle-button-group/)
+ */
+export default function ToggleButtonGroup(props: ToggleButtonGroupProps): JSX.Element;
diff --git a/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.js b/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.js
new file mode 100644
index 00000000000000..008294a2ae2e81
--- /dev/null
+++ b/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.js
@@ -0,0 +1,133 @@
+import * as React from 'react';
+import { isFragment } from 'react-is';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { withStyles } from '@material-ui/core/styles';
+import { capitalize } from '@material-ui/core/utils';
+import isValueSelected from './isValueSelected';
+
+export const styles = (theme) => ({
+  /* Styles applied to the root element. */
+  root: {
+    display: 'inline-flex',
+    borderRadius: theme.shape.borderRadius,
+  },
+  /* Styles applied to the root element if `orientation="vertical"`. */
+  vertical: {
+    flexDirection: 'column',
+  },
+  /* Styles applied to the children. */
+  grouped: {},
+  /* Styles applied to the children if `orientation="horizontal"`. */
+  groupedHorizontal: {
+    '&:not(:first-child)': {
+      marginLeft: -1,
+      borderLeft: '1px solid transparent',
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0,
+    },
+    '&:not(:last-child)': {
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0,
+    },
+  },
+  /* Styles applied to the children if `orientation="vertical"`. */
+  groupedVertical: {
+    '&:not(:first-child)': {
+      marginTop: -1,
+      borderTop: '1px solid transparent',
+      borderTopLeftRadius: 0,
+      borderTopRightRadius: 0,
+    },
+    '&:not(:last-child)': {
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0,
+    },
+  },
+});
+
+const ToggleButtonGroup = React.forwardRef(function ToggleButtonGroup(props, ref) {
+  const {
+    children,
+    classes,
+    className,
+    exclusive = false,
+    onChange,
+    orientation = 'horizontal',
+    size = 'medium',
+    value,
+    ...other
+  } = props;
+
+  const handleChange = (event, buttonValue) => {
+    if (!onChange) {
+      return;
+    }
+
+    const index = value && value.indexOf(buttonValue);
+    let newValue;
+
+    if (value && index >= 0) {
+      newValue = value.slice();
+      newValue.splice(index, 1);
+    } else {
+      newValue = value ? value.concat(buttonValue) : [buttonValue];
+    }
+
+    onChange(event, newValue);
+  };
+
+  const handleExclusiveChange = (event, buttonValue) => {
+    if (!onChange) {
+      return;
+    }
+
+    onChange(event, value === buttonValue ? null : buttonValue);
+  };
+
+  return (
+    <div
+      role="group"
+      className={clsx(
+        classes.root,
+        {
+          [classes.vertical]: orientation === 'vertical',
+        },
+        className,
+      )}
+      ref={ref}
+      {...other}
+    >
+      {React.Children.map(children, (child) => {
+        if (!React.isValidElement(child)) {
+          return null;
+        }
+
+        if (process.env.NODE_ENV !== 'production') {
+          if (isFragment(child)) {
+            console.error(
+              [
+                "Material-UI: The ToggleButtonGroup component doesn't accept a Fragment as a child.",
+                'Consider providing an array instead.',
+              ].join('\n'),
+            );
+          }
+        }
+
+        return React.cloneElement(child, {
+          className: clsx(
+            classes.grouped,
+            classes[`grouped${capitalize(orientation)}`],
+            child.props.className,
+          ),
+          onChange: exclusive ? handleExclusiveChange : handleChange,
+          selected:
+            child.props.selected === undefined
+              ? isValueSelected(child.props.value, value)
+              : child.props.selected,
+          size: child.props.size || size,
+        });
+      })}
+    </div>
+  );
+});
diff --git a/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.test.js b/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.test.js
similarity index 100%
rename from packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.test.js
rename to packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.test.js
diff --git a/packages/material-ui/src/ToggleButtonGroup/index.d.ts b/packages/material-ui/src/ToggleButtonGroup/index.d.ts
new file mode 100644
index 00000000000000..f8533d66013238
--- /dev/null
+++ b/packages/material-ui/src/ToggleButtonGroup/index.d.ts
@@ -0,0 +1,2 @@
+export { default } from './ToggleButtonGroup';
+export * from './ToggleButtonGroup';
diff --git a/packages/material-ui/src/ToggleButtonGroup/index.js b/packages/material-ui/src/ToggleButtonGroup/index.js
new file mode 100644
index 00000000000000..28dff2c5331011
--- /dev/null
+++ b/packages/material-ui/src/ToggleButtonGroup/index.js
@@ -0,0 +1 @@
+export { default } from './ToggleButtonGroup';
diff --git a/packages/material-ui-lab/src/ToggleButtonGroup/isValueSelected.js b/packages/material-ui/src/ToggleButtonGroup/isValueSelected.js
similarity index 100%
rename from packages/material-ui-lab/src/ToggleButtonGroup/isValueSelected.js
rename to packages/material-ui/src/ToggleButtonGroup/isValueSelected.js
diff --git a/packages/material-ui-lab/src/ToggleButtonGroup/isValueSelected.test.js b/packages/material-ui/src/ToggleButtonGroup/isValueSelected.test.js
similarity index 100%
rename from packages/material-ui-lab/src/ToggleButtonGroup/isValueSelected.test.js
rename to packages/material-ui/src/ToggleButtonGroup/isValueSelected.test.js
diff --git a/packages/material-ui/src/index.d.ts b/packages/material-ui/src/index.d.ts
index a31f94411c7c4f..8d344d550fa935 100644
--- a/packages/material-ui/src/index.d.ts
+++ b/packages/material-ui/src/index.d.ts
@@ -413,6 +413,12 @@ export * from './TextField';
 export { default as TextareaAutosize } from './TextareaAutosize';
 export * from './TextareaAutosize';
 
+export { default as ToggleButton } from './ToggleButton';
+export * from './ToggleButton';
+
+export { default as ToggleButtonGroup } from './ToggleButtonGroup';
+export * from './ToggleButtonGroup';
+
 export { default as Toolbar } from './Toolbar';
 export * from './Toolbar';
 
diff --git a/packages/material-ui/src/index.js b/packages/material-ui/src/index.js
index e26709678125c5..7aea286f1da201 100644
--- a/packages/material-ui/src/index.js
+++ b/packages/material-ui/src/index.js
@@ -339,6 +339,12 @@ export * from './TextField';
 export { default as TextareaAutosize } from './TextareaAutosize';
 export * from './TextareaAutosize';
 
+export { default as ToggleButton } from './ToggleButton';
+export * from './ToggleButton';
+
+export { default as ToggleButtonGroup } from './ToggleButtonGroup';
+export * from './ToggleButtonGroup';
+
 export { default as Toolbar } from './Toolbar';
 export * from './Toolbar';
 
diff --git a/packages/material-ui/src/styles/overrides.d.ts b/packages/material-ui/src/styles/overrides.d.ts
index a068ed332f498f..41743d6a635764 100644
--- a/packages/material-ui/src/styles/overrides.d.ts
+++ b/packages/material-ui/src/styles/overrides.d.ts
@@ -98,6 +98,8 @@ import { TableRowClassKey } from '../TableRow';
 import { TableSortLabelClassKey } from '../TableSortLabel';
 import { TabsClassKey } from '../Tabs';
 import { TextFieldClassKey } from '../TextField';
+import { ToggleButtonClassKey } from '../ToggleButton';
+import { ToggleButtonGroupClassKey } from '../ToggleButtonGroup';
 import { ToolbarClassKey } from '../Toolbar';
 import { TooltipClassKey } from '../Tooltip';
 import { TouchRippleClassKey } from '../ButtonBase/TouchRipple';
@@ -217,6 +219,8 @@ export interface ComponentNameToClassKey {
   MuiTableSortLabel: TableSortLabelClassKey;
   MuiTabs: TabsClassKey;
   MuiTextField: TextFieldClassKey;
+  MuiToggleButton: ToggleButtonClassKey;
+  MuiToggleButtonGroup: ToggleButtonGroupClassKey;
   MuiToolbar: ToolbarClassKey;
   MuiTooltip: TooltipClassKey;
   MuiTouchRipple: TouchRippleClassKey;
diff --git a/packages/material-ui/src/styles/props.d.ts b/packages/material-ui/src/styles/props.d.ts
index f0a6bd31177ae6..576a883d9b800c 100644
--- a/packages/material-ui/src/styles/props.d.ts
+++ b/packages/material-ui/src/styles/props.d.ts
@@ -103,6 +103,8 @@ import { TableFooterProps } from '../TableFooter';
 import { TabProps } from '../Tab';
 import { TabsProps } from '../Tabs';
 import { TextFieldProps } from '../TextField';
+import { ToggleButtonProps } from '../ToggleButton';
+import { ToggleButtonGroupProps } from '../ToggleButtonGroup';
 import { ToolbarProps } from '../Toolbar';
 import { TooltipProps } from '../Tooltip';
 import { TouchRippleProps } from '../ButtonBase/TouchRipple';
@@ -218,6 +220,8 @@ export interface ComponentsPropsList {
   MuiTableSortLabel: TableSortLabelProps;
   MuiTabs: TabsProps;
   MuiTextField: TextFieldProps;
+  MuiToggleButton: ToggleButtonProps;
+  MuiToggleButtonGroup: ToggleButtonGroupProps;
   MuiToolbar: ToolbarProps;
   MuiTooltip: TooltipProps;
   MuiTouchRipple: TouchRippleProps;

From 9c57f105b40318215b03fecfbc686a6aeb5050e2 Mon Sep 17 00:00:00 2001
From: Matt <github@nospam.33m.co>
Date: Mon, 28 Sep 2020 00:28:27 +0100
Subject: [PATCH 2/6] fix imports

---
 packages/material-ui/src/ToggleButton/ToggleButton.js       | 6 +++---
 .../src/ToggleButtonGroup/ToggleButtonGroup.d.ts            | 2 +-
 .../material-ui/src/ToggleButtonGroup/ToggleButtonGroup.js  | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/material-ui/src/ToggleButton/ToggleButton.js b/packages/material-ui/src/ToggleButton/ToggleButton.js
index d40a2fdd8d6717..fcd7ad21bfc2d1 100644
--- a/packages/material-ui/src/ToggleButton/ToggleButton.js
+++ b/packages/material-ui/src/ToggleButton/ToggleButton.js
@@ -3,9 +3,9 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { fade, withStyles } from '@material-ui/core/styles';
-import ButtonBase from '@material-ui/core/ButtonBase';
-import { capitalize } from '@material-ui/core/utils';
+import { fade, withStyles } from '../styles';
+import ButtonBase from '../ButtonBase';
+import { capitalize } from '../utils';
 
 export const styles = (theme) => ({
   /* Styles applied to the root element. */
diff --git a/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.d.ts b/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.d.ts
index 75eafcb3bfb4b9..815a0565f6cffb 100644
--- a/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.d.ts
+++ b/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { InternalStandardProps as StandardProps } from '@material-ui/core';
+import { InternalStandardProps as StandardProps } from '..';
 
 export interface ToggleButtonGroupProps
   extends StandardProps<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'children'> {
diff --git a/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.js b/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.js
index 008294a2ae2e81..d39b3f31a382ff 100644
--- a/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.js
+++ b/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.js
@@ -2,8 +2,8 @@ import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { withStyles } from '@material-ui/core/styles';
-import { capitalize } from '@material-ui/core/utils';
+import { withStyles } from '../styles';
+import { capitalize } from '../utils';
 import isValueSelected from './isValueSelected';
 
 export const styles = (theme) => ({

From 31d03c906291d0ff80b8b58a263dc70a8cfdedbe Mon Sep 17 00:00:00 2001
From: Matt <github@nospam.33m.co>
Date: Mon, 28 Sep 2020 00:29:45 +0100
Subject: [PATCH 3/6] docs:api

---
 docs/pages/api-docs/toggle-button-group.md | 8 ++++----
 docs/pages/api-docs/toggle-button.md       | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/docs/pages/api-docs/toggle-button-group.md b/docs/pages/api-docs/toggle-button-group.md
index c15379a00e075e..34ff79327e9ba5 100644
--- a/docs/pages/api-docs/toggle-button-group.md
+++ b/docs/pages/api-docs/toggle-button-group.md
@@ -1,5 +1,5 @@
 ---
-filename: /packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js
+filename: /packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.js
 ---
 
 <!--- This documentation is automatically generated, do not try to edit it. -->
@@ -11,9 +11,9 @@ filename: /packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js
 ## Import
 
 ```js
-import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup';
 // or
-import { ToggleButtonGroup } from '@material-ui/lab';
+import { ToggleButtonGroup } from '@material-ui/core';
 ```
 
 You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
@@ -56,7 +56,7 @@ You can override the style of the component thanks to one of these customization
 - With a [global class name](/customization/components/#overriding-styles-with-global-class-names).
 - With a theme and an [`overrides` property](/customization/globals/#css).
 
-If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js) for more detail.
+If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.js) for more detail.
 
 ## Demos
 
diff --git a/docs/pages/api-docs/toggle-button.md b/docs/pages/api-docs/toggle-button.md
index 962fff87f83db5..7fa59af77e4b12 100644
--- a/docs/pages/api-docs/toggle-button.md
+++ b/docs/pages/api-docs/toggle-button.md
@@ -1,5 +1,5 @@
 ---
-filename: /packages/material-ui-lab/src/ToggleButton/ToggleButton.js
+filename: /packages/material-ui/src/ToggleButton/ToggleButton.js
 ---
 
 <!--- This documentation is automatically generated, do not try to edit it. -->
@@ -11,9 +11,9 @@ filename: /packages/material-ui-lab/src/ToggleButton/ToggleButton.js
 ## Import
 
 ```js
-import ToggleButton from '@material-ui/lab/ToggleButton';
+import ToggleButton from '@material-ui/core/ToggleButton';
 // or
-import { ToggleButton } from '@material-ui/lab';
+import { ToggleButton } from '@material-ui/core';
 ```
 
 You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
@@ -58,7 +58,7 @@ You can override the style of the component thanks to one of these customization
 - With a [global class name](/customization/components/#overriding-styles-with-global-class-names).
 - With a theme and an [`overrides` property](/customization/globals/#css).
 
-If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui-lab/src/ToggleButton/ToggleButton.js) for more detail.
+If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/ToggleButton/ToggleButton.js) for more detail.
 
 ## Inheritance
 

From 11dfe8887f216dde9dd0dc08e44f2bbf0fb150c6 Mon Sep 17 00:00:00 2001
From: Matt <github@nospam.33m.co>
Date: Mon, 28 Sep 2020 00:57:41 +0100
Subject: [PATCH 4/6] fix docs typo

---
 docs/src/pages/components/toggle-button/toggle-button.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/src/pages/components/toggle-button/toggle-button.md b/docs/src/pages/components/toggle-button/toggle-button.md
index a378f14ded1621..7c4fe59e8fffe6 100644
--- a/docs/src/pages/components/toggle-button/toggle-button.md
+++ b/docs/src/pages/components/toggle-button/toggle-button.md
@@ -17,7 +17,9 @@ The `ToggleButtonGroup` controls the selected state of its child buttons when gi
 
 ## Exclusive selection
 
-With exclusive selection, selecting one option deselects any other. In this example text justification toggle buttons present options for left, right, center, full, and justified text with only one item available for selection at a time.
+With exclusive selection, selecting one option deselects any other. 
+
+In this example text justification toggle buttons present options for left, center, right, and fully justified text (disabled), with only one item available for selection at a time.
 
 {{"demo": "pages/components/toggle-button/ToggleButtons.js"}}
 

From dfce5d3be99fa4d699e9bc37de65b72098182ce0 Mon Sep 17 00:00:00 2001
From: Matt <github@nospam.33m.co>
Date: Mon, 28 Sep 2020 01:44:36 +0100
Subject: [PATCH 5/6] prettier

---
 docs/src/pages/components/toggle-button/toggle-button.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/pages/components/toggle-button/toggle-button.md b/docs/src/pages/components/toggle-button/toggle-button.md
index 7c4fe59e8fffe6..1f4e7c6055a9f8 100644
--- a/docs/src/pages/components/toggle-button/toggle-button.md
+++ b/docs/src/pages/components/toggle-button/toggle-button.md
@@ -17,7 +17,7 @@ The `ToggleButtonGroup` controls the selected state of its child buttons when gi
 
 ## Exclusive selection
 
-With exclusive selection, selecting one option deselects any other. 
+With exclusive selection, selecting one option deselects any other.
 
 In this example text justification toggle buttons present options for left, center, right, and fully justified text (disabled), with only one item available for selection at a time.
 

From 4c7f63b465fc91655494541799d9dc7e56f689e8 Mon Sep 17 00:00:00 2001
From: Matt <github@nospam.33m.co>
Date: Thu, 1 Oct 2020 23:48:17 +0100
Subject: [PATCH 6/6] fix rebase

---
 .../ToggleButtonGroup/ToggleButtonGroup.js    | 207 ++----------------
 .../src/ToggleButton/ToggleButton.d.ts        |   4 +-
 .../src/ToggleButton/ToggleButton.test.js     |   2 +-
 .../ToggleButtonGroup/ToggleButtonGroup.js    |  52 +++++
 4 files changed, 78 insertions(+), 187 deletions(-)

diff --git a/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js b/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js
index 316b168105c571..ae403a39b30dba 100644
--- a/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js
+++ b/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js
@@ -1,185 +1,24 @@
-import * as React from 'react';
-import { isFragment } from 'react-is';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import { withStyles } from '@material-ui/core/styles';
-import { capitalize } from '@material-ui/core/utils';
-import isValueSelected from './isValueSelected';
-
-export const styles = (theme) => ({
-  /* Styles applied to the root element. */
-  root: {
-    display: 'inline-flex',
-    borderRadius: theme.shape.borderRadius,
-  },
-  /* Styles applied to the root element if `orientation="vertical"`. */
-  vertical: {
-    flexDirection: 'column',
-  },
-  /* Styles applied to the children. */
-  grouped: {},
-  /* Styles applied to the children if `orientation="horizontal"`. */
-  groupedHorizontal: {
-    '&:not(:first-child)': {
-      marginLeft: -1,
-      borderLeft: '1px solid transparent',
-      borderTopLeftRadius: 0,
-      borderBottomLeftRadius: 0,
-    },
-    '&:not(:last-child)': {
-      borderTopRightRadius: 0,
-      borderBottomRightRadius: 0,
-    },
-  },
-  /* Styles applied to the children if `orientation="vertical"`. */
-  groupedVertical: {
-    '&:not(:first-child)': {
-      marginTop: -1,
-      borderTop: '1px solid transparent',
-      borderTopLeftRadius: 0,
-      borderTopRightRadius: 0,
-    },
-    '&:not(:last-child)': {
-      borderBottomLeftRadius: 0,
-      borderBottomRightRadius: 0,
-    },
-  },
-});
-
-const ToggleButtonGroup = React.forwardRef(function ToggleButtonGroup(props, ref) {
-  const {
-    children,
-    classes,
-    className,
-    exclusive = false,
-    onChange,
-    orientation = 'horizontal',
-    size = 'medium',
-    value,
-    ...other
-  } = props;
-
-  const handleChange = (event, buttonValue) => {
-    if (!onChange) {
-      return;
-    }
-
-    const index = value && value.indexOf(buttonValue);
-    let newValue;
-
-    if (value && index >= 0) {
-      newValue = value.slice();
-      newValue.splice(index, 1);
-    } else {
-      newValue = value ? value.concat(buttonValue) : [buttonValue];
-    }
-
-    onChange(event, newValue);
-  };
-
-  const handleExclusiveChange = (event, buttonValue) => {
-    if (!onChange) {
-      return;
-    }
-
-    onChange(event, value === buttonValue ? null : buttonValue);
-  };
-
-  return (
-    <div
-      role="group"
-      className={clsx(
-        classes.root,
-        {
-          [classes.vertical]: orientation === 'vertical',
-        },
-        className,
-      )}
-      ref={ref}
-      {...other}
-    >
-      {React.Children.map(children, (child) => {
-        if (!React.isValidElement(child)) {
-          return null;
-        }
-
-        if (process.env.NODE_ENV !== 'production') {
-          if (isFragment(child)) {
-            console.error(
-              [
-                "Material-UI: The ToggleButtonGroup component doesn't accept a Fragment as a child.",
-                'Consider providing an array instead.',
-              ].join('\n'),
-            );
-          }
-        }
-
-        return React.cloneElement(child, {
-          className: clsx(
-            classes.grouped,
-            classes[`grouped${capitalize(orientation)}`],
-            child.props.className,
-          ),
-          onChange: exclusive ? handleExclusiveChange : handleChange,
-          selected:
-            child.props.selected === undefined
-              ? isValueSelected(child.props.value, value)
-              : child.props.selected,
-          size: child.props.size || size,
-        });
-      })}
-    </div>
-  );
+import React from 'react';
+import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup';
+
+let warnedOnce = false;
+
+/**
+ * @ignore - do not document.
+ */
+export default React.forwardRef(function DeprecatedToggleButtonGroup(props, ref) {
+  if (!warnedOnce) {
+    console.warn(
+      [
+        'Material-UI: The ToggleButtonGroup component was moved from the lab to the core.',
+        '',
+        "You should use `import { ToggleButtonGroup } from '@material-ui/core'`",
+        "or `import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup'`",
+      ].join('\n'),
+    );
+
+    warnedOnce = true;
+  }
+
+  return <ToggleButtonGroup ref={ref} {...props} />;
 });
-
-ToggleButtonGroup.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
-  /**
-   * The content of the button.
-   */
-  children: PropTypes.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * If `true`, only allow one of the child ToggleButton values to be selected.
-   * @default false
-   */
-  exclusive: PropTypes.bool,
-  /**
-   * Callback fired when the value changes.
-   *
-   * @param {object} event The event source of the callback.
-   * @param {any} value of the selected buttons. When `exclusive` is true
-   * this is a single value; when false an array of selected values. If no value
-   * is selected and `exclusive` is true the value is null; when false an empty array.
-   */
-  onChange: PropTypes.func,
-  /**
-   * The group orientation (layout flow direction).
-   * @default 'horizontal'
-   */
-  orientation: PropTypes.oneOf(['horizontal', 'vertical']),
-  /**
-   * The size of the buttons.
-   * @default 'medium'
-   */
-  size: PropTypes.oneOf(['large', 'medium', 'small']),
-  /**
-   * The currently selected value within the group or an array of selected
-   * values when `exclusive` is false.
-   *
-   * The value must have reference equality with the option in order to be selected.
-   */
-  value: PropTypes.any,
-};
-
-export default withStyles(styles, { name: 'MuiToggleButtonGroup' })(ToggleButtonGroup);
diff --git a/packages/material-ui/src/ToggleButton/ToggleButton.d.ts b/packages/material-ui/src/ToggleButton/ToggleButton.d.ts
index 7e95759ffab0b4..e62b4ded59a480 100644
--- a/packages/material-ui/src/ToggleButton/ToggleButton.d.ts
+++ b/packages/material-ui/src/ToggleButton/ToggleButton.d.ts
@@ -1,5 +1,5 @@
-import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '@material-ui/core/ButtonBase';
-import { OverrideProps } from '@material-ui/core/OverridableComponent';
+import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase';
+import { OverrideProps } from '../OverridableComponent';
 
 export type ToggleButtonTypeMap<
   P = {},
diff --git a/packages/material-ui/src/ToggleButton/ToggleButton.test.js b/packages/material-ui/src/ToggleButton/ToggleButton.test.js
index 2b7b5c276da4e7..41e8490818781e 100644
--- a/packages/material-ui/src/ToggleButton/ToggleButton.test.js
+++ b/packages/material-ui/src/ToggleButton/ToggleButton.test.js
@@ -8,7 +8,7 @@ import {
   describeConformance,
   createServerRender,
 } from 'test/utils';
-import ButtonBase from '@material-ui/core/ButtonBase';
+import ButtonBase from '../ButtonBase';
 import ToggleButton from './ToggleButton';
 
 describe('<ToggleButton />', () => {
diff --git a/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.js b/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.js
index d39b3f31a382ff..1ad38249a528c8 100644
--- a/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.js
+++ b/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.js
@@ -131,3 +131,55 @@ const ToggleButtonGroup = React.forwardRef(function ToggleButtonGroup(props, ref
     </div>
   );
 });
+
+ToggleButtonGroup.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * The content of the button.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * If `true`, only allow one of the child ToggleButton values to be selected.
+   * @default false
+   */
+  exclusive: PropTypes.bool,
+  /**
+   * Callback fired when the value changes.
+   *
+   * @param {object} event The event source of the callback.
+   * @param {any} value of the selected buttons. When `exclusive` is true
+   * this is a single value; when false an array of selected values. If no value
+   * is selected and `exclusive` is true the value is null; when false an empty array.
+   */
+  onChange: PropTypes.func,
+  /**
+   * The group orientation (layout flow direction).
+   * @default 'horizontal'
+   */
+  orientation: PropTypes.oneOf(['horizontal', 'vertical']),
+  /**
+   * The size of the buttons.
+   * @default 'medium'
+   */
+  size: PropTypes.oneOf(['large', 'medium', 'small']),
+  /**
+   * The currently selected value within the group or an array of selected
+   * values when `exclusive` is false.
+   *
+   * The value must have reference equality with the option in order to be selected.
+   */
+  value: PropTypes.any,
+};
+
+export default withStyles(styles, { name: 'MuiToggleButtonGroup' })(ToggleButtonGroup);