diff --git a/packages/material-ui/src/Button/Button.d.ts b/packages/material-ui/src/Button/Button.d.ts
index 20219e57ce0f74..5cff16988662ef 100644
--- a/packages/material-ui/src/Button/Button.d.ts
+++ b/packages/material-ui/src/Button/Button.d.ts
@@ -1,9 +1,9 @@
 import { PropTypes } from '..';
-import { ExtendButtonBase } from '../ButtonBase';
-import { SimplifiedPropsOf } from '../OverridableComponent';
+import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase';
+import { OverridableComponent, OverrideProps, SimplifiedPropsOf } from '../OverridableComponent';
 
-declare const Button: ExtendButtonBase<{
-  props: {
+export type ButtonTypeMape<P, D extends React.ElementType> = ExtendButtonBaseTypeMap<{
+  props: P & {
     color?: PropTypes.Color;
     disabled?: boolean;
     disableFocusRipple?: boolean;
@@ -13,11 +13,16 @@ declare const Button: ExtendButtonBase<{
     size?: 'small' | 'medium' | 'large';
     variant?: 'text' | 'outlined' | 'contained';
   };
-  defaultComponent: 'button';
+  defaultComponent: D;
   classKey: ButtonClassKey;
 }>;
 
-export type ButtonProps = SimplifiedPropsOf<typeof Button>;
+declare const Button: ExtendButtonBase<ButtonTypeMape<{}, 'button'>>;
+
+export type ButtonProps<D extends React.ElementType = 'button', P = {}> = OverrideProps<
+  ButtonTypeMape<P, D>,
+  D
+>;
 
 export type ButtonClassKey =
   | 'root'
diff --git a/packages/material-ui/src/Button/Button.spec.tsx b/packages/material-ui/src/Button/Button.spec.tsx
new file mode 100644
index 00000000000000..043a159839cf78
--- /dev/null
+++ b/packages/material-ui/src/Button/Button.spec.tsx
@@ -0,0 +1,104 @@
+import React from 'react';
+import Button, { ButtonProps } from '@material-ui/core/Button';
+import { Link as ReactRouterLink, LinkProps } from 'react-router-dom';
+import { type } from 'os';
+
+const log = console.log;
+
+const TestOverride = React.forwardRef<HTMLDivElement, { x?: number }>((props, ref) => (
+  <div ref={ref} />
+));
+
+const ButtonTest = () => (
+  <div>
+    <Button>I am a button!</Button>
+    <Button color="inherit">Contrast</Button>
+    <Button disabled>Disabled</Button>
+    <Button href="#link-button">Link</Button>
+    <Button size="small">Small</Button>
+    <Button variant="contained">Contained</Button>
+    <Button variant="outlined" color="primary" aria-label="add">
+      Outlined
+    </Button>
+    <Button tabIndex={1} title="some button">
+      Title
+    </Button>
+    <Button component="a">Simple Link</Button>
+    <Button component={props => <a {...props} />}>Complex Link</Button>
+    <Button component={ReactRouterLink} to="/open-collective">
+      Link
+    </Button>
+    <Button href="/open-collective">Link</Button>
+    <Button component={ReactRouterLink} to="/open-collective">
+      Link
+    </Button>
+    <Button href="/open-collective">Link</Button>
+    // By default the underlying component is a button element:
+    <Button
+      ref={elem => {
+        elem; // $ExpectType HTMLButtonElement | null
+      }}
+      onClick={e => {
+        e; // $ExpectType MouseEvent<HTMLButtonElement, MouseEvent>
+        log(e);
+      }}
+    >
+      Button
+    </Button>
+    // If an href is provided, an anchor is used:
+    <Button
+      href="/open-collective"
+      ref={elem => {
+        elem; // $ExpectType HTMLAnchorElement | null
+      }}
+      onClick={e => {
+        e; // $ExpectType MouseEvent<HTMLAnchorElement, MouseEvent>
+        log(e);
+      }}
+    >
+      Link
+    </Button>
+    // If a component prop is specified, use that:
+    <Button<'div'>
+      component="div"
+      ref={elem => {
+        elem; // $ExpectType HTMLDivElement | null
+      }}
+      onClick={e => {
+        e; // $ExpectType MouseEvent<HTMLDivElement, MouseEvent>
+        log(e);
+      }}
+    >
+      Div
+    </Button>
+    {
+      // Can't have an onClick handler if the overriding component doesn't specify one:
+      // $ExpectError
+      <Button<typeof TestOverride> component={TestOverride} onClick={log}>
+        TestOverride
+      </Button>
+    }
+  </div>
+);
+
+const ReactRouterLinkTest = () => {
+  const ButtonLink = (props: ButtonProps<typeof ReactRouterLink>) => (
+    <Button {...props} component={ReactRouterLink} />
+  );
+
+  const reactRouterButtonLink1 = (
+    <ButtonLink color="primary" to="/">
+      Go Home
+    </ButtonLink>
+  );
+
+  const MyLink = React.forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
+    return <ReactRouterLink innerRef={ref as any} {...props} />;
+  });
+
+  const reactRouterButtonLink2 = (
+    <Button color="primary" component={MyLink} to="/router-future">
+      Go Home
+    </Button>
+  );
+};
diff --git a/packages/material-ui/test/typescript/components.spec.tsx b/packages/material-ui/test/typescript/components.spec.tsx
index ad422b817a7916..2085a9b9f3844a 100644
--- a/packages/material-ui/test/typescript/components.spec.tsx
+++ b/packages/material-ui/test/typescript/components.spec.tsx
@@ -79,7 +79,6 @@ import {
   createStyles,
 } from '@material-ui/core/styles';
 import { DialogProps } from '@material-ui/core/Dialog';
-import { ButtonProps } from '@material-ui/core/Button';
 import { Link as ReactRouterLink } from 'react-router-dom';
 import { ButtonBaseActions } from '@material-ui/core/ButtonBase';
 
@@ -172,78 +171,6 @@ const BottomNavigationTest = () => {
   );
 };
 
-const ButtonTest = () => (
-  <div>
-    <Button>I am a button!</Button>
-    <Button color="inherit">Contrast</Button>
-    <Button disabled>Disabled</Button>
-    <Button href="#link-button">Link</Button>
-    <Button size="small">Small</Button>
-    <Button variant="contained">Contained</Button>
-    <Button variant="outlined" color="primary" aria-label="add">
-      Outlined
-    </Button>
-    <Button tabIndex={1} title="some button">
-      Title
-    </Button>
-    <Button component="a">Simple Link</Button>
-    <Button component={props => <a {...props} />}>Complex Link</Button>
-    <Button component={ReactRouterLink} to="/open-collective">
-      Link
-    </Button>
-    <Button href="/open-collective">Link</Button>
-    <Button component={ReactRouterLink} to="/open-collective">
-      Link
-    </Button>
-    <Button href="/open-collective">Link</Button>
-    // By default the underlying component is a button element:
-    <Button
-      ref={elem => {
-        elem; // $ExpectType HTMLButtonElement | null
-      }}
-      onClick={e => {
-        e; // $ExpectType MouseEvent<HTMLButtonElement, MouseEvent>
-        log(e);
-      }}
-    >
-      Button
-    </Button>
-    // If an href is provided, an anchor is used:
-    <Button
-      href="/open-collective"
-      ref={elem => {
-        elem; // $ExpectType HTMLAnchorElement | null
-      }}
-      onClick={e => {
-        e; // $ExpectType MouseEvent<HTMLAnchorElement, MouseEvent>
-        log(e);
-      }}
-    >
-      Link
-    </Button>
-    // If a component prop is specified, use that:
-    <Button<'div'>
-      component="div"
-      ref={elem => {
-        elem; // $ExpectType HTMLDivElement | null
-      }}
-      onClick={e => {
-        e; // $ExpectType MouseEvent<HTMLDivElement, MouseEvent>
-        log(e);
-      }}
-    >
-      Div
-    </Button>
-    {
-      // Can't have an onClick handler if the overriding component doesn't specify one:
-      // $ExpectError
-      <Button<typeof TestOverride> component={TestOverride} onClick={log}>
-        TestOverride
-      </Button>
-    }
-  </div>
-);
-
 const IconButtonTest = () => (
   <div>
     <IconButton aria-label="Delete">
@@ -1085,31 +1012,6 @@ const InputLabelTest = () => (
   />
 );
 
-const ReactRouterLinkTest = () => {
-  interface ButtonLinkProps extends ButtonProps {
-    to: string;
-    replace?: boolean;
-  }
-
-  const ButtonLink = (props: ButtonLinkProps) => (
-    <Button {...props} component={ReactRouterLink as any} />
-  );
-
-  const reactRouterButtonLink1 = (
-    <ButtonLink color="primary" to="/">
-      Go Home
-    </ButtonLink>
-  );
-
-  const MyLink = (props: any) => <ReactRouterLink to="/" {...props} />;
-
-  const reactRouterButtonLink2 = (
-    <Button color="primary" component={MyLink}>
-      Go Home
-    </Button>
-  );
-};
-
 const LinkTest = () => {
   const dudUrl = 'javascript:;';
   return (