diff --git a/docs/src/pages/components/floating-action-button/FloatingActionButtonExtendedSize.js b/docs/src/pages/components/floating-action-button/FloatingActionButtonExtendedSize.js
new file mode 100644
index 00000000000000..5718fc5e2e35d4
--- /dev/null
+++ b/docs/src/pages/components/floating-action-button/FloatingActionButtonExtendedSize.js
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import Box from '@material-ui/core/Box';
+import Fab from '@material-ui/core/Fab';
+import NavigationIcon from '@material-ui/icons/Navigation';
+
+export default function FloatingActionButtonExtendedSize() {
+  return (
+    <Box
+      sx={{
+        '& button': { m: 1 },
+      }}
+    >
+      <Fab variant="extended" size="small" color="primary" aria-label="add">
+        <NavigationIcon sx={{ mr: 1 }} />
+        Extended
+      </Fab>
+      <Fab variant="extended" size="medium" color="primary" aria-label="add">
+        <NavigationIcon sx={{ mr: 1 }} />
+        Extended
+      </Fab>
+      <Fab variant="extended" color="primary" aria-label="add">
+        <NavigationIcon sx={{ mr: 1 }} />
+        Extended
+      </Fab>
+    </Box>
+  );
+}
diff --git a/docs/src/pages/components/floating-action-button/FloatingActionButtonExtendedSize.tsx b/docs/src/pages/components/floating-action-button/FloatingActionButtonExtendedSize.tsx
new file mode 100644
index 00000000000000..5718fc5e2e35d4
--- /dev/null
+++ b/docs/src/pages/components/floating-action-button/FloatingActionButtonExtendedSize.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import Box from '@material-ui/core/Box';
+import Fab from '@material-ui/core/Fab';
+import NavigationIcon from '@material-ui/icons/Navigation';
+
+export default function FloatingActionButtonExtendedSize() {
+  return (
+    <Box
+      sx={{
+        '& button': { m: 1 },
+      }}
+    >
+      <Fab variant="extended" size="small" color="primary" aria-label="add">
+        <NavigationIcon sx={{ mr: 1 }} />
+        Extended
+      </Fab>
+      <Fab variant="extended" size="medium" color="primary" aria-label="add">
+        <NavigationIcon sx={{ mr: 1 }} />
+        Extended
+      </Fab>
+      <Fab variant="extended" color="primary" aria-label="add">
+        <NavigationIcon sx={{ mr: 1 }} />
+        Extended
+      </Fab>
+    </Box>
+  );
+}
diff --git a/docs/src/pages/components/floating-action-button/FloatingActionButtonSize.js b/docs/src/pages/components/floating-action-button/FloatingActionButtonSize.js
index 250abd0c31d1a5..68ec64d499be3e 100644
--- a/docs/src/pages/components/floating-action-button/FloatingActionButtonSize.js
+++ b/docs/src/pages/components/floating-action-button/FloatingActionButtonSize.js
@@ -1,75 +1,24 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Fab from '@material-ui/core/Fab';
 import AddIcon from '@material-ui/icons/Add';
-import NavigationIcon from '@material-ui/icons/Navigation';
-
-const useStyles = makeStyles((theme) => ({
-  margin: {
-    margin: theme.spacing(1),
-  },
-  extendedIcon: {
-    marginRight: theme.spacing(1),
-  },
-}));
 
 export default function FloatingActionButtonSize() {
-  const classes = useStyles();
-
   return (
-    <div>
-      <div>
-        <Fab
-          size="small"
-          color="secondary"
-          aria-label="add"
-          className={classes.margin}
-        >
-          <AddIcon />
-        </Fab>
-        <Fab
-          size="medium"
-          color="secondary"
-          aria-label="add"
-          className={classes.margin}
-        >
-          <AddIcon />
-        </Fab>
-        <Fab color="secondary" aria-label="add" className={classes.margin}>
-          <AddIcon />
-        </Fab>
-      </div>
-      <div>
-        <Fab
-          variant="extended"
-          size="small"
-          color="primary"
-          aria-label="add"
-          className={classes.margin}
-        >
-          <NavigationIcon className={classes.extendedIcon} />
-          Extended
-        </Fab>
-        <Fab
-          variant="extended"
-          size="medium"
-          color="primary"
-          aria-label="add"
-          className={classes.margin}
-        >
-          <NavigationIcon className={classes.extendedIcon} />
-          Extended
-        </Fab>
-        <Fab
-          variant="extended"
-          color="primary"
-          aria-label="add"
-          className={classes.margin}
-        >
-          <NavigationIcon className={classes.extendedIcon} />
-          Extended
-        </Fab>
-      </div>
-    </div>
+    <Box
+      sx={{
+        '& :not(style)': { m: 1 },
+      }}
+    >
+      <Fab size="small" color="secondary" aria-label="add">
+        <AddIcon />
+      </Fab>
+      <Fab size="medium" color="secondary" aria-label="add">
+        <AddIcon />
+      </Fab>
+      <Fab color="secondary" aria-label="add">
+        <AddIcon />
+      </Fab>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/floating-action-button/FloatingActionButtonSize.tsx b/docs/src/pages/components/floating-action-button/FloatingActionButtonSize.tsx
index baa3ce162b1dcb..68ec64d499be3e 100644
--- a/docs/src/pages/components/floating-action-button/FloatingActionButtonSize.tsx
+++ b/docs/src/pages/components/floating-action-button/FloatingActionButtonSize.tsx
@@ -1,77 +1,24 @@
 import * as React from 'react';
-import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Fab from '@material-ui/core/Fab';
 import AddIcon from '@material-ui/icons/Add';
-import NavigationIcon from '@material-ui/icons/Navigation';
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    margin: {
-      margin: theme.spacing(1),
-    },
-    extendedIcon: {
-      marginRight: theme.spacing(1),
-    },
-  }),
-);
 
 export default function FloatingActionButtonSize() {
-  const classes = useStyles();
-
   return (
-    <div>
-      <div>
-        <Fab
-          size="small"
-          color="secondary"
-          aria-label="add"
-          className={classes.margin}
-        >
-          <AddIcon />
-        </Fab>
-        <Fab
-          size="medium"
-          color="secondary"
-          aria-label="add"
-          className={classes.margin}
-        >
-          <AddIcon />
-        </Fab>
-        <Fab color="secondary" aria-label="add" className={classes.margin}>
-          <AddIcon />
-        </Fab>
-      </div>
-      <div>
-        <Fab
-          variant="extended"
-          size="small"
-          color="primary"
-          aria-label="add"
-          className={classes.margin}
-        >
-          <NavigationIcon className={classes.extendedIcon} />
-          Extended
-        </Fab>
-        <Fab
-          variant="extended"
-          size="medium"
-          color="primary"
-          aria-label="add"
-          className={classes.margin}
-        >
-          <NavigationIcon className={classes.extendedIcon} />
-          Extended
-        </Fab>
-        <Fab
-          variant="extended"
-          color="primary"
-          aria-label="add"
-          className={classes.margin}
-        >
-          <NavigationIcon className={classes.extendedIcon} />
-          Extended
-        </Fab>
-      </div>
-    </div>
+    <Box
+      sx={{
+        '& :not(style)': { m: 1 },
+      }}
+    >
+      <Fab size="small" color="secondary" aria-label="add">
+        <AddIcon />
+      </Fab>
+      <Fab size="medium" color="secondary" aria-label="add">
+        <AddIcon />
+      </Fab>
+      <Fab color="secondary" aria-label="add">
+        <AddIcon />
+      </Fab>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/floating-action-button/FloatingActionButtonZoom.js b/docs/src/pages/components/floating-action-button/FloatingActionButtonZoom.js
index 89622fc096e867..881ca81b6a78ca 100644
--- a/docs/src/pages/components/floating-action-button/FloatingActionButtonZoom.js
+++ b/docs/src/pages/components/floating-action-button/FloatingActionButtonZoom.js
@@ -1,8 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import clsx from 'clsx';
 import SwipeableViews from 'react-swipeable-views';
-import { makeStyles, useTheme } from '@material-ui/core/styles';
+import { useTheme } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
@@ -45,29 +44,21 @@ function a11yProps(index) {
   };
 }
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    backgroundColor: theme.palette.background.paper,
-    width: 500,
-    position: 'relative',
-    minHeight: 200,
-  },
-  fab: {
-    position: 'absolute',
-    bottom: theme.spacing(2),
-    right: theme.spacing(2),
-  },
-  fabGreen: {
-    color: theme.palette.common.white,
-    backgroundColor: green[500],
-    '&:hover': {
-      backgroundColor: green[600],
-    },
+const fabStyle = {
+  position: 'absolute',
+  bottom: 16,
+  right: 16,
+};
+
+const fabGreenStyle = {
+  color: 'common.white',
+  bgcolor: green[500],
+  '&:hover': {
+    bgcolor: green[600],
   },
-}));
+};
 
 export default function FloatingActionButtonZoom() {
-  const classes = useStyles();
   const theme = useTheme();
   const [value, setValue] = React.useState(0);
 
@@ -87,26 +78,33 @@ export default function FloatingActionButtonZoom() {
   const fabs = [
     {
       color: 'primary',
-      className: classes.fab,
+      sx: fabStyle,
       icon: <AddIcon />,
       label: 'Add',
     },
     {
       color: 'secondary',
-      className: classes.fab,
+      sx: fabStyle,
       icon: <EditIcon />,
       label: 'Edit',
     },
     {
       color: 'inherit',
-      className: clsx(classes.fab, classes.fabGreen),
+      sx: { ...fabStyle, ...fabGreenStyle },
       icon: <UpIcon />,
       label: 'Expand',
     },
   ];
 
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        bgcolor: 'background.paper',
+        width: 500,
+        position: 'relative',
+        minHeight: 200,
+      }}
+    >
       <AppBar position="static" color="default">
         <Tabs
           value={value}
@@ -146,11 +144,11 @@ export default function FloatingActionButtonZoom() {
           }}
           unmountOnExit
         >
-          <Fab aria-label={fab.label} className={fab.className} color={fab.color}>
+          <Fab sx={fab.sx} aria-label={fab.label} color={fab.color}>
             {fab.icon}
           </Fab>
         </Zoom>
       ))}
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/floating-action-button/FloatingActionButtonZoom.tsx b/docs/src/pages/components/floating-action-button/FloatingActionButtonZoom.tsx
index 6ac9b6b543fbbe..59ae75e1d8ecfc 100644
--- a/docs/src/pages/components/floating-action-button/FloatingActionButtonZoom.tsx
+++ b/docs/src/pages/components/floating-action-button/FloatingActionButtonZoom.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
-import clsx from 'clsx';
 import SwipeableViews from 'react-swipeable-views';
-import { makeStyles, useTheme, Theme, createStyles } from '@material-ui/core/styles';
+import { useTheme } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
@@ -13,6 +12,7 @@ import EditIcon from '@material-ui/icons/Edit';
 import UpIcon from '@material-ui/icons/KeyboardArrowUp';
 import { green } from '@material-ui/core/colors';
 import Box from '@material-ui/core/Box';
+import { SxProps } from '@material-ui/system';
 
 interface TabPanelProps {
   children?: React.ReactNode;
@@ -45,31 +45,21 @@ function a11yProps(index: any) {
   };
 }
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      backgroundColor: theme.palette.background.paper,
-      width: 500,
-      position: 'relative',
-      minHeight: 200,
-    },
-    fab: {
-      position: 'absolute',
-      bottom: theme.spacing(2),
-      right: theme.spacing(2),
-    },
-    fabGreen: {
-      color: theme.palette.common.white,
-      backgroundColor: green[500],
-      '&:hover': {
-        backgroundColor: green[600],
-      },
-    },
-  }),
-);
+const fabStyle = {
+  position: 'absolute',
+  bottom: 16,
+  right: 16,
+};
+
+const fabGreenStyle = {
+  color: 'common.white',
+  bgcolor: green[500],
+  '&:hover': {
+    bgcolor: green[600],
+  },
+};
 
 export default function FloatingActionButtonZoom() {
-  const classes = useStyles();
   const theme = useTheme();
   const [value, setValue] = React.useState(0);
 
@@ -89,26 +79,33 @@ export default function FloatingActionButtonZoom() {
   const fabs = [
     {
       color: 'primary' as 'primary',
-      className: classes.fab,
+      sx: fabStyle as SxProps,
       icon: <AddIcon />,
       label: 'Add',
     },
     {
       color: 'secondary' as 'secondary',
-      className: classes.fab,
+      sx: fabStyle as SxProps,
       icon: <EditIcon />,
       label: 'Edit',
     },
     {
       color: 'inherit' as 'inherit',
-      className: clsx(classes.fab, classes.fabGreen),
+      sx: { ...fabStyle, ...fabGreenStyle } as SxProps,
       icon: <UpIcon />,
       label: 'Expand',
     },
   ];
 
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        bgcolor: 'background.paper',
+        width: 500,
+        position: 'relative',
+        minHeight: 200,
+      }}
+    >
       <AppBar position="static" color="default">
         <Tabs
           value={value}
@@ -148,11 +145,11 @@ export default function FloatingActionButtonZoom() {
           }}
           unmountOnExit
         >
-          <Fab aria-label={fab.label} className={fab.className} color={fab.color}>
+          <Fab sx={fab.sx} aria-label={fab.label} color={fab.color}>
             {fab.icon}
           </Fab>
         </Zoom>
       ))}
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/floating-action-button/FloatingActionButtons.js b/docs/src/pages/components/floating-action-button/FloatingActionButtons.js
index 77f8f7a8203ee1..547dc1c902dcc6 100644
--- a/docs/src/pages/components/floating-action-button/FloatingActionButtons.js
+++ b/docs/src/pages/components/floating-action-button/FloatingActionButtons.js
@@ -1,27 +1,18 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Fab from '@material-ui/core/Fab';
 import AddIcon from '@material-ui/icons/Add';
 import EditIcon from '@material-ui/icons/Edit';
 import FavoriteIcon from '@material-ui/icons/Favorite';
 import NavigationIcon from '@material-ui/icons/Navigation';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    '& > *': {
-      margin: theme.spacing(1),
-    },
-  },
-  extendedIcon: {
-    marginRight: theme.spacing(1),
-  },
-}));
-
 export default function FloatingActionButtons() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        '& > :not(style)': { m: 1 },
+      }}
+    >
       <Fab color="primary" aria-label="add">
         <AddIcon />
       </Fab>
@@ -29,12 +20,12 @@ export default function FloatingActionButtons() {
         <EditIcon />
       </Fab>
       <Fab variant="extended">
-        <NavigationIcon className={classes.extendedIcon} />
+        <NavigationIcon sx={{ mr: 1 }} />
         Navigate
       </Fab>
       <Fab disabled aria-label="like">
         <FavoriteIcon />
       </Fab>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/floating-action-button/FloatingActionButtons.tsx b/docs/src/pages/components/floating-action-button/FloatingActionButtons.tsx
index dee45e98233d6f..547dc1c902dcc6 100644
--- a/docs/src/pages/components/floating-action-button/FloatingActionButtons.tsx
+++ b/docs/src/pages/components/floating-action-button/FloatingActionButtons.tsx
@@ -1,29 +1,18 @@
 import * as React from 'react';
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Fab from '@material-ui/core/Fab';
 import AddIcon from '@material-ui/icons/Add';
 import EditIcon from '@material-ui/icons/Edit';
 import FavoriteIcon from '@material-ui/icons/Favorite';
 import NavigationIcon from '@material-ui/icons/Navigation';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      '& > *': {
-        margin: theme.spacing(1),
-      },
-    },
-    extendedIcon: {
-      marginRight: theme.spacing(1),
-    },
-  }),
-);
-
 export default function FloatingActionButtons() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        '& > :not(style)': { m: 1 },
+      }}
+    >
       <Fab color="primary" aria-label="add">
         <AddIcon />
       </Fab>
@@ -31,12 +20,12 @@ export default function FloatingActionButtons() {
         <EditIcon />
       </Fab>
       <Fab variant="extended">
-        <NavigationIcon className={classes.extendedIcon} />
+        <NavigationIcon sx={{ mr: 1 }} />
         Navigate
       </Fab>
       <Fab disabled aria-label="like">
         <FavoriteIcon />
       </Fab>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/floating-action-button/floating-action-button.md b/docs/src/pages/components/floating-action-button/floating-action-button.md
index 78dd80b9f75a8d..7eacf9edcff5f3 100644
--- a/docs/src/pages/components/floating-action-button/floating-action-button.md
+++ b/docs/src/pages/components/floating-action-button/floating-action-button.md
@@ -23,10 +23,12 @@ Only one component is recommended per screen to represent the most common action
 
 ## Size
 
-Use the `size` prop for larger or smaller floating action buttons.
+By default, the size is `large`. Use the `size` prop for smaller floating action buttons.
 
 {{"demo": "pages/components/floating-action-button/FloatingActionButtonSize.js"}}
 
+{{"demo": "pages/components/floating-action-button/FloatingActionButtonExtendedSize.js"}}
+
 ## Animation
 
 The floating action button animates onto the screen as an expanding piece of material, by default.
diff --git a/packages/material-ui/src/Fab/Fab.test.js b/packages/material-ui/src/Fab/Fab.test.js
index c95db22164e25a..c8e182abf3ea8d 100644
--- a/packages/material-ui/src/Fab/Fab.test.js
+++ b/packages/material-ui/src/Fab/Fab.test.js
@@ -8,10 +8,9 @@ import {
   act,
   fireEvent,
 } from 'test/utils';
-import Fab from './Fab';
-import ButtonBase, { touchRippleClasses } from '../ButtonBase';
-import Icon from '../Icon';
-import classes from './fabClasses';
+import Fab, { fabClasses as classes } from '@material-ui/core/Fab';
+import ButtonBase, { touchRippleClasses } from '@material-ui/core/ButtonBase';
+import Icon from '@material-ui/core/Icon';
 
 describe('<Fab />', () => {
   const render = createClientRender();