diff --git a/.size-limit.js b/.size-limit.js
index 4328b586eca5ec..15d90e418b7b34 100644
--- a/.size-limit.js
+++ b/.size-limit.js
@@ -22,7 +22,7 @@ module.exports = [
     name: 'The size of the @material-ui/core modules',
     webpack: true,
     path: 'packages/material-ui/build/index.js',
-    limit: '95.7 KB',
+    limit: '96 KB',
   },
   {
     name: 'The size of the @material-ui/styles modules',
@@ -61,7 +61,7 @@ module.exports = [
     name: 'The main docs bundle',
     webpack: false,
     path: main.path,
-    limit: '182 KB',
+    limit: '183 KB',
   },
   {
     name: 'The docs home page',
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index cd3822c2a52b89..27fd8c3190c758 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -10,7 +10,7 @@ When in doubt, keep your pull requests small. To give a PR the best chance of ge
 
 As with issues, please begin the title with [ComponentName].
 
-When adding new features or modifying existing, please attempt to include tests to confirm the new behaviour. You can read more about our test setup [here](https://github.com/mui-org/material-ui/blob/master/test/README.md).
+When adding new features or modifying existing, please attempt to include tests to confirm the new behaviour. You can read more about our test setup in our test [README](https://github.com/mui-org/material-ui/blob/master/test/README.md).
 
 When migrating a component to master, or submitting a new component, please add it to the [lab](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-lab).
 
diff --git a/docs/src/modules/components/AppDrawer.js b/docs/src/modules/components/AppDrawer.js
index f01bc0635e8c03..2fc1b41d73ec69 100644
--- a/docs/src/modules/components/AppDrawer.js
+++ b/docs/src/modules/components/AppDrawer.js
@@ -6,7 +6,6 @@ import { withStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import Drawer from '@material-ui/core/Drawer';
 import SwipeableDrawer from '@material-ui/core/SwipeableDrawer';
-import Typography from '@material-ui/core/Typography';
 import Divider from '@material-ui/core/Divider';
 import Hidden from '@material-ui/core/Hidden';
 import AppDrawerNavItem from 'docs/src/modules/components/AppDrawerNavItem';
@@ -38,9 +37,6 @@ const styles = theme => ({
     alignItems: 'flex-start',
     justifyContent: 'center',
   },
-  anchor: {
-    color: theme.palette.text.secondary,
-  },
 });
 
 // eslint-disable-next-line react/prop-types
@@ -102,14 +98,22 @@ function AppDrawer(props) {
         <div className={classes.nav}>
           <div className={classes.toolbarIe11}>
             <div className={classes.toolbar}>
-              <Link className={classes.title} href="/" onClick={onClose}>
-                <Typography variant="h6" color="inherit">
-                  Material-UI
-                </Typography>
+              <Link
+                className={classes.title}
+                href="/"
+                onClick={onClose}
+                variant="h6"
+                color="inherit"
+              >
+                Material-UI
               </Link>
               {process.env.LIB_VERSION ? (
-                <Link className={classes.anchor} href={_rewriteUrlForNextExport('/versions')}>
-                  <Typography variant="caption">{`v${process.env.LIB_VERSION}`}</Typography>
+                <Link
+                  color="textSecondary"
+                  variant="caption"
+                  href={_rewriteUrlForNextExport('/versions')}
+                >
+                  {`v${process.env.LIB_VERSION}`}
                 </Link>
               ) : null}
             </div>
diff --git a/docs/src/modules/components/AppDrawerNavItem.js b/docs/src/modules/components/AppDrawerNavItem.js
index 074acc224ebb92..f3acbcada17ced 100644
--- a/docs/src/modules/components/AppDrawerNavItem.js
+++ b/docs/src/modules/components/AppDrawerNavItem.js
@@ -83,7 +83,7 @@ class AppDrawerNavItem extends React.Component {
         <ListItem className={classes.itemLeaf} disableGutters {...other}>
           <Button
             component={props => (
-              <Link variant="button" activeClassName={classes.active} href={href} {...props} />
+              <Link naked activeClassName={classes.active} href={href} {...props} />
             )}
             className={classNames(classes.buttonLeaf, `depth-${depth}`)}
             disableRipple
diff --git a/docs/src/modules/components/AppTableOfContents.js b/docs/src/modules/components/AppTableOfContents.js
index 3c106417430cd8..cf2ef3f4a2ce81 100644
--- a/docs/src/modules/components/AppTableOfContents.js
+++ b/docs/src/modules/components/AppTableOfContents.js
@@ -2,7 +2,6 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import Link from 'docs/src/modules/components/Link';
 import marked from 'marked';
 import warning from 'warning';
 import throttle from 'lodash/throttle';
@@ -10,6 +9,7 @@ import EventListener from 'react-event-listener';
 import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import { textToHash } from '@material-ui/docs/MarkdownElement/MarkdownElement';
+import Link from 'docs/src/modules/components/Link';
 
 let itemsCollector;
 const renderer = new marked.Renderer();
@@ -163,41 +163,37 @@ class AppTableOfContents extends React.Component {
               Contents
             </Typography>
             <EventListener target="window" onScroll={this.handleScroll} />
-            <ul className={classes.ul}>
+            <Typography component="ul" className={classes.ul}>
               {this.itemsServer.map(item2 => (
                 <li key={item2.text}>
-                  <Typography
+                  <Link
                     color={active === item2.hash ? 'textPrimary' : 'textSecondary'}
+                    href={`#${item2.hash}`}
                     className={classes.item}
-                    component={linkProps => (
-                      <Link {...linkProps} variant="inherit" href={`#${item2.hash}`} />
-                    )}
                   >
                     <span dangerouslySetInnerHTML={{ __html: item2.text }} />
-                  </Typography>
+                  </Link>
                   {item2.children.length > 0 ? (
                     <ul className={classes.ul}>
                       {item2.children.map(item3 => (
                         <li key={item3.text}>
-                          <Typography
+                          <Link
+                            color={active === item3.hash ? 'textPrimary' : 'textSecondary'}
+                            href={`#${item3.hash}`}
                             className={classes.item}
                             style={{
                               paddingLeft: 8 * 2,
                             }}
-                            color={active === item3.hash ? 'textPrimary' : 'textSecondary'}
-                            component={linkProps => (
-                              <Link {...linkProps} variant="inherit" href={`#${item3.hash}`} />
-                            )}
                           >
                             <span dangerouslySetInnerHTML={{ __html: item3.text }} />
-                          </Typography>
+                          </Link>
                         </li>
                       ))}
                     </ul>
                   ) : null}
                 </li>
               ))}
-            </ul>
+            </Typography>
           </React.Fragment>
         ) : null}
       </nav>
diff --git a/docs/src/modules/components/AppTheme.js b/docs/src/modules/components/AppTheme.js
index d6dc053a4986d0..cbf9f80baba13f 100644
--- a/docs/src/modules/components/AppTheme.js
+++ b/docs/src/modules/components/AppTheme.js
@@ -35,7 +35,9 @@ function AppTheme(props) {
           ❤️
         </span>
         {' by the '}
-        <Link href="/">Material-UI</Link>
+        <Link color="inherit" href="/">
+          Material-UI
+        </Link>
         {' team.'}
       </Typography>
     </React.Fragment>
diff --git a/docs/src/modules/components/HomeFooter.js b/docs/src/modules/components/HomeFooter.js
index c25140d4bf251a..0ed384d36c0031 100644
--- a/docs/src/modules/components/HomeFooter.js
+++ b/docs/src/modules/components/HomeFooter.js
@@ -41,13 +41,20 @@ function HomeFooter(props) {
           <Grid item xs={12} sm={6}>
             <ul className={classes.list}>
               <li className={classes.listItem}>
-                <Link href="https://github.com/mui-org/material-ui">GitHub</Link>
+                <Link color="inherit" href="https://github.com/mui-org/material-ui">
+                  GitHub
+                </Link>
               </li>
               <li className={classes.listItem}>
-                <Link href="https://twitter.com/MaterialUI">Twitter</Link>
+                <Link color="inherit" href="https://twitter.com/MaterialUI">
+                  Twitter
+                </Link>
               </li>
               <li className={classes.listItem}>
-                <Link href="https://github.com/mui-org/material-ui/tree/master/examples">
+                <Link
+                  color="inherit"
+                  href="https://github.com/mui-org/material-ui/tree/master/examples"
+                >
                   Examples
                 </Link>
               </li>
@@ -56,13 +63,19 @@ function HomeFooter(props) {
           <Grid item xs={12} sm={6}>
             <ul className={classes.list}>
               <li className={classes.listItem}>
-                <Link href="/style/icons">Icons</Link>
+                <Link color="inherit" href="/style/icons">
+                  Icons
+                </Link>
               </li>
               <li className={classes.listItem}>
-                <Link href="/style/color">Color</Link>
+                <Link color="inherit" href="/style/color">
+                  Color
+                </Link>
               </li>
               <li className={classes.listItem}>
-                <Link href="/discover-more/team">Team</Link>
+                <Link color="inherit" href="/discover-more/team">
+                  Team
+                </Link>
               </li>
             </ul>
           </Grid>
@@ -70,7 +83,9 @@ function HomeFooter(props) {
       </Typography>
       <Typography className={classes.version}>
         {`Currently v${process.env.LIB_VERSION}. Released under the `}
-        <Link href="https://github.com/mui-org/material-ui/blob/master/LICENSE">MIT License</Link>
+        <Link color="inherit" href="https://github.com/mui-org/material-ui/blob/master/LICENSE">
+          MIT License
+        </Link>
         {'.'}
       </Typography>
     </footer>
diff --git a/docs/src/modules/components/HomeSteps.js b/docs/src/modules/components/HomeSteps.js
index fe2a1044332066..c8c6a56858d610 100644
--- a/docs/src/modules/components/HomeSteps.js
+++ b/docs/src/modules/components/HomeSteps.js
@@ -130,7 +130,7 @@ function HomeSteps(props) {
         <Divider className={classes.divider} />
         <Button
           component={buttonProps => (
-            <Link variant="button" prefetch href="/getting-started/installation" {...buttonProps} />
+            <Link naked prefetch href="/getting-started/installation" {...buttonProps} />
           )}
         >
           Read installation docs
@@ -164,7 +164,7 @@ function HomeSteps(props) {
         <Divider className={classes.divider} />
         <Button
           component={buttonProps => (
-            <Link variant="button" prefetch href="/getting-started/usage" {...buttonProps} />
+            <Link naked prefetch href="/getting-started/usage" {...buttonProps} />
           )}
         >
           Explore the docs
@@ -188,9 +188,7 @@ function HomeSteps(props) {
         </div>
         <Divider className={classes.divider} />
         <Button
-          component={buttonProps => (
-            <Link variant="button" prefetch href="/premium-themes" {...buttonProps} />
-          )}
+          component={buttonProps => <Link naked prefetch href="/premium-themes" {...buttonProps} />}
         >
           Browse themes
         </Button>
diff --git a/docs/src/modules/components/Link.js b/docs/src/modules/components/Link.js
index cf89e07dc69c69..50aba7e70edb6b 100644
--- a/docs/src/modules/components/Link.js
+++ b/docs/src/modules/components/Link.js
@@ -1,118 +1,63 @@
-/* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/anchor-has-content */
 
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import compose from 'recompose/compose';
 import { withRouter } from 'next/router';
 import NextLink from 'next/link';
-import { withStyles } from '@material-ui/core/styles';
+import MuiLink from '@material-ui/core/Link';
 
-const styles = theme => ({
-  root: {
-    textDecoration: 'none',
-    '&:hover': {
-      textDecoration: 'underline',
-    },
-  },
-  default: {
-    color: 'inherit',
-  },
-  primary: {
-    color: theme.palette.primary.main,
-  },
-  secondary: {
-    color: theme.palette.secondary.main,
-  },
-  button: {
-    '&:hover': {
-      textDecoration: 'inherit',
-    },
-  },
-});
+function NextWrapper(props) {
+  const { className, activeClassName, onClick, router, href, prefetch, ...other } = props;
 
-function Link(props) {
-  const {
-    activeClassName,
-    children: childrenProp,
-    classes,
-    className: classNameProp,
-    component: ComponentProp,
-    href,
-    onClick,
-    prefetch,
-    router,
-    variant,
-    ...other
-  } = props;
-
-  let ComponentRoot;
-  const className = classNames(
-    classes.root,
-    {
-      [classes[variant]]: variant !== 'inherit',
-    },
-    classNameProp,
-  );
-  let RootProps;
-  let children = childrenProp;
-
-  if (ComponentProp) {
-    ComponentRoot = ComponentProp;
-    RootProps = {
-      ...other,
-      className,
-    };
-  } else if (href) {
-    ComponentRoot = NextLink;
-    RootProps = {
-      href,
-      prefetch,
-      passHref: true,
-    };
-    children = (
+  return (
+    <NextLink href={href} prefetch={prefetch}>
       <a
+        onClick={onClick}
         className={classNames(className, {
           [activeClassName]: router.pathname === href && activeClassName,
         })}
-        onClick={onClick}
         {...other}
-      >
-        {children}
-      </a>
-    );
-  } else {
-    ComponentRoot = 'a';
-    RootProps = {
-      ...other,
-      className,
-    };
-  }
-
-  return <ComponentRoot {...RootProps}>{children}</ComponentRoot>;
+      />
+    </NextLink>
+  );
 }
 
-Link.defaultProps = {
-  variant: 'default',
+NextWrapper.defaultProps = {
   activeClassName: 'active',
 };
 
-Link.propTypes = {
+NextWrapper.propTypes = {
   activeClassName: PropTypes.string,
-  children: PropTypes.node.isRequired,
-  classes: PropTypes.object.isRequired,
-  className: PropTypes.string,
-  component: PropTypes.any,
   href: PropTypes.string,
   onClick: PropTypes.func,
   prefetch: PropTypes.bool,
   router: PropTypes.shape({
     pathname: PropTypes.string.isRequired,
   }).isRequired,
-  variant: PropTypes.oneOf(['default', 'primary', 'secondary', 'button', 'inherit']),
 };
 
-export default compose(
-  withRouter,
-  withStyles(styles),
-)(Link);
+function Link(props) {
+  const { naked, ...other } = props;
+
+  const ToRender = {
+    component: NextWrapper,
+    ...other,
+  };
+
+  if (naked) {
+    const { component: Component, ...rest } = ToRender;
+
+    return <Component {...rest} />;
+  }
+
+  return <MuiLink {...ToRender} />;
+}
+
+Link.propTypes = {
+  naked: PropTypes.bool,
+};
+
+export default withRouter(Link);
diff --git a/docs/src/modules/components/Tidelift.js b/docs/src/modules/components/Tidelift.js
index ca3bc6ae2cc2e0..a9973c8d49b65e 100644
--- a/docs/src/modules/components/Tidelift.js
+++ b/docs/src/modules/components/Tidelift.js
@@ -11,6 +11,7 @@ const styles = theme => ({
     right: 0,
     left: 0,
     display: 'flex',
+    color: theme.palette.common.white,
     backgroundColor: '#626980', // Tidelift color.
     position: 'relative',
     top: 56,
@@ -24,14 +25,11 @@ const styles = theme => ({
   },
   logo: {
     background: 'url(/static/images/tidelift.svg) no-repeat 50%',
-    content: "''",
+    content: '""',
     width: 20,
     height: 20,
     margin: `0 ${theme.spacing.unit}px 0 0`,
   },
-  label: {
-    color: theme.palette.common.white,
-  },
 });
 
 function Tidelift(props) {
@@ -40,13 +38,12 @@ function Tidelift(props) {
   return (
     <Link
       className={classes.root}
-      variant="button"
       href="https://tidelift.com/subscription/pkg/npm-material-ui?utm_source=material_ui&utm_medium=referral&utm_campaign=homepage"
       target="_blank"
       rel="noopener"
     >
       <span className={classes.logo} />
-      <Typography className={classes.label}>Get Professionally Supported Material-UI</Typography>
+      <Typography color="inherit">Get Professionally Supported Material-UI</Typography>
     </Link>
   );
 }
diff --git a/docs/src/pages/css-in-js/advanced/advanced.md b/docs/src/pages/css-in-js/advanced/advanced.md
index 10371e3fc883e7..b975988ee26b0d 100644
--- a/docs/src/pages/css-in-js/advanced/advanced.md
+++ b/docs/src/pages/css-in-js/advanced/advanced.md
@@ -292,7 +292,7 @@ Basically, CSP mitigates cross-site scripting (XSS) attacks by requiring develop
 
 This vulnerability would allow the attacker to execute anything. However, with a secure CSP header, the browser will not load this script.
 
-You can read more about CSP [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP).
+You can read more about CSP on the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP).
 
 ### How does one implement CSP?
 
diff --git a/docs/src/pages/demos/buttons/buttons.md b/docs/src/pages/demos/buttons/buttons.md
index 3deefd45ad8c65..35a3cf31fb20f9 100644
--- a/docs/src/pages/demos/buttons/buttons.md
+++ b/docs/src/pages/demos/buttons/buttons.md
@@ -142,4 +142,4 @@ const MyLink = props => <Link to="/open-collective" {...props} />
 </Button>
 ```
 
-*Note: Creating `MyLink` is necessary to prevent unexpected unmounting. You can read more about it [here](/guides/composition/#component-property).*
+*Note: Creating `MyLink` is necessary to prevent unexpected unmounting. You can read more about it in our [composition guide](/guides/composition/#component-property).*
diff --git a/docs/src/pages/discover-more/showcase/Showcase.js b/docs/src/pages/discover-more/showcase/Showcase.js
index 962aa290034234..c8e5e08fdaf8fb 100644
--- a/docs/src/pages/discover-more/showcase/Showcase.js
+++ b/docs/src/pages/discover-more/showcase/Showcase.js
@@ -5,7 +5,6 @@ import Card from '@material-ui/core/Card';
 import CardMedia from '@material-ui/core/CardMedia';
 import Typography from '@material-ui/core/Typography';
 import IconButton from '@material-ui/core/IconButton';
-import Link from 'docs/src/modules/components/Link';
 import GithubIcon from '@material-ui/docs/svgIcons/GitHub';
 
 const styles = theme => ({
@@ -646,9 +645,15 @@ function Showcase(props) {
             ) : null}
           </Typography>
           <Card className={classes.card}>
-            <Link href={app.link} target="_blank" rel="noopener">
-              <CardMedia image={app.image} title={app.title} className={classes.cardMedia} />
-            </Link>
+            <CardMedia
+              component="a"
+              href={app.link}
+              rel="noopener nofollow"
+              target="_blank"
+              className={classes.cardMedia}
+              image={app.image}
+              title={app.title}
+            />
           </Card>
           <Typography className={classes.description}>{app.description}</Typography>
         </div>
diff --git a/docs/src/pages/getting-started/page-layout-examples/album/README.md b/docs/src/pages/getting-started/page-layout-examples/album/README.md
index c22c7348a6b03c..4f1804334af533 100644
--- a/docs/src/pages/getting-started/page-layout-examples/album/README.md
+++ b/docs/src/pages/getting-started/page-layout-examples/album/README.md
@@ -4,7 +4,7 @@
 
 Simply copy the files into your project, or one of the [example applications](https://github.com/mui-org/material-ui/tree/master/examples), and import and use the `Album` component.
 
-You can customise the layout to add some pizazz in keeping with your corporate theme.
+You can customize the layout to add some pizazz in keeping with your corporate theme.
 
 ## Files
 
diff --git a/docs/src/pages/getting-started/page-layout-examples/blog/README.md b/docs/src/pages/getting-started/page-layout-examples/blog/README.md
index bdf2743e7423ed..062b56fc644621 100644
--- a/docs/src/pages/getting-started/page-layout-examples/blog/README.md
+++ b/docs/src/pages/getting-started/page-layout-examples/blog/README.md
@@ -4,14 +4,14 @@
 
 Simply copy the files into your project, or one of the [example applications](https://github.com/mui-org/material-ui/tree/master/examples), and import and use the `Dashboard` component.
 
-You can easily customise the layout to suit your design, and substitute an alternative markdown renderer.
+You can easily customize the layout to suit your design, and substitute an alternative markdown renderer.
 
 ## Files
 
 | File  | Purpose  |
 |---    |---       |
-| `Blog.js` | Main file. Customise the layout by adding grid components and changing breakpoints. |
-| `Markdown.js` | Markdown renderer. It enhances markdown-to-jsx output to use the Typography |component. You can customise it or substitute an alternative.
+| `Blog.js` | Main file. Customize the layout by adding grid components and changing breakpoints. |
+| `Markdown.js` | Markdown renderer. It enhances markdown-to-jsx output to use the Typography |component. You can customize it or substitute an alternative.
 | `blog-post.x.md` | Sample blog posts to demonstrate the renderer.|
 
 ## Dependencies
diff --git a/docs/src/pages/getting-started/page-layout-examples/checkout/README.md b/docs/src/pages/getting-started/page-layout-examples/checkout/README.md
index 29795495f15f6e..9da1b52d263846 100644
--- a/docs/src/pages/getting-started/page-layout-examples/checkout/README.md
+++ b/docs/src/pages/getting-started/page-layout-examples/checkout/README.md
@@ -4,7 +4,7 @@
 
 Simply copy the files into your project, or one of the [example applications](https://github.com/mui-org/material-ui/tree/master/examples), and import and use the `Checkout` component.
 
-You can customise the Stepper logic and steps to suit your specific checkout workflow and data requirements.
+You can customize the Stepper logic and steps to suit your specific checkout workflow and data requirements.
 
 ## Files
 
diff --git a/docs/src/pages/getting-started/page-layout-examples/dashboard/README.md b/docs/src/pages/getting-started/page-layout-examples/dashboard/README.md
index 57cbfe51a3a16a..2abea4b6b8d79f 100644
--- a/docs/src/pages/getting-started/page-layout-examples/dashboard/README.md
+++ b/docs/src/pages/getting-started/page-layout-examples/dashboard/README.md
@@ -4,16 +4,16 @@
 
 Simply copy the files into your project, or one of the [example applications](https://github.com/mui-org/material-ui/tree/master/examples), and import and use the `Dashboard` component.
 
-You can customise the sections, layout and charts to suit your specific business requirements.
+You can customize the sections, layout and charts to suit your specific business requirements.
 
 ## Files
 
 | File  | Purpose  |
 |---    |---       |
-| `Dashboard.js` | Main file. Customise the layout by adding grid components and changing breakpoints. |
+| `Dashboard.js` | Main file. Customize the layout by adding grid components and changing breakpoints. |
 | `listItems.js` | The list items for the Drawer. |
 | `SimpleLineChart.js` | The main chart component. Use as a basis for additional charts. |
-| `SimpleTable.js` | Use as is, customise, or replace with some other functionality. |
+| `SimpleTable.js` | Use as is, customize, or replace with some other functionality. |
 
 ## Dependencies
 
diff --git a/docs/src/pages/getting-started/page-layout-examples/pricing/README.md b/docs/src/pages/getting-started/page-layout-examples/pricing/README.md
index c2f6a60fdcf0de..deb121083d6586 100644
--- a/docs/src/pages/getting-started/page-layout-examples/pricing/README.md
+++ b/docs/src/pages/getting-started/page-layout-examples/pricing/README.md
@@ -4,7 +4,7 @@
 
 Simply copy the files into your project, or one of the [example applications](https://github.com/mui-org/material-ui/tree/master/examples), and import and use the `Pricing` component.
 
-You can customise the layout to add some pizazz in keeping with your corporate theme.
+You can customize the layout to add some pizazz in keeping with your corporate theme.
 
 ## Files
 
diff --git a/docs/src/pages/getting-started/page-layout-examples/sign-in/README.md b/docs/src/pages/getting-started/page-layout-examples/sign-in/README.md
index b3f80f0d450acf..d97104a5dc11b6 100644
--- a/docs/src/pages/getting-started/page-layout-examples/sign-in/README.md
+++ b/docs/src/pages/getting-started/page-layout-examples/sign-in/README.md
@@ -4,13 +4,13 @@
 
 Simply copy the files into your project, or one of the [example applications](https://github.com/mui-org/material-ui/tree/master/examples), and import and use the `SignIn` component.
 
-You can customise the layout to add some pizazz in keeping with your corporate theme.
+You can customize the layout to add some pizazz in keeping with your corporate theme.
 
 ## Files
 
 | File  | Purpose  |
 |---    |---       |
-| `SignIn.js` | A simple sign-in layout in a single file. Duplicate and customise it to make your registration and password change forms. |
+| `SignIn.js` | A simple sign-in layout in a single file. Duplicate and customize it to make your registration and password change forms. |
 
 
 ## Dependencies
diff --git a/docs/src/pages/layout/breakpoints/breakpoints.md b/docs/src/pages/layout/breakpoints/breakpoints.md
index 10bd02b346e07b..03e18823ad94e6 100644
--- a/docs/src/pages/layout/breakpoints/breakpoints.md
+++ b/docs/src/pages/layout/breakpoints/breakpoints.md
@@ -58,7 +58,7 @@ You might want to change the React rendering tree based on the breakpoint value,
 
 ### useMediaQuery hook
 
-You can learn more about this hook [here](/layout/use-media-query/).
+You can learn more on the [useMediaQuery](/layout/use-media-query/) page.
 
 ### withWidth()
 
diff --git a/docs/src/pages/premium-themes/PremiumThemes.js b/docs/src/pages/premium-themes/PremiumThemes.js
index 8a81f38f59a550..b51eb50fe2e41c 100644
--- a/docs/src/pages/premium-themes/PremiumThemes.js
+++ b/docs/src/pages/premium-themes/PremiumThemes.js
@@ -111,6 +111,7 @@ function PremiumThemes(props) {
               component="a"
               href={theme.href}
               rel="noopener nofollow"
+              target="_blank"
               className={classes.media}
               image={theme.src}
               title={theme.name}
diff --git a/docs/src/pages/premium-themes/onepirate/SignIn.js b/docs/src/pages/premium-themes/onepirate/SignIn.js
index fc385cf1d21c12..bbf1ff33c134e0 100644
--- a/docs/src/pages/premium-themes/onepirate/SignIn.js
+++ b/docs/src/pages/premium-themes/onepirate/SignIn.js
@@ -4,11 +4,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import compose from 'recompose/compose';
 import { withStyles } from '@material-ui/core/styles';
+import Link from '@material-ui/core/Link';
 import { Field, Form, FormSpy } from 'react-final-form';
 import Typography from './modules/components/Typography';
 import AppFooter from './modules/views/AppFooter';
 import AppAppBar from './modules/views/AppAppBar';
-import Link from './modules/next/Link';
 import AppForm from './modules/views/AppForm';
 import { email, required } from './modules/form/validation';
 import RFTextField from './modules/form/RFTextField';
@@ -62,7 +62,7 @@ class SignIn extends React.Component {
             </Typography>
             <Typography variant="body2" align="center">
               {'Not a member yet? '}
-              <Link href="/premium-themes/onepirate/sign-up" variant="underline">
+              <Link href="/premium-themes/onepirate/sign-up" align="center" underline="always">
                 Sign Up here
               </Link>
             </Typography>
@@ -119,17 +119,10 @@ class SignIn extends React.Component {
               </form>
             )}
           </Form>
-          <Typography
-            component={linkProps => (
-              <Link
-                {...linkProps}
-                variant="underline"
-                href="/premium-themes/onepirate/forgot-password"
-              />
-            )}
-            align="center"
-          >
-            Forgot password?
+          <Typography align="center">
+            <Link underline="always" href="/premium-themes/onepirate/forgot-password">
+              Forgot password?
+            </Link>
           </Typography>
         </AppForm>
         <AppFooter />
diff --git a/docs/src/pages/premium-themes/onepirate/SignUp.js b/docs/src/pages/premium-themes/onepirate/SignUp.js
index 7edc3d07e4119a..227cec676e8a5a 100644
--- a/docs/src/pages/premium-themes/onepirate/SignUp.js
+++ b/docs/src/pages/premium-themes/onepirate/SignUp.js
@@ -5,11 +5,11 @@ import PropTypes from 'prop-types';
 import compose from 'recompose/compose';
 import { withStyles } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
+import Link from '@material-ui/core/Link';
 import { Field, Form, FormSpy } from 'react-final-form';
 import Typography from './modules/components/Typography';
 import AppFooter from './modules/views/AppFooter';
 import AppAppBar from './modules/views/AppAppBar';
-import Link from './modules/next/Link';
 import AppForm from './modules/views/AppForm';
 import { email, required } from './modules/form/validation';
 import RFTextField from './modules/form/RFTextField';
@@ -62,7 +62,7 @@ class SignUp extends React.Component {
               Sign Up
             </Typography>
             <Typography variant="body2" align="center">
-              <Link href="/premium-themes/onepirate/sign-in" variant="underline">
+              <Link href="/premium-themes/onepirate/sign-in" underline="always">
                 Already have an account?
               </Link>
             </Typography>
diff --git a/docs/src/pages/premium-themes/onepirate/modules/next/Link.js b/docs/src/pages/premium-themes/onepirate/modules/next/Link.js
deleted file mode 100644
index d830149b290741..00000000000000
--- a/docs/src/pages/premium-themes/onepirate/modules/next/Link.js
+++ /dev/null
@@ -1,115 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import compose from 'recompose/compose';
-import NextLink from 'next/link';
-import { withRouter } from 'next/router';
-import { withStyles } from '@material-ui/core/styles';
-
-const styles = theme => ({
-  root: {
-    textDecoration: 'inherit',
-    '&:hover': {
-      textDecoration: 'underline',
-    },
-  },
-  default: {
-    color: 'inherit',
-  },
-  underline: {
-    color: 'inherit',
-    textDecoration: 'underline',
-  },
-  primary: {
-    color: theme.palette.primary.main,
-  },
-  secondary: {
-    color: theme.palette.secondary.main,
-  },
-  button: {
-    '&:hover': {
-      textDecoration: 'inherit',
-    },
-  },
-  active: {},
-});
-
-function Link(props) {
-  const {
-    children: childrenProp,
-    classes,
-    className: classNameProp,
-    component: ComponentProp,
-    href,
-    params,
-    prefetch,
-    router,
-    variant,
-    ...other
-  } = props;
-
-  let Component;
-  const className = classNames(
-    classes.root,
-    {
-      [classes[variant]]: variant !== 'inherit',
-    },
-    classNameProp,
-  );
-  let more;
-  let children = childrenProp;
-
-  if (ComponentProp) {
-    Component = ComponentProp;
-    more = {
-      className,
-      ...other,
-    };
-  } else if (href) {
-    Component = NextLink;
-    more = {
-      href,
-      ...params,
-      prefetch,
-    };
-    children = (
-      <a
-        className={classNames(className, {
-          [classes.active]: href === router.pathname,
-        })}
-        {...other}
-      >
-        {children}
-      </a>
-    );
-  } else {
-    Component = 'a';
-    more = {
-      ...other,
-      className,
-    };
-  }
-
-  return <Component {...more}>{children}</Component>;
-}
-
-Link.propTypes = {
-  children: PropTypes.node.isRequired,
-  classes: PropTypes.object.isRequired,
-  className: PropTypes.string,
-  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-  href: PropTypes.string,
-  params: PropTypes.object,
-  prefetch: PropTypes.bool,
-  router: PropTypes.object.isRequired,
-  variant: PropTypes.oneOf(['default', 'underline', 'primary', 'secondary', 'button', 'inherit']),
-};
-
-Link.defaultProps = {
-  variant: 'primary',
-};
-
-export default compose(
-  withStyles(styles),
-  withRouter,
-)(Link);
diff --git a/docs/src/pages/premium-themes/onepirate/modules/views/AppAppBar.js b/docs/src/pages/premium-themes/onepirate/modules/views/AppAppBar.js
index b97bce27867d5b..def0bcd579a53f 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/views/AppAppBar.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/views/AppAppBar.js
@@ -2,10 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { withStyles } from '@material-ui/core/styles';
+import Link from '@material-ui/core/Link';
 import AppBar from '../components/AppBar';
 import Toolbar, { styles as toolbarStyles } from '../components/Toolbar';
-import Typography from '../components/Typography';
-import Link from '../next/Link';
 
 const styles = theme => ({
   title: {
@@ -44,36 +43,33 @@ function AppAppBar(props) {
       <AppBar position="fixed">
         <Toolbar className={classes.toolbar}>
           <div className={classes.left} />
-          <Typography
+          <Link
             variant="h6"
+            underline="none"
             color="inherit"
             className={classes.title}
-            component={linkProps => (
-              <Link {...linkProps} href="/premium-themes/onepirate" variant="button" />
-            )}
+            href="/premium-themes/onepirate"
           >
             {'onepirate'}
-          </Typography>
+          </Link>
           <div className={classes.right}>
-            <Typography
+            <Link
               color="inherit"
               variant="h6"
+              underline="none"
               className={classes.rightLink}
-              component={linkProps => (
-                <Link {...linkProps} href="/premium-themes/onepirate/sign-in" variant="button" />
-              )}
+              href="/premium-themes/onepirate/sign-in"
             >
               {'Sign In'}
-            </Typography>
-            <Typography
+            </Link>
+            <Link
               variant="h6"
+              underline="none"
               className={classNames(classes.rightLink, classes.linkSecondary)}
-              component={linkProps => (
-                <Link {...linkProps} href="/premium-themes/onepirate/sign-up" variant="button" />
-              )}
+              href="/premium-themes/onepirate/sign-up"
             >
               {'Sign Up'}
-            </Typography>
+            </Link>
           </div>
         </Toolbar>
       </AppBar>
diff --git a/docs/src/pages/premium-themes/onepirate/modules/views/AppFooter.js b/docs/src/pages/premium-themes/onepirate/modules/views/AppFooter.js
index 6ac35e529fd471..2204e2db32bb8c 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/views/AppFooter.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/views/AppFooter.js
@@ -4,9 +4,9 @@ import compose from 'recompose/compose';
 import pure from 'recompose/pure';
 import { withStyles } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
+import Link from '@material-ui/core/Link';
 import LayoutBody from '../components/LayoutBody';
 import Typography from '../components/Typography';
-import Link from '../next/Link';
 import TextField from '../components/TextField';
 
 const styles = theme => ({
diff --git a/docs/src/pages/premium-themes/onepirate/modules/views/ProductHero.js b/docs/src/pages/premium-themes/onepirate/modules/views/ProductHero.js
index 03bf7fcc92553f..2ca9ec99566d9e 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/views/ProductHero.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/views/ProductHero.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
+import Link from '@material-ui/core/Link';
 import Button from '../components/Button';
 import Typography from '../components/Typography';
-import Link from '../next/Link';
 import ProductHeroLayout from './ProductHeroLayout';
 
 const backgroundImage =
diff --git a/docs/src/pages/premium-themes/onepirate/modules/views/ProductHowItWorks.js b/docs/src/pages/premium-themes/onepirate/modules/views/ProductHowItWorks.js
index c6ec977713aad5..a2182b2bdad197 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/views/ProductHowItWorks.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/views/ProductHowItWorks.js
@@ -2,10 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
+import Link from '@material-ui/core/Link';
 import LayoutBody from '../components/LayoutBody';
 import Button from '../components/Button';
 import Typography from '../components/Typography';
-import Link from '../next/Link';
 
 const styles = theme => ({
   root: {
diff --git a/docs/src/pages/style/color/color.md b/docs/src/pages/style/color/color.md
index 4c40b93ab85789..9ecb16221318a0 100644
--- a/docs/src/pages/style/color/color.md
+++ b/docs/src/pages/style/color/color.md
@@ -71,7 +71,7 @@ const theme = createMuiTheme({
 });
 ```
 
-Only the `main` shades need be provided (unless you wish to further customise `light`, `dark` or `contrastText`), as the other colors will be calculated by `createMuiTheme()`, as described in the [Theme customization](/customization/themes/#palette) section.
+Only the `main` shades need be provided (unless you wish to further customize `light`, `dark` or `contrastText`), as the other colors will be calculated by `createMuiTheme()`, as described in the [Theme customization](/customization/themes/#palette) section.
 
 If you are using the default primary and / or secondary shades then by providing the color object, `createMuiTheme()` will use the appropriate shades from the material color for main, light and dark.
 
diff --git a/docs/src/pages/style/links/ButtonLink.js b/docs/src/pages/style/links/ButtonLink.js
new file mode 100644
index 00000000000000..a9941c74355d3f
--- /dev/null
+++ b/docs/src/pages/style/links/ButtonLink.js
@@ -0,0 +1,17 @@
+/* eslint-disable jsx-a11y/anchor-is-valid, no-alert */
+
+import React from 'react';
+import Link from '@material-ui/core/Link';
+
+export default function ButtonLink() {
+  return (
+    <Link
+      component="button"
+      onClick={() => {
+        alert("I'm a button.");
+      }}
+    >
+      Button Link
+    </Link>
+  );
+}
diff --git a/docs/src/pages/style/links/Links.js b/docs/src/pages/style/links/Links.js
new file mode 100644
index 00000000000000..b08001d0d77002
--- /dev/null
+++ b/docs/src/pages/style/links/Links.js
@@ -0,0 +1,38 @@
+/* eslint-disable no-script-url */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Link from '@material-ui/core/Link';
+
+const styles = theme => ({
+  link: {
+    margin: theme.spacing.unit,
+  },
+});
+
+// This resolves to nothing and doesn't affect browser history
+const dudUrl = 'javascript:;';
+
+function Links(props) {
+  const { classes } = props;
+
+  return (
+    <div>
+      <Link href={dudUrl} className={classes.link}>
+        Link
+      </Link>
+      <Link href={dudUrl} color="inherit" className={classes.link}>
+        {'color="inherit"'}
+      </Link>
+      <Link href={dudUrl} variant="body1" className={classes.link}>
+        {'variant="body1"'}
+      </Link>
+    </div>
+  );
+}
+
+Links.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(Links);
diff --git a/docs/src/pages/style/links/links.md b/docs/src/pages/style/links/links.md
new file mode 100644
index 00000000000000..020af7658e4a7e
--- /dev/null
+++ b/docs/src/pages/style/links/links.md
@@ -0,0 +1,35 @@
+---
+components: Link
+---
+
+# Links
+
+<p class="description">The Link component allows you to easily customize anchor elements with your theme colors and typography styles.</p>
+
+## Simple links
+
+The Link component is built on top of the [Typography](/api/typography/) component.
+You can leverage its properties.
+
+{{"demo": "pages/style/links/Links.js"}}
+
+## Accessibility
+
+- When providing the content for the link, avoid phrases like "click here" or "go to".
+- For the best user experience links should stand out from the text on the page.
+- If a link doesn't have a meaningful href, [it should be rendered using a `<button>` element](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md).
+
+{{"demo": "pages/style/links/ButtonLink.js"}}
+
+## Recommendations
+
+When you use `target="_blank"` with Links it is recommended to always use `rel="noopener"` or `rel="noreferrer"` when linking to third party content.
+
+`rel="noopener"` prevents the new page from being able to access the window.opener property and ensures it runs in a separate process.
+Without this the target page can potentially redirect your page to a malicious URL.
+
+`rel="noreferrer""` has the same effect, but also prevents the Referer header from being sent to the new page.
+
+Removing the referer header will affect analytics. By stripping the referral value, the traffic from these links will be
+misattributed — instead of showing as referral traffic, they will be attributed as “direct” in Google Analytics. Or, if
+you use an alternative analytics application, you may see the visits in a "noreferral" bucket.
\ No newline at end of file
diff --git a/docs/src/pages/versions/LatestVersion.js b/docs/src/pages/versions/LatestVersion.js
index 48f725c4e82414..8d715b2e9bdec0 100644
--- a/docs/src/pages/versions/LatestVersion.js
+++ b/docs/src/pages/versions/LatestVersion.js
@@ -25,34 +25,22 @@ function LatestVersion(props) {
         <TableBody>
           <TableRow>
             <TableCell padding="dense">
-              <Typography>master branch</Typography>
+              <Typography variant="body2">master branch</Typography>
             </TableCell>
             <TableCell padding="dense">
-              <Typography
-                component={props2 => (
-                  <Link
-                    {...props2}
-                    variant="secondary"
-                    rel="nofollow"
-                    href="https://material-ui.netlify.com/"
-                  />
-                )}
+              <Link
+                variant="body2"
+                color="secondary"
+                rel="nofollow"
+                href="https://material-ui.netlify.com/"
               >
                 Documentation
-              </Typography>
+              </Link>
             </TableCell>
             <TableCell padding="dense">
-              <Typography
-                component={props2 => (
-                  <Link
-                    {...props2}
-                    variant="secondary"
-                    href="https://github.com/mui-org/material-ui"
-                  />
-                )}
-              >
+              <Link variant="body2" color="secondary" href="https://github.com/mui-org/material-ui">
                 Source code
-              </Typography>
+              </Link>
             </TableCell>
           </TableRow>
         </TableBody>
diff --git a/docs/src/pages/versions/StableVersions.js b/docs/src/pages/versions/StableVersions.js
index 7e63a8d242f150..214a8e89f74ab3 100644
--- a/docs/src/pages/versions/StableVersions.js
+++ b/docs/src/pages/versions/StableVersions.js
@@ -81,32 +81,25 @@ class StableVersions extends React.Component {
               return (
                 <TableRow key={doc.version}>
                   <TableCell padding="dense">
-                    <Typography>
+                    <Typography variant="body2">
                       {doc.version}
                       {doc.version === `v${process.env.LIB_VERSION}` ? ' ✓' : ''}
                     </Typography>
                   </TableCell>
                   <TableCell padding="dense">
-                    <Typography
-                      component={props2 => (
-                        <Link {...props2} variant="secondary" rel="nofollow" href={doc.url} />
-                      )}
-                    >
+                    <Link variant="body2" color="secondary" rel="nofollow" href={doc.url}>
                       Documentation
-                    </Typography>
+                    </Link>
                   </TableCell>
                   <TableCell padding="dense">
-                    <Typography
-                      component={props2 => (
-                        <Link
-                          {...props2}
-                          variant="secondary"
-                          href={`${GITHUB_RELEASE_BASE_URL}${doc.version}`}
-                        />
-                      )}
+                    <Link
+                      variant="body2"
+                      color="secondary"
+                      rel="nofollow"
+                      href={`${GITHUB_RELEASE_BASE_URL}${doc.version}`}
                     >
                       Release notes
-                    </Typography>
+                    </Link>
                   </TableCell>
                 </TableRow>
               );
diff --git a/packages/material-ui-icons/README.md b/packages/material-ui-icons/README.md
index 0a1f5e47cbba3d..dae5d840458843 100644
--- a/packages/material-ui-icons/README.md
+++ b/packages/material-ui-icons/README.md
@@ -62,4 +62,4 @@ Note: Importing named exports in this way will result in the code for *every ico
 If you are upgrading an existing project from Material-UI 0.x.x, you will need to revise the import paths
 from `material-ui/svg-icons/<category>/<icon-name>` to `@material-ui/icons/<IconName>`.
 
-[Here](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-codemod#svg-icon-imports)'s a `jscodeshift` [codemod](https://github.com/facebook/codemod) to help you upgrade.
+We have built a `jscodeshift` [codemod](https://github.com/facebook/codemod) to help you [upgrade](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-codemod#svg-icon-imports)
diff --git a/packages/material-ui/src/Link/Link.d.ts b/packages/material-ui/src/Link/Link.d.ts
new file mode 100644
index 00000000000000..e480b122edf1ca
--- /dev/null
+++ b/packages/material-ui/src/Link/Link.d.ts
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { StandardProps, PropTypes } from '..';
+import { TypographyProps } from '../Typography';
+
+export interface LinkProps
+  extends StandardProps<
+    React.HTMLAttributes<HTMLAnchorElement> & TypographyProps,
+    LinkClassKey,
+    'component'
+  > {
+  block?: boolean;
+  color?: PropTypes.Color;
+  component?: React.ReactType<LinkProps>;
+  TypographyClasses?: TypographyProps['classes'];
+  underline?: 'none' | 'hover' | 'always';
+}
+
+export type LinkClassKey =
+  | 'root'
+  | 'underlineNone'
+  | 'underlineHover'
+  | 'underlineAlways'
+  | 'button';
+
+declare const Link: React.ComponentType<LinkProps>;
+
+export default Link;
diff --git a/packages/material-ui/src/Link/Link.js b/packages/material-ui/src/Link/Link.js
new file mode 100644
index 00000000000000..8d1676ed8a1ab9
--- /dev/null
+++ b/packages/material-ui/src/Link/Link.js
@@ -0,0 +1,148 @@
+// @inheritedComponent Typography
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { componentPropType } from '@material-ui/utils';
+import classNames from 'classnames';
+import { capitalize } from '../utils/helpers';
+import withStyles from '../styles/withStyles';
+import Typography from '../Typography';
+
+export const styles = {
+  /* Styles applied to the root element. */
+  root: {},
+  /* Styles applied to the root element if `underline="none"` */
+  underlineNone: {
+    textDecoration: 'none',
+  },
+  /* Styles applied to the root element if `underline="hover"` */
+  underlineHover: {
+    textDecoration: 'none',
+    '&:hover': {
+      textDecoration: 'underline',
+    },
+  },
+  /* Styles applied to the root element if `underline="always"` */
+  underlineAlways: {
+    textDecoration: 'underline',
+  },
+  // Same reset as ButtonBase.root
+  /* Styles applied to the root element if `component="button"`. */
+  button: {
+    position: 'relative',
+    // Remove grey highlight
+    WebkitTapHighlightColor: 'transparent',
+    backgroundColor: 'transparent', // Reset default value
+    // We disable the focus ring for mouse, touch and keyboard users.
+    outline: 'none',
+    border: 0,
+    margin: 0, // Remove the margin in Safari
+    borderRadius: 0,
+    padding: 0, // Remove the padding in Firefox
+    cursor: 'pointer',
+    userSelect: 'none',
+    verticalAlign: 'middle',
+    '-moz-appearance': 'none', // Reset
+    '-webkit-appearance': 'none', // Reset
+    '&::-moz-focus-inner': {
+      borderStyle: 'none', // Remove Firefox dotted outline.
+    },
+  },
+};
+
+function Link(props) {
+  const {
+    block,
+    children,
+    classes,
+    className: classNameProp,
+    component,
+    TypographyClasses,
+    underline,
+    ...other
+  } = props;
+
+  return (
+    <Typography
+      className={classNames(
+        classes.root,
+        {
+          [classes.button]: component === 'button',
+        },
+        classes[`underline${capitalize(underline)}`],
+        classNameProp,
+      )}
+      classes={TypographyClasses}
+      component={component}
+      inline={!block}
+      {...other}
+    >
+      {children}
+    </Typography>
+  );
+}
+
+Link.propTypes = {
+  /**
+   *  Controls whether the link is inline or not. When `block` is true the link is not inline
+   *  when `block` is false it is.
+   */
+  block: PropTypes.bool,
+  /**
+   * The content of the link.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Override or extend the styles applied to the component.
+   * See [CSS API](#css-api) below for more details.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The color of the link.
+   */
+  color: PropTypes.oneOf([
+    'error',
+    'inherit',
+    'primary',
+    'secondary',
+    'textPrimary',
+    'textSecondary',
+  ]),
+  /**
+   * The component used for the root node.
+   * Either a string to use a DOM element or a component.
+   */
+  component: componentPropType,
+  /**
+   * The target of the link. You can read about this property on the
+   * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes)
+   */
+  target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
+  /**
+   * `classes` property applied to the [`Typography`](/api/typography/) element.
+   */
+  TypographyClasses: PropTypes.object,
+  /**
+   *  Controls when the link should have an underline.
+   */
+  underline: PropTypes.oneOf(['none', 'hover', 'always']),
+  /**
+   * Applies the theme typography styles.
+   */
+  variant: PropTypes.string,
+};
+
+Link.defaultProps = {
+  block: false,
+  color: 'primary',
+  component: 'a',
+  target: '_self',
+  underline: 'hover',
+  variant: 'inherit',
+};
+
+export default withStyles(styles, { name: 'MuiLink' })(Link);
diff --git a/packages/material-ui/src/Link/Link.test.js b/packages/material-ui/src/Link/Link.test.js
new file mode 100644
index 00000000000000..007b26340dc00d
--- /dev/null
+++ b/packages/material-ui/src/Link/Link.test.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import { assert } from 'chai';
+import { createShallow, getClasses } from '@material-ui/core/test-utils';
+import Link from './Link';
+import Typography from '../Typography';
+
+describe('<Link />', () => {
+  let shallow;
+  let classes;
+
+  before(() => {
+    shallow = createShallow({ dive: true });
+    classes = getClasses(<Link href="/">Home</Link>);
+  });
+
+  it('should render a <Typography> element', () => {
+    const wrapper = shallow(<Link href="/">Home</Link>);
+    assert.strictEqual(wrapper.type(), Typography);
+  });
+
+  it('should render children', () => {
+    const wrapper = shallow(<Link href="/">Home</Link>);
+    assert.strictEqual(wrapper.contains('Home'), true);
+  });
+
+  it('should render with the root class', () => {
+    const wrapper = shallow(<Link href="/">Home</Link>);
+    assert.strictEqual(wrapper.hasClass(classes.root), true);
+  });
+
+  it('should render the custom className and the root class', () => {
+    const wrapper = shallow(
+      <Link href="/" className="test-class-name">
+        Test
+      </Link>,
+    );
+    assert.strictEqual(wrapper.is('.test-class-name'), true);
+    assert.strictEqual(wrapper.hasClass(classes.root), true);
+  });
+
+  it('should pass props to the <Typography> component', () => {
+    const wrapper = shallow(
+      <Link href="/" color="primary">
+        Test
+      </Link>,
+    );
+    const typography = wrapper.find(Typography);
+    assert.strictEqual(typography.props().color, 'primary');
+  });
+});
diff --git a/packages/material-ui/src/Link/index.d.ts b/packages/material-ui/src/Link/index.d.ts
new file mode 100644
index 00000000000000..66918f57f8f4a3
--- /dev/null
+++ b/packages/material-ui/src/Link/index.d.ts
@@ -0,0 +1,2 @@
+export { default } from './Link';
+export * from './Link';
diff --git a/packages/material-ui/src/Link/index.js b/packages/material-ui/src/Link/index.js
new file mode 100644
index 00000000000000..241046084c957d
--- /dev/null
+++ b/packages/material-ui/src/Link/index.js
@@ -0,0 +1 @@
+export { default } from './Link';
diff --git a/packages/material-ui/src/Stepper/Stepper.js b/packages/material-ui/src/Stepper/Stepper.js
index 97687863120003..1f1e225e1cbdd4 100644
--- a/packages/material-ui/src/Stepper/Stepper.js
+++ b/packages/material-ui/src/Stepper/Stepper.js
@@ -141,6 +141,4 @@ Stepper.defaultProps = {
   orientation: 'horizontal',
 };
 
-Stepper.muiName = 'Stepper';
-
 export default withStyles(styles, { name: 'MuiStepper' })(Stepper);
diff --git a/packages/material-ui/src/SvgIcon/SvgIcon.js b/packages/material-ui/src/SvgIcon/SvgIcon.js
index c8f02932878fb5..627b7d0aa3becf 100644
--- a/packages/material-ui/src/SvgIcon/SvgIcon.js
+++ b/packages/material-ui/src/SvgIcon/SvgIcon.js
@@ -123,8 +123,8 @@ SvgIcon.propTypes = {
    */
   nativeColor: PropTypes.string,
   /**
-   * The shape-rendering attribute. The behavior of the different options is described
-   * [here](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering).
+   * The shape-rendering attribute. The behavior of the different options is described on the
+   * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering).
    * If you are having issues with blurry icons you should investigate this property.
    */
   shapeRendering: PropTypes.string,
diff --git a/packages/material-ui/src/Typography/Typography.d.ts b/packages/material-ui/src/Typography/Typography.d.ts
index 5dd162b279d310..7a73410e4888cc 100644
--- a/packages/material-ui/src/Typography/Typography.d.ts
+++ b/packages/material-ui/src/Typography/Typography.d.ts
@@ -11,6 +11,7 @@ export interface TypographyProps
   component?: React.ReactType<TypographyProps>;
   gutterBottom?: boolean;
   headlineMapping?: { [type in Style]: string };
+  inline?: boolean;
   noWrap?: boolean;
   paragraph?: boolean;
   variant?: Style | 'inherit';
@@ -42,6 +43,8 @@ export type TypographyClassKey =
   | 'colorInherit'
   | 'colorSecondary'
   | 'colorTextSecondary'
+  | 'colorError'
+  | 'inline'
   | 'display4' // deprecated
   | 'display3'
   | 'display2'
diff --git a/packages/material-ui/src/Typography/Typography.js b/packages/material-ui/src/Typography/Typography.js
index 0f566ce046bfbd..f9c5a01b3f9aca 100644
--- a/packages/material-ui/src/Typography/Typography.js
+++ b/packages/material-ui/src/Typography/Typography.js
@@ -112,6 +112,10 @@ export const styles = theme => ({
   colorError: {
     color: theme.palette.error.main,
   },
+  /* Styles applied to the root element if `inline={true}`. */
+  inline: {
+    display: 'inline',
+  },
 });
 
 const nextVariants = {
@@ -170,6 +174,7 @@ function Typography(props) {
     component: componentProp,
     gutterBottom,
     headlineMapping,
+    inline,
     internalDeprecatedVariant,
     noWrap,
     paragraph,
@@ -188,6 +193,7 @@ function Typography(props) {
       [classes.gutterBottom]: gutterBottom,
       [classes.paragraph]: paragraph,
       [classes[`align${capitalize(align)}`]]: align !== 'inherit',
+      [classes.inline]: inline,
     },
     classNameProp,
   );
@@ -248,6 +254,10 @@ Typography.propTypes = {
    * The default mapping is the following:
    */
   headlineMapping: PropTypes.object,
+  /**
+   *  Controls whether the Typography is inline or not.
+   */
+  inline: PropTypes.bool,
   /**
    * A deprecated variant is used from an internal component. Users don't need
    * a deprecation warning here if they switched to the v2 theme. They already
@@ -326,6 +336,7 @@ Typography.defaultProps = {
   color: 'default',
   gutterBottom: false,
   headlineMapping: defaultHeadlineMapping,
+  inline: false,
   noWrap: false,
   paragraph: false,
 };
diff --git a/packages/material-ui/src/Typography/Typography.test.js b/packages/material-ui/src/Typography/Typography.test.js
index 9f8aee32930dda..9884f6b98be2b3 100644
--- a/packages/material-ui/src/Typography/Typography.test.js
+++ b/packages/material-ui/src/Typography/Typography.test.js
@@ -75,6 +75,13 @@ describe('<Typography />', () => {
     });
   });
 
+  describe('prop: inline', () => {
+    it('should render with the inline class', () => {
+      const wrapper = shallow(<Typography inline>Hello</Typography>);
+      assert.strictEqual(wrapper.hasClass(classes.inline), true);
+    });
+  });
+
   describe('headline', () => {
     it('should render a span by default', () => {
       const wrapper = shallow(<Typography variant="button">Hello</Typography>);
diff --git a/packages/material-ui/src/index.d.ts b/packages/material-ui/src/index.d.ts
index db00b3ae4226bd..cf9fa6bee6a925 100644
--- a/packages/material-ui/src/index.d.ts
+++ b/packages/material-ui/src/index.d.ts
@@ -159,6 +159,7 @@ export { default as InputAdornment } from './InputAdornment';
 export { default as InputBase } from './InputBase';
 export { default as InputLabel } from './InputLabel';
 export { default as LinearProgress } from './LinearProgress';
+export { default as Link } from './Link';
 export { default as List } from './List';
 export { default as ListItem } from './ListItem';
 export { default as ListItemAvatar } from './ListItemAvatar';
diff --git a/packages/material-ui/src/index.js b/packages/material-ui/src/index.js
index cc8a0332fcb1d0..aea2292098a2eb 100644
--- a/packages/material-ui/src/index.js
+++ b/packages/material-ui/src/index.js
@@ -63,6 +63,7 @@ export { default as InputAdornment } from './InputAdornment';
 export { default as InputBase } from './InputBase';
 export { default as InputLabel } from './InputLabel';
 export { default as LinearProgress } from './LinearProgress';
+export { default as Link } from './Link';
 export { default as List } from './List';
 export { default as ListItem } from './ListItem';
 export { default as ListItemAvatar } from './ListItemAvatar';
diff --git a/packages/material-ui/src/styles/overrides.d.ts b/packages/material-ui/src/styles/overrides.d.ts
index ee4f0b8dab1f1a..484b344f3adfed 100644
--- a/packages/material-ui/src/styles/overrides.d.ts
+++ b/packages/material-ui/src/styles/overrides.d.ts
@@ -50,6 +50,7 @@ import { InputBaseClassKey } from '../InputBase';
 import { InputLabelClassKey } from '../InputLabel';
 import { SwitchBaseClassKey } from '../internal/SwitchBase';
 import { LinearProgressClassKey } from '../LinearProgress';
+import { LinkClassKey } from '../Link';
 import { ListClassKey } from '../List';
 import { ListItemClassKey } from '../ListItem';
 import { ListItemAvatarClassKey } from '../ListItemAvatar';
@@ -145,6 +146,7 @@ export interface ComponentNameToClassKey {
   MuiInputBase: InputBaseClassKey;
   MuiInputLabel: InputLabelClassKey;
   MuiLinearProgress: LinearProgressClassKey;
+  MuiLink: LinkClassKey;
   MuiList: ListClassKey;
   MuiListItem: ListItemClassKey;
   MuiListItemAvatar: ListItemAvatarClassKey;
diff --git a/pages/_app.js b/pages/_app.js
index 690b7d3bd6335c..b4b075a5006b10 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -70,6 +70,9 @@ const pages = [
       {
         pathname: '/style/typography',
       },
+      {
+        pathname: '/style/links',
+      },
       {
         pathname: '/style/css-baseline',
         title: 'CSS Baseline',
diff --git a/pages/api/link.js b/pages/api/link.js
new file mode 100644
index 00000000000000..6bc4fbc0657f16
--- /dev/null
+++ b/pages/api/link.js
@@ -0,0 +1,11 @@
+import 'docs/src/modules/components/bootstrap';
+// --- Post bootstrap -----
+import React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import markdown from './link.md';
+
+function Page() {
+  return <MarkdownDocs markdown={markdown} />;
+}
+
+export default Page;
diff --git a/pages/api/link.md b/pages/api/link.md
new file mode 100644
index 00000000000000..92d0f17f4d01ca
--- /dev/null
+++ b/pages/api/link.md
@@ -0,0 +1,62 @@
+---
+filename: /packages/material-ui/src/Link/Link.js
+---
+
+<!--- This documentation is automatically generated, do not try to edit it. -->
+
+# Link API
+
+<p class="description">The API documentation of the Link React component. Learn more about the properties and the CSS customization points.</p>
+
+```js
+import Link from '@material-ui/core/Link';
+```
+
+
+
+## Props
+
+| Name | Type | Default | Description |
+|:-----|:-----|:--------|:------------|
+| <span class="prop-name">block</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Controls whether the link is inline or not. When `block` is true the link is not inline  when `block` is false it is. |
+| <span class="prop-name required">children *</span> | <span class="prop-type">node</span> |   | The content of the link. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object</span> |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. |
+| <span class="prop-name">color</span> | <span class="prop-type">enum:&nbsp;'error', 'inherit', 'primary', 'secondary', 'textPrimary', 'textSecondary'<br></span> | <span class="prop-default">'primary'</span> | The color of the link. |
+| <span class="prop-name">component</span> | <span class="prop-type">componentPropType</span> | <span class="prop-default">'a'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
+| <span class="prop-name">target</span> | <span class="prop-type">enum:&nbsp;'_self'&nbsp;&#124;<br>&nbsp;'_blank'&nbsp;&#124;<br>&nbsp;'_parent'&nbsp;&#124;<br>&nbsp;'_top'<br></span> | <span class="prop-default">'_self'</span> | The target of the link. You can read about this property on the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes) |
+| <span class="prop-name">TypographyClasses</span> | <span class="prop-type">object</span> |   | `classes` property applied to the [`Typography`](/api/typography/) element. |
+| <span class="prop-name">underline</span> | <span class="prop-type">enum:&nbsp;'none'&nbsp;&#124;<br>&nbsp;'hover'&nbsp;&#124;<br>&nbsp;'always'<br></span> | <span class="prop-default">'hover'</span> | Controls when the link should have an underline. |
+| <span class="prop-name">variant</span> | <span class="prop-type">string</span> | <span class="prop-default">'inherit'</span> | Applies the theme typography styles. |
+
+Any other properties supplied will be spread to the root element ([Typography](/api/typography/)).
+
+## CSS
+
+You can override all the class names injected by Material-UI thanks to the `classes` property.
+This property accepts the following keys:
+
+
+| Name | Description |
+|:-----|:------------|
+| <span class="prop-name">root</span> | Styles applied to the root element.
+| <span class="prop-name">underlineNone</span> | Styles applied to the root element if `underline="none"`
+| <span class="prop-name">underlineHover</span> | Styles applied to the root element if `underline="hover"`
+| <span class="prop-name">underlineAlways</span> | Styles applied to the root element if `underline="always"`
+| <span class="prop-name">button</span> | Styles applied to the root element if `component="button"`.
+
+Have a look at [overriding with classes](/customization/overrides/#overriding-with-classes) section
+and the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Link/Link.js)
+for more detail.
+
+If using the `overrides` [key of the theme](/customization/themes/#css),
+you need to use the following style sheet name: `MuiLink`.
+
+## Inheritance
+
+The properties of the [Typography](/api/typography/) component are also available.
+You can take advantage of this behavior to [target nested components](/guides/api/#spread).
+
+## Demos
+
+- [Links](/style/links/)
+
diff --git a/pages/api/svg-icon.md b/pages/api/svg-icon.md
index e4261b2d720c06..e707070b7d2875 100644
--- a/pages/api/svg-icon.md
+++ b/pages/api/svg-icon.md
@@ -24,7 +24,7 @@ import SvgIcon from '@material-ui/core/SvgIcon';
 | <span class="prop-name">component</span> | <span class="prop-type">componentPropType</span> | <span class="prop-default">'svg'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
 | <span class="prop-name">fontSize</span> | <span class="prop-type">enum:&nbsp;'inherit'&nbsp;&#124;<br>&nbsp;'default'&nbsp;&#124;<br>&nbsp;'small'&nbsp;&#124;<br>&nbsp;'large'<br></span> | <span class="prop-default">'default'</span> | The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size. |
 | <span class="prop-name">nativeColor</span> | <span class="prop-type">string</span> |   | Applies a color attribute to the SVG element. |
-| <span class="prop-name">shapeRendering</span> | <span class="prop-type">string</span> |   | The shape-rendering attribute. The behavior of the different options is described [here](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering). If you are having issues with blurry icons you should investigate this property. |
+| <span class="prop-name">shapeRendering</span> | <span class="prop-type">string</span> |   | The shape-rendering attribute. The behavior of the different options is described on the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering). If you are having issues with blurry icons you should investigate this property. |
 | <span class="prop-name">titleAccess</span> | <span class="prop-type">string</span> |   | Provides a human-readable title for the element that contains it. https://www.w3.org/TR/SVG-access/#Equivalent |
 | <span class="prop-name">viewBox</span> | <span class="prop-type">string</span> | <span class="prop-default">'0 0 24 24'</span> | Allows you to redefine what the coordinates without units mean inside an SVG element. For example, if the SVG element is 500 (width) by 200 (height), and you pass viewBox="0 0 50 20", this means that the coordinates inside the SVG will go from the top left corner (0,0) to bottom right (50,20) and each unit will be worth 10px. |
 
diff --git a/pages/api/typography.md b/pages/api/typography.md
index c4be4976fa8284..66e61bfcb009c9 100644
--- a/pages/api/typography.md
+++ b/pages/api/typography.md
@@ -25,6 +25,7 @@ import Typography from '@material-ui/core/Typography';
 | <span class="prop-name">component</span> | <span class="prop-type">componentPropType</span> |   | The component used for the root node. Either a string to use a DOM element or a component. By default, it maps the variant to a good default headline component. |
 | <span class="prop-name">gutterBottom</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the text will have a bottom margin. |
 | <span class="prop-name">headlineMapping</span> | <span class="prop-type">object</span> | <span class="prop-default">{  h1: 'h1',  h2: 'h2',  h3: 'h3',  h4: 'h4',  h5: 'h5',  h6: 'h6',  subtitle1: 'h6',  subtitle2: 'h6',  body1: 'p',  body2: 'p',  // deprecated  display4: 'h1',  display3: 'h1',  display2: 'h1',  display1: 'h1',  headline: 'h1',  title: 'h2',  subheading: 'h3',}</span> | We are empirically mapping the variant property to a range of different DOM element types. For instance, subtitle1 to `<h6>`. If you wish to change that mapping, you can provide your own. Alternatively, you can use the `component` property. The default mapping is the following: |
+| <span class="prop-name">inline</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Controls whether the Typography is inline or not. |
 | <span class="prop-name">internalDeprecatedVariant</span> | <span class="prop-type">bool</span> |   | A deprecated variant is used from an internal component. Users don't need a deprecation warning here if they switched to the v2 theme. They already get the mapping that will be applied in the next major release. |
 | <span class="prop-name">noWrap</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the text will not wrap, but instead will truncate with an ellipsis. |
 | <span class="prop-name">paragraph</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the text will have a bottom margin. |
@@ -75,6 +76,7 @@ This property accepts the following keys:
 | <span class="prop-name">colorTextPrimary</span> | Styles applied to the root element if `color="textPrimary"`.
 | <span class="prop-name">colorTextSecondary</span> | Styles applied to the root element if `color="textSecondary"`.
 | <span class="prop-name">colorError</span> | Styles applied to the root element if `color="error"`.
+| <span class="prop-name">inline</span> | Styles applied to the root element if `inline={true}`.
 
 Have a look at [overriding with classes](/customization/overrides/#overriding-with-classes) section
 and the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Typography/Typography.js)
diff --git a/pages/index.js b/pages/index.js
index 421d3b5ff706e4..e3a14f9c6b8017 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -121,12 +121,7 @@ class HomePage extends React.Component {
                 </Typography>
                 <Button
                   component={buttonProps => (
-                    <Link
-                      variant="button"
-                      prefetch
-                      href="/getting-started/installation"
-                      {...buttonProps}
-                    />
+                    <Link naked prefetch href="/getting-started/installation" {...buttonProps} />
                   )}
                   className={classes.button}
                   variant="outlined"
diff --git a/pages/style/links.js b/pages/style/links.js
new file mode 100644
index 00000000000000..d4a18a9ccd90bc
--- /dev/null
+++ b/pages/style/links.js
@@ -0,0 +1,14 @@
+import '../../docs/src/modules/components/bootstrap';
+// --- Post bootstrap -----
+import React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+
+const req = require.context('docs/src/pages/style/links', false, /\.md|\.js$/);
+const reqSource = require.context('!raw-loader!../../docs/src/pages/style/links', false, /\.js$/);
+const reqPrefix = 'pages/style/links';
+
+function Page() {
+  return <MarkdownDocs req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+}
+
+export default Page;