diff --git a/docs/src/pages/components/avatars/BadgeAvatars.js b/docs/src/pages/components/avatars/BadgeAvatars.js
index 32ab5ef47331b1..51deb2a9cbddb9 100644
--- a/docs/src/pages/components/avatars/BadgeAvatars.js
+++ b/docs/src/pages/components/avatars/BadgeAvatars.js
@@ -1,16 +1,79 @@
 import React from 'react';
 import Badge from '@material-ui/core/Badge';
 import Avatar from '@material-ui/core/Avatar';
+import { makeStyles, withStyles } from '@material-ui/core/styles';
+
+const StyledBadge = withStyles(theme => ({
+  badge: {
+    backgroundColor: '#44b700',
+    color: '#44b700',
+    boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
+    '&::after': {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      borderRadius: '50%',
+      animation: '$ripple 1.2s infinite ease-in-out',
+      border: '1px solid currentColor',
+      content: '""',
+    },
+  },
+  '@keyframes ripple': {
+    '0%': {
+      transform: 'scale(.8)',
+      opacity: 1,
+    },
+    '100%': {
+      transform: 'scale(2.4)',
+      opacity: 0,
+    },
+  },
+}))(Badge);
+
+const SmallAvatar = withStyles(theme => ({
+  root: {
+    width: 22,
+    height: 22,
+    border: `2px solid ${theme.palette.background.paper}`,
+  },
+}))(Avatar);
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    '& > *': {
+      margin: theme.spacing(1),
+    },
+  },
+}));
 
 export default function BadgeAvatars() {
+  const classes = useStyles();
+
   return (
-    <Badge
-      overlap="circle"
-      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-      badgeContent={1}
-      color="error"
-    >
-      <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
-    </Badge>
+    <div className={classes.root}>
+      <StyledBadge
+        overlap="circle"
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
+        variant="dot"
+      >
+        <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+      </StyledBadge>
+      <Badge
+        overlap="circle"
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
+        badgeContent={<SmallAvatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />}
+      >
+        <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
+      </Badge>
+    </div>
   );
 }
diff --git a/docs/src/pages/components/avatars/BadgeAvatars.tsx b/docs/src/pages/components/avatars/BadgeAvatars.tsx
index 32ab5ef47331b1..ae4354d24785e8 100644
--- a/docs/src/pages/components/avatars/BadgeAvatars.tsx
+++ b/docs/src/pages/components/avatars/BadgeAvatars.tsx
@@ -1,16 +1,85 @@
 import React from 'react';
 import Badge from '@material-ui/core/Badge';
 import Avatar from '@material-ui/core/Avatar';
+import { Theme, makeStyles, withStyles, createStyles } from '@material-ui/core/styles';
+
+const StyledBadge = withStyles((theme: Theme) =>
+  createStyles({
+    badge: {
+      backgroundColor: '#44b700',
+      color: '#44b700',
+      boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
+      '&::after': {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        borderRadius: '50%',
+        animation: '$ripple 1.2s infinite ease-in-out',
+        border: '1px solid currentColor',
+        content: '""',
+      },
+    },
+    '@keyframes ripple': {
+      '0%': {
+        transform: 'scale(.8)',
+        opacity: 1,
+      },
+      '100%': {
+        transform: 'scale(2.4)',
+        opacity: 0,
+      },
+    },
+  }),
+)(Badge);
+
+const SmallAvatar = withStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: 22,
+      height: 22,
+      border: `2px solid ${theme.palette.background.paper}`,
+    },
+  }),
+)(Avatar);
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      display: 'flex',
+      '& > *': {
+        margin: theme.spacing(1),
+      },
+    },
+  }),
+);
 
 export default function BadgeAvatars() {
+  const classes = useStyles();
+
   return (
-    <Badge
-      overlap="circle"
-      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-      badgeContent={1}
-      color="error"
-    >
-      <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
-    </Badge>
+    <div className={classes.root}>
+      <StyledBadge
+        overlap="circle"
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
+        variant="dot"
+      >
+        <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+      </StyledBadge>
+      <Badge
+        overlap="circle"
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
+        badgeContent={<SmallAvatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />}
+      >
+        <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
+      </Badge>
+    </div>
   );
 }
diff --git a/docs/src/pages/components/avatars/ImageAvatars.js b/docs/src/pages/components/avatars/ImageAvatars.js
index 33bec663f1f6db..468fab2ea8493e 100644
--- a/docs/src/pages/components/avatars/ImageAvatars.js
+++ b/docs/src/pages/components/avatars/ImageAvatars.js
@@ -9,10 +9,6 @@ const useStyles = makeStyles(theme => ({
       margin: theme.spacing(1),
     },
   },
-  bigAvatar: {
-    width: 60,
-    height: 60,
-  },
 }));
 
 export default function ImageAvatars() {
@@ -21,7 +17,8 @@ export default function ImageAvatars() {
   return (
     <div className={classes.root}>
       <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
-      <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" className={classes.bigAvatar} />
+      <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
+      <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
     </div>
   );
 }
diff --git a/docs/src/pages/components/avatars/ImageAvatars.tsx b/docs/src/pages/components/avatars/ImageAvatars.tsx
index 9739765e4541a9..7725d7640332d0 100644
--- a/docs/src/pages/components/avatars/ImageAvatars.tsx
+++ b/docs/src/pages/components/avatars/ImageAvatars.tsx
@@ -10,10 +10,6 @@ const useStyles = makeStyles((theme: Theme) =>
         margin: theme.spacing(1),
       },
     },
-    bigAvatar: {
-      width: 60,
-      height: 60,
-    },
   }),
 );
 
@@ -23,7 +19,8 @@ export default function ImageAvatars() {
   return (
     <div className={classes.root}>
       <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
-      <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" className={classes.bigAvatar} />
+      <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
+      <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
     </div>
   );
 }
diff --git a/docs/src/pages/components/avatars/SizeAvatars.js b/docs/src/pages/components/avatars/SizeAvatars.js
new file mode 100644
index 00000000000000..e9d0028594137f
--- /dev/null
+++ b/docs/src/pages/components/avatars/SizeAvatars.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Avatar from '@material-ui/core/Avatar';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    '& > *': {
+      margin: theme.spacing(1),
+    },
+  },
+  small: {
+    width: theme.spacing(3),
+    height: theme.spacing(3),
+  },
+  large: {
+    width: theme.spacing(7),
+    height: theme.spacing(7),
+  },
+}));
+
+export default function ImageAvatars() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" className={classes.small} />
+      <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+      <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" className={classes.large} />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/avatars/SizeAvatars.tsx b/docs/src/pages/components/avatars/SizeAvatars.tsx
new file mode 100644
index 00000000000000..43c152d6ad5be4
--- /dev/null
+++ b/docs/src/pages/components/avatars/SizeAvatars.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Avatar from '@material-ui/core/Avatar';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      display: 'flex',
+      '& > *': {
+        margin: theme.spacing(1),
+      },
+    },
+    small: {
+      width: theme.spacing(3),
+      height: theme.spacing(3),
+    },
+    large: {
+      width: theme.spacing(7),
+      height: theme.spacing(7),
+    },
+  }),
+);
+
+export default function ImageAvatars() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" className={classes.small} />
+      <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+      <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" className={classes.large} />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/avatars/avatars.md b/docs/src/pages/components/avatars/avatars.md
index adfa454cfd5467..c3577afe020552 100644
--- a/docs/src/pages/components/avatars/avatars.md
+++ b/docs/src/pages/components/avatars/avatars.md
@@ -19,6 +19,12 @@ Avatars containing simple characters can be created by passing your string as `c
 
 {{"demo": "pages/components/avatars/LetterAvatars.js"}}
 
+## Sizes
+
+You can change the size of the avatar with the `height` and `width` CSS properties.
+
+{{"demo": "pages/components/avatars/SizeAvatars.js"}}
+
 ## Icon avatars
 
 Icon avatars are created by passing an icon as `children`.
@@ -41,12 +47,12 @@ The component fallbacks if there is an error loading the avatar image, in this o
 
 {{"demo": "pages/components/avatars/FallbackAvatars.js"}}
 
-## With badge
-
-{{"demo": "pages/components/avatars/BadgeAvatars.js"}}
-
 ## Grouped
 
 `AvatarGroup` renders its children as a stack.
 
 {{"demo": "pages/components/avatars/GroupAvatars.js"}}
+
+## With badge
+
+{{"demo": "pages/components/avatars/BadgeAvatars.js"}}
diff --git a/docs/src/pages/components/badges/BadgeAlignment.js b/docs/src/pages/components/badges/BadgeAlignment.js
index ee660970f43db4..27574669afb161 100644
--- a/docs/src/pages/components/badges/BadgeAlignment.js
+++ b/docs/src/pages/components/badges/BadgeAlignment.js
@@ -7,11 +7,11 @@ import Radio from '@material-ui/core/Radio';
 import RadioGroup from '@material-ui/core/RadioGroup';
 import { makeStyles } from '@material-ui/core/styles';
 import MailIcon from '@material-ui/icons/Mail';
+import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
 
 const useStyles = makeStyles(theme => ({
   root: {
-    display: 'flex',
-    flexDirection: 'column',
+    width: '100%',
   },
   formControl: {
     margin: theme.spacing(3),
@@ -38,19 +38,30 @@ export default function BadgeAlignment() {
     setVertical(event.target.value);
   };
 
+  const code = `
+\`\`\`jsx
+<Badge
+  anchorOrigin={{
+    vertical: '${vertical}',
+    horizontal: '${horizontal}',
+  }}
+>
+\`\`\`
+`;
+
   return (
     <div className={classes.root}>
       <div className={classes.row}>
         <FormControl component="fieldset" className={classes.formControl}>
           <FormLabel component="legend">Vertical</FormLabel>
-          <RadioGroup value={vertical} onChange={handleVerticalChange}>
+          <RadioGroup name="vertical" value={vertical} onChange={handleVerticalChange}>
             <FormControlLabel value="top" control={<Radio />} label="Top" />
             <FormControlLabel value="bottom" control={<Radio />} label="Bottom" />
           </RadioGroup>
         </FormControl>
         <FormControl component="fieldset" className={classes.formControl}>
           <FormLabel component="legend">Horizontal</FormLabel>
-          <RadioGroup value={horizontal} onChange={handleHorizontalChange}>
+          <RadioGroup name="horizontal" value={horizontal} onChange={handleHorizontalChange}>
             <FormControlLabel value="right" control={<Radio />} label="Right" />
             <FormControlLabel value="left" control={<Radio />} label="Left" />
           </RadioGroup>
@@ -115,6 +126,7 @@ export default function BadgeAlignment() {
           <MailIcon />
         </Badge>
       </div>
+      <MarkdownElement text={code} />
     </div>
   );
 }
diff --git a/docs/src/pages/components/badges/BadgeAlignment.tsx b/docs/src/pages/components/badges/BadgeAlignment.tsx
deleted file mode 100644
index 8792389d0d65b4..00000000000000
--- a/docs/src/pages/components/badges/BadgeAlignment.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import React from 'react';
-import Badge from '@material-ui/core/Badge';
-import FormControl from '@material-ui/core/FormControl';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import FormLabel from '@material-ui/core/FormLabel';
-import Radio from '@material-ui/core/Radio';
-import RadioGroup from '@material-ui/core/RadioGroup';
-import { Theme, createStyles, makeStyles } from '@material-ui/core/styles';
-import MailIcon from '@material-ui/icons/Mail';
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      display: 'flex',
-      flexDirection: 'column',
-    },
-    formControl: {
-      margin: theme.spacing(3),
-    },
-    row: {
-      display: 'flex',
-      justifyContent: 'center',
-    },
-    margin: {
-      margin: theme.spacing(2),
-    },
-  }),
-);
-
-export default function BadgeAlignment() {
-  const classes = useStyles();
-  const [horizontal, setHorizontal] = React.useState<'left' | 'right'>('right');
-  const [vertical, setVertical] = React.useState<'top' | 'bottom'>('top');
-
-  const handleHorizontalChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setHorizontal((event.target as HTMLInputElement).value as 'left' | 'right');
-  };
-
-  const handleVerticalChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setVertical((event.target as HTMLInputElement).value as 'top' | 'bottom');
-  };
-
-  return (
-    <div className={classes.root}>
-      <div className={classes.row}>
-        <FormControl component="fieldset" className={classes.formControl}>
-          <FormLabel component="legend">Vertical</FormLabel>
-          <RadioGroup value={vertical} onChange={handleVerticalChange}>
-            <FormControlLabel value="top" control={<Radio />} label="Top" />
-            <FormControlLabel value="bottom" control={<Radio />} label="Bottom" />
-          </RadioGroup>
-        </FormControl>
-        <FormControl component="fieldset" className={classes.formControl}>
-          <FormLabel component="legend">Horizontal</FormLabel>
-          <RadioGroup value={horizontal} onChange={handleHorizontalChange}>
-            <FormControlLabel value="right" control={<Radio />} label="Right" />
-            <FormControlLabel value="left" control={<Radio />} label="Left" />
-          </RadioGroup>
-        </FormControl>
-      </div>
-      <div className={classes.row}>
-        <Badge
-          color="secondary"
-          variant="dot"
-          badgeContent={1}
-          anchorOrigin={{
-            horizontal,
-            vertical,
-          }}
-          className={classes.margin}
-        >
-          <MailIcon />
-        </Badge>
-        <Badge
-          color="secondary"
-          badgeContent={1}
-          anchorOrigin={{
-            horizontal,
-            vertical,
-          }}
-          className={classes.margin}
-        >
-          <MailIcon />
-        </Badge>
-        <Badge
-          color="secondary"
-          badgeContent={12}
-          anchorOrigin={{
-            horizontal,
-            vertical,
-          }}
-          className={classes.margin}
-        >
-          <MailIcon />
-        </Badge>
-        <Badge
-          color="secondary"
-          badgeContent={123}
-          anchorOrigin={{
-            horizontal,
-            vertical,
-          }}
-          className={classes.margin}
-        >
-          <MailIcon />
-        </Badge>
-        <Badge
-          color="secondary"
-          max={999}
-          badgeContent={1337}
-          anchorOrigin={{
-            horizontal,
-            vertical,
-          }}
-          className={classes.margin}
-        >
-          <MailIcon />
-        </Badge>
-      </div>
-    </div>
-  );
-}
diff --git a/docs/src/pages/components/badges/BadgeMax.js b/docs/src/pages/components/badges/BadgeMax.js
index ff317f609897f8..7b756a155f6089 100644
--- a/docs/src/pages/components/badges/BadgeMax.js
+++ b/docs/src/pages/components/badges/BadgeMax.js
@@ -1,26 +1,30 @@
 import React from 'react';
-import Box from '@material-ui/core/Box';
+import { makeStyles } from '@material-ui/core/styles';
 import Badge from '@material-ui/core/Badge';
 import MailIcon from '@material-ui/icons/Mail';
 
+const useStyles = makeStyles(theme => ({
+  root: {
+    '& > *': {
+      margin: theme.spacing(2),
+    },
+  },
+}));
+
 export default function BadgeMax() {
+  const classes = useStyles();
+
   return (
-    <Box display="flex">
-      <Box m={2}>
-        <Badge badgeContent={99} color="primary">
-          <MailIcon />
-        </Badge>
-      </Box>
-      <Box m={2}>
-        <Badge badgeContent={100} color="primary">
-          <MailIcon />
-        </Badge>
-      </Box>
-      <Box m={2}>
-        <Badge badgeContent={1000} max={999} color="primary">
-          <MailIcon />
-        </Badge>
-      </Box>
-    </Box>
+    <div className={classes.root}>
+      <Badge badgeContent={99} color="primary">
+        <MailIcon />
+      </Badge>
+      <Badge badgeContent={100} color="primary">
+        <MailIcon />
+      </Badge>
+      <Badge badgeContent={1000} max={999} color="primary">
+        <MailIcon />
+      </Badge>
+    </div>
   );
 }
diff --git a/docs/src/pages/components/badges/BadgeMax.tsx b/docs/src/pages/components/badges/BadgeMax.tsx
index ff317f609897f8..ae688b01589177 100644
--- a/docs/src/pages/components/badges/BadgeMax.tsx
+++ b/docs/src/pages/components/badges/BadgeMax.tsx
@@ -1,26 +1,32 @@
 import React from 'react';
-import Box from '@material-ui/core/Box';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
 import Badge from '@material-ui/core/Badge';
 import MailIcon from '@material-ui/icons/Mail';
 
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      '& > *': {
+        margin: theme.spacing(2),
+      },
+    },
+  }),
+);
+
 export default function BadgeMax() {
+  const classes = useStyles();
+
   return (
-    <Box display="flex">
-      <Box m={2}>
-        <Badge badgeContent={99} color="primary">
-          <MailIcon />
-        </Badge>
-      </Box>
-      <Box m={2}>
-        <Badge badgeContent={100} color="primary">
-          <MailIcon />
-        </Badge>
-      </Box>
-      <Box m={2}>
-        <Badge badgeContent={1000} max={999} color="primary">
-          <MailIcon />
-        </Badge>
-      </Box>
-    </Box>
+    <div className={classes.root}>
+      <Badge badgeContent={99} color="primary">
+        <MailIcon />
+      </Badge>
+      <Badge badgeContent={100} color="primary">
+        <MailIcon />
+      </Badge>
+      <Badge badgeContent={1000} max={999} color="primary">
+        <MailIcon />
+      </Badge>
+    </div>
   );
 }
diff --git a/docs/src/pages/components/badges/BadgeOverlap.js b/docs/src/pages/components/badges/BadgeOverlap.js
index d578ec6b30c6e1..278f60f05484a5 100644
--- a/docs/src/pages/components/badges/BadgeOverlap.js
+++ b/docs/src/pages/components/badges/BadgeOverlap.js
@@ -1,23 +1,13 @@
 import React from 'react';
 import clsx from 'clsx';
-import Badge from '@material-ui/core/Badge';
-import FormControl from '@material-ui/core/FormControl';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import FormLabel from '@material-ui/core/FormLabel';
-import Radio from '@material-ui/core/Radio';
-import RadioGroup from '@material-ui/core/RadioGroup';
 import { makeStyles } from '@material-ui/core/styles';
+import Badge from '@material-ui/core/Badge';
 
 const useStyles = makeStyles(theme => ({
-  formControl: {
-    marginBottom: theme.spacing(3),
-  },
-  row: {
-    display: 'flex',
-    justifyContent: 'center',
-  },
-  shapeContainer: {
-    margin: theme.spacing(2),
+  root: {
+    '& > *': {
+      margin: theme.spacing(1),
+    },
   },
   shape: {
     backgroundColor: theme.palette.primary.main,
@@ -31,35 +21,24 @@ const useStyles = makeStyles(theme => ({
 
 export default function BadgeOverlap() {
   const classes = useStyles();
-  const [overlap, setOverlap] = React.useState('rectangle');
 
-  const handleChange = event => {
-    setOverlap(event.target.value);
-  };
+  const rectangle = <div className={classes.shape} />;
+  const circle = <div className={clsx(classes.shape, classes.shapeCircle)} />;
 
   return (
-    <div>
-      <div className={classes.row}>
-        <FormControl component="fieldset" className={classes.formControl}>
-          <FormLabel component="legend">Overlap</FormLabel>
-          <RadioGroup value={overlap} onChange={handleChange}>
-            <FormControlLabel value="rectangle" control={<Radio />} label="Rectangle" />
-            <FormControlLabel value="circle" control={<Radio />} label="Circle" />
-          </RadioGroup>
-        </FormControl>
-      </div>
-      <div className={classes.row}>
-        <div className={classes.shapeContainer}>
-          <Badge color="secondary" overlap={overlap} badgeContent=" " variant="dot">
-            <div className={clsx(classes.shape, overlap === 'circle' && classes.shapeCircle)} />
-          </Badge>
-        </div>
-        <div className={classes.shapeContainer}>
-          <Badge color="secondary" overlap={overlap} badgeContent=" ">
-            <div className={clsx(classes.shape, overlap === 'circle' && classes.shapeCircle)} />
-          </Badge>
-        </div>
-      </div>
+    <div className={classes.root}>
+      <Badge color="secondary" badgeContent=" ">
+        {rectangle}
+      </Badge>
+      <Badge color="secondary" badgeContent=" " variant="dot">
+        {rectangle}
+      </Badge>
+      <Badge color="secondary" overlap="circle" badgeContent=" ">
+        {circle}
+      </Badge>
+      <Badge color="secondary" overlap="circle" badgeContent=" " variant="dot">
+        {circle}
+      </Badge>
     </div>
   );
 }
diff --git a/docs/src/pages/components/badges/BadgeOverlap.tsx b/docs/src/pages/components/badges/BadgeOverlap.tsx
index 85bc7634509afd..29669b01930e9c 100644
--- a/docs/src/pages/components/badges/BadgeOverlap.tsx
+++ b/docs/src/pages/components/badges/BadgeOverlap.tsx
@@ -1,24 +1,14 @@
 import React from 'react';
 import clsx from 'clsx';
-import Badge from '@material-ui/core/Badge';
-import FormControl from '@material-ui/core/FormControl';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import FormLabel from '@material-ui/core/FormLabel';
-import Radio from '@material-ui/core/Radio';
-import RadioGroup from '@material-ui/core/RadioGroup';
 import { Theme, createStyles, makeStyles } from '@material-ui/core/styles';
+import Badge from '@material-ui/core/Badge';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
-    formControl: {
-      marginBottom: theme.spacing(3),
-    },
-    row: {
-      display: 'flex',
-      justifyContent: 'center',
-    },
-    shapeContainer: {
-      margin: theme.spacing(2),
+    root: {
+      '& > *': {
+        margin: theme.spacing(1),
+      },
     },
     shape: {
       backgroundColor: theme.palette.primary.main,
@@ -33,35 +23,24 @@ const useStyles = makeStyles((theme: Theme) =>
 
 export default function BadgeOverlap() {
   const classes = useStyles();
-  const [overlap, setOverlap] = React.useState<'circle' | 'rectangle'>('rectangle');
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setOverlap((event.target as HTMLInputElement).value as 'circle' | 'rectangle');
-  };
+  const rectangle = <div className={classes.shape} />;
+  const circle = <div className={clsx(classes.shape, classes.shapeCircle)} />;
 
   return (
-    <div>
-      <div className={classes.row}>
-        <FormControl component="fieldset" className={classes.formControl}>
-          <FormLabel component="legend">Overlap</FormLabel>
-          <RadioGroup value={overlap} onChange={handleChange}>
-            <FormControlLabel value="rectangle" control={<Radio />} label="Rectangle" />
-            <FormControlLabel value="circle" control={<Radio />} label="Circle" />
-          </RadioGroup>
-        </FormControl>
-      </div>
-      <div className={classes.row}>
-        <div className={classes.shapeContainer}>
-          <Badge color="secondary" overlap={overlap} badgeContent=" " variant="dot">
-            <div className={clsx(classes.shape, overlap === 'circle' && classes.shapeCircle)} />
-          </Badge>
-        </div>
-        <div className={classes.shapeContainer}>
-          <Badge color="secondary" overlap={overlap} badgeContent=" ">
-            <div className={clsx(classes.shape, overlap === 'circle' && classes.shapeCircle)} />
-          </Badge>
-        </div>
-      </div>
+    <div className={classes.root}>
+      <Badge color="secondary" badgeContent=" ">
+        {rectangle}
+      </Badge>
+      <Badge color="secondary" badgeContent=" " variant="dot">
+        {rectangle}
+      </Badge>
+      <Badge color="secondary" overlap="circle" badgeContent=" ">
+        {circle}
+      </Badge>
+      <Badge color="secondary" overlap="circle" badgeContent=" " variant="dot">
+        {circle}
+      </Badge>
     </div>
   );
 }
diff --git a/docs/src/pages/components/badges/CustomizedBadges.js b/docs/src/pages/components/badges/CustomizedBadges.js
index 74f2a2d0dcc4a2..6071cca81b3589 100644
--- a/docs/src/pages/components/badges/CustomizedBadges.js
+++ b/docs/src/pages/components/badges/CustomizedBadges.js
@@ -1,89 +1,24 @@
 import React from 'react';
 import Badge from '@material-ui/core/Badge';
-import Box from '@material-ui/core/Box';
-import Avatar from '@material-ui/core/Avatar';
 import { withStyles } from '@material-ui/core/styles';
 import IconButton from '@material-ui/core/IconButton';
 import ShoppingCartIcon from '@material-ui/icons/ShoppingCart';
 
-const StyledBadge1 = withStyles(theme => ({
+const StyledBadge = withStyles(theme => ({
   badge: {
     right: -3,
+    top: 13,
     border: `2px solid ${theme.palette.background.paper}`,
     padding: '0 4px',
   },
 }))(Badge);
 
-const StyledBadge2 = withStyles(theme => ({
-  badge: {
-    backgroundColor: '#44b700',
-    boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
-    '&::after': {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      width: '100%',
-      height: '100%',
-      borderRadius: '50%',
-      animation: '$ripple 1.2s infinite ease-in-out',
-      border: '1px solid #44b700',
-      content: '""',
-    },
-  },
-  '@keyframes ripple': {
-    '0%': {
-      transform: 'scale(.8)',
-      opacity: 1,
-    },
-    '100%': {
-      transform: 'scale(2.4)',
-      opacity: 0,
-    },
-  },
-}))(Badge);
-
-const SmallAvatar = withStyles(theme => ({
-  root: {
-    width: 22,
-    height: 22,
-    border: `2px solid ${theme.palette.background.paper}`,
-  },
-}))(Avatar);
-
 export default function CustomizedBadges() {
   return (
-    <Box display="flex">
-      <Box m={1}>
-        <IconButton aria-label="cart">
-          <StyledBadge1 badgeContent={4} color="primary">
-            <ShoppingCartIcon />
-          </StyledBadge1>
-        </IconButton>
-      </Box>
-      <Box m={1}>
-        <StyledBadge2
-          overlap="circle"
-          anchorOrigin={{
-            vertical: 'bottom',
-            horizontal: 'right',
-          }}
-          variant="dot"
-        >
-          <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
-        </StyledBadge2>
-      </Box>
-      <Box m={1}>
-        <Badge
-          overlap="circle"
-          anchorOrigin={{
-            vertical: 'bottom',
-            horizontal: 'right',
-          }}
-          badgeContent={<SmallAvatar alt="Stock avatar" src="/static/images/avatar/1.jpg" />}
-        >
-          <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
-        </Badge>
-      </Box>
-    </Box>
+    <IconButton aria-label="cart">
+      <StyledBadge badgeContent={4} color="primary">
+        <ShoppingCartIcon />
+      </StyledBadge>
+    </IconButton>
   );
 }
diff --git a/docs/src/pages/components/badges/CustomizedBadges.tsx b/docs/src/pages/components/badges/CustomizedBadges.tsx
index 984e5e3db97135..7da7ffe40155e5 100644
--- a/docs/src/pages/components/badges/CustomizedBadges.tsx
+++ b/docs/src/pages/components/badges/CustomizedBadges.tsx
@@ -1,95 +1,26 @@
 import React from 'react';
 import Badge from '@material-ui/core/Badge';
-import Box from '@material-ui/core/Box';
-import Avatar from '@material-ui/core/Avatar';
 import { Theme, withStyles, createStyles } from '@material-ui/core/styles';
 import IconButton from '@material-ui/core/IconButton';
 import ShoppingCartIcon from '@material-ui/icons/ShoppingCart';
 
-const StyledBadge1 = withStyles((theme: Theme) =>
+const StyledBadge = withStyles((theme: Theme) =>
   createStyles({
     badge: {
       right: -3,
+      top: 13,
       border: `2px solid ${theme.palette.background.paper}`,
       padding: '0 4px',
     },
   }),
 )(Badge);
 
-const StyledBadge2 = withStyles((theme: Theme) =>
-  createStyles({
-    badge: {
-      backgroundColor: '#44b700',
-      boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
-      '&::after': {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '100%',
-        borderRadius: '50%',
-        animation: '$ripple 1.2s infinite ease-in-out',
-        border: '1px solid #44b700',
-        content: '""',
-      },
-    },
-    '@keyframes ripple': {
-      '0%': {
-        transform: 'scale(.8)',
-        opacity: 1,
-      },
-      '100%': {
-        transform: 'scale(2.4)',
-        opacity: 0,
-      },
-    },
-  }),
-)(Badge);
-
-const SmallAvatar = withStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: 22,
-      height: 22,
-      border: `2px solid ${theme.palette.background.paper}`,
-    },
-  }),
-)(Avatar);
-
 export default function CustomizedBadges() {
   return (
-    <Box display="flex">
-      <Box m={1}>
-        <IconButton aria-label="cart">
-          <StyledBadge1 badgeContent={4} color="primary">
-            <ShoppingCartIcon />
-          </StyledBadge1>
-        </IconButton>
-      </Box>
-      <Box m={1}>
-        <StyledBadge2
-          overlap="circle"
-          anchorOrigin={{
-            vertical: 'bottom',
-            horizontal: 'right',
-          }}
-          variant="dot"
-        >
-          <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
-        </StyledBadge2>
-      </Box>
-      <Box m={1}>
-        <Badge
-          overlap="circle"
-          anchorOrigin={{
-            vertical: 'bottom',
-            horizontal: 'right',
-          }}
-          badgeContent={<SmallAvatar alt="Stock avatar" src="/static/images/avatar/1.jpg" />}
-        >
-          <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
-        </Badge>
-      </Box>
-    </Box>
+    <IconButton aria-label="cart">
+      <StyledBadge badgeContent={4} color="primary">
+        <ShoppingCartIcon />
+      </StyledBadge>
+    </IconButton>
   );
 }
diff --git a/docs/src/pages/components/badges/DotBadge.js b/docs/src/pages/components/badges/DotBadge.js
index 16558e3b2eec00..bcc6604b2ed4a5 100644
--- a/docs/src/pages/components/badges/DotBadge.js
+++ b/docs/src/pages/components/badges/DotBadge.js
@@ -1,27 +1,31 @@
 import React from 'react';
-import Box from '@material-ui/core/Box';
+import { makeStyles } from '@material-ui/core/styles';
 import Badge from '@material-ui/core/Badge';
 import MailIcon from '@material-ui/icons/Mail';
 import Typography from '@material-ui/core/Typography';
 
+const useStyles = makeStyles(theme => ({
+  root: {
+    '& > *': {
+      margin: theme.spacing(1),
+    },
+  },
+}));
+
 export default function DotBadge() {
+  const classes = useStyles();
+
   return (
-    <Box display="flex">
-      <Box m={2}>
-        <Badge color="primary" variant="dot">
-          <MailIcon />
-        </Badge>
-      </Box>
-      <Box m={2}>
-        <Badge color="secondary" variant="dot">
-          <MailIcon />
-        </Badge>
-      </Box>
-      <Box m={2}>
-        <Badge color="error" variant="dot">
-          <Typography>Typography</Typography>
-        </Badge>
-      </Box>
-    </Box>
+    <div className={classes.root}>
+      <Badge color="primary" variant="dot">
+        <MailIcon />
+      </Badge>
+      <Badge color="secondary" variant="dot">
+        <MailIcon />
+      </Badge>
+      <Badge color="error" variant="dot">
+        <Typography>Typography</Typography>
+      </Badge>
+    </div>
   );
 }
diff --git a/docs/src/pages/components/badges/DotBadge.tsx b/docs/src/pages/components/badges/DotBadge.tsx
index 16558e3b2eec00..dcc4d242435622 100644
--- a/docs/src/pages/components/badges/DotBadge.tsx
+++ b/docs/src/pages/components/badges/DotBadge.tsx
@@ -1,27 +1,33 @@
 import React from 'react';
-import Box from '@material-ui/core/Box';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
 import Badge from '@material-ui/core/Badge';
 import MailIcon from '@material-ui/icons/Mail';
 import Typography from '@material-ui/core/Typography';
 
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      '& > *': {
+        margin: theme.spacing(1),
+      },
+    },
+  }),
+);
+
 export default function DotBadge() {
+  const classes = useStyles();
+
   return (
-    <Box display="flex">
-      <Box m={2}>
-        <Badge color="primary" variant="dot">
-          <MailIcon />
-        </Badge>
-      </Box>
-      <Box m={2}>
-        <Badge color="secondary" variant="dot">
-          <MailIcon />
-        </Badge>
-      </Box>
-      <Box m={2}>
-        <Badge color="error" variant="dot">
-          <Typography>Typography</Typography>
-        </Badge>
-      </Box>
-    </Box>
+    <div className={classes.root}>
+      <Badge color="primary" variant="dot">
+        <MailIcon />
+      </Badge>
+      <Badge color="secondary" variant="dot">
+        <MailIcon />
+      </Badge>
+      <Badge color="error" variant="dot">
+        <Typography>Typography</Typography>
+      </Badge>
+    </div>
   );
 }
diff --git a/docs/src/pages/components/badges/SimpleBadge.js b/docs/src/pages/components/badges/SimpleBadge.js
index 58476cb4012075..d0dfad7cd61b9c 100644
--- a/docs/src/pages/components/badges/SimpleBadge.js
+++ b/docs/src/pages/components/badges/SimpleBadge.js
@@ -3,18 +3,12 @@ import { makeStyles } from '@material-ui/core/styles';
 import Badge from '@material-ui/core/Badge';
 import IconButton from '@material-ui/core/IconButton';
 import MailIcon from '@material-ui/icons/Mail';
-import AppBar from '@material-ui/core/AppBar';
-import Tabs from '@material-ui/core/Tabs';
-import Tab from '@material-ui/core/Tab';
-import Typography from '@material-ui/core/Typography';
-import Button from '@material-ui/core/Button';
 
 const useStyles = makeStyles(theme => ({
-  margin: {
-    margin: theme.spacing(2),
-  },
-  padding: {
-    padding: theme.spacing(0, 2),
+  root: {
+    '& > *': {
+      margin: theme.spacing(1),
+    },
   },
 }));
 
@@ -22,39 +16,18 @@ export default function SimpleBadge() {
   const classes = useStyles();
 
   return (
-    <div>
-      <div>
-        <Badge className={classes.margin} badgeContent={4} color="primary">
-          <MailIcon />
-        </Badge>
-        <Badge className={classes.margin} badgeContent={10} color="secondary">
-          <MailIcon />
-        </Badge>
-        <IconButton aria-label="4 pending messages" className={classes.margin}>
-          <Badge badgeContent={4} color="primary">
-            <MailIcon />
-          </Badge>
-        </IconButton>
-      </div>
-      <AppBar position="static" className={classes.margin}>
-        <Tabs value={0}>
-          <Tab
-            label={
-              <Badge className={classes.padding} color="secondary" badgeContent={4}>
-                Item One
-              </Badge>
-            }
-          />
-          <Tab label="Item Two" />
-          <Tab label="Item Three" />
-        </Tabs>
-      </AppBar>
-      <Badge color="primary" badgeContent={4} className={classes.margin}>
-        <Typography className={classes.padding}>Typography</Typography>
+    <div className={classes.root}>
+      <Badge badgeContent={4} color="primary">
+        <MailIcon />
       </Badge>
-      <Badge color="primary" badgeContent={4} className={classes.margin}>
-        <Button variant="contained">Button</Button>
+      <Badge badgeContent={10} color="secondary">
+        <MailIcon />
       </Badge>
+      <IconButton aria-label="4 pending messages">
+        <Badge badgeContent={4} color="primary">
+          <MailIcon />
+        </Badge>
+      </IconButton>
     </div>
   );
 }
diff --git a/docs/src/pages/components/badges/SimpleBadge.tsx b/docs/src/pages/components/badges/SimpleBadge.tsx
index 9a47471350eea1..3ed7f2aed2596f 100644
--- a/docs/src/pages/components/badges/SimpleBadge.tsx
+++ b/docs/src/pages/components/badges/SimpleBadge.tsx
@@ -3,19 +3,13 @@ import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import Badge from '@material-ui/core/Badge';
 import IconButton from '@material-ui/core/IconButton';
 import MailIcon from '@material-ui/icons/Mail';
-import AppBar from '@material-ui/core/AppBar';
-import Tabs from '@material-ui/core/Tabs';
-import Tab from '@material-ui/core/Tab';
-import Typography from '@material-ui/core/Typography';
-import Button from '@material-ui/core/Button';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
-    margin: {
-      margin: theme.spacing(2),
-    },
-    padding: {
-      padding: theme.spacing(0, 2),
+    root: {
+      '& > *': {
+        margin: theme.spacing(1),
+      },
     },
   }),
 );
@@ -24,39 +18,18 @@ export default function SimpleBadge() {
   const classes = useStyles();
 
   return (
-    <div>
-      <div>
-        <Badge className={classes.margin} badgeContent={4} color="primary">
-          <MailIcon />
-        </Badge>
-        <Badge className={classes.margin} badgeContent={10} color="secondary">
-          <MailIcon />
-        </Badge>
-        <IconButton aria-label="4 pending messages" className={classes.margin}>
-          <Badge badgeContent={4} color="primary">
-            <MailIcon />
-          </Badge>
-        </IconButton>
-      </div>
-      <AppBar position="static" className={classes.margin}>
-        <Tabs value={0}>
-          <Tab
-            label={
-              <Badge className={classes.padding} color="secondary" badgeContent={4}>
-                Item One
-              </Badge>
-            }
-          />
-          <Tab label="Item Two" />
-          <Tab label="Item Three" />
-        </Tabs>
-      </AppBar>
-      <Badge color="primary" badgeContent={4} className={classes.margin}>
-        <Typography className={classes.padding}>Typography</Typography>
+    <div className={classes.root}>
+      <Badge badgeContent={4} color="primary">
+        <MailIcon />
       </Badge>
-      <Badge color="primary" badgeContent={4} className={classes.margin}>
-        <Button variant="contained">Button</Button>
+      <Badge badgeContent={10} color="secondary">
+        <MailIcon />
       </Badge>
+      <IconButton aria-label="4 pending messages">
+        <Badge badgeContent={4} color="primary">
+          <MailIcon />
+        </Badge>
+      </IconButton>
     </div>
   );
 }
diff --git a/docs/src/pages/components/badges/badges.md b/docs/src/pages/components/badges/badges.md
index fa68eec06546c7..69a1c6e50712e6 100644
--- a/docs/src/pages/components/badges/badges.md
+++ b/docs/src/pages/components/badges/badges.md
@@ -15,7 +15,7 @@ Examples of badges containing text, using primary and secondary colors. The badg
 
 ## Customized badges
 
-Here are some examples of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/).
+Here is an example of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/).
 
 {{"demo": "pages/components/badges/CustomizedBadges.js"}}
 
@@ -49,4 +49,4 @@ You can use the `overlap` property to place the badge relative to the corner of
 
 You can use the `horizontalAlignment` and `verticalAlignment` properties to move the badge to any corner of the wrapped element.
 
-{{"demo": "pages/components/badges/BadgeAlignment.js"}}
+{{"demo": "pages/components/badges/BadgeAlignment.js", "hideHeader": true}}
diff --git a/packages/material-ui/src/Badge/Badge.js b/packages/material-ui/src/Badge/Badge.js
index bc0900fe6f6194..cf1fcef48e5a8e 100644
--- a/packages/material-ui/src/Badge/Badge.js
+++ b/packages/material-ui/src/Badge/Badge.js
@@ -5,7 +5,7 @@ import withStyles from '../styles/withStyles';
 import capitalize from '../utils/capitalize';
 
 const RADIUS_STANDARD = 10;
-const RADIUS_DOT = 3;
+const RADIUS_DOT = 4;
 
 export const styles = theme => ({
   /* Styles applied to the root element. */
@@ -57,6 +57,7 @@ export const styles = theme => ({
   },
   /* Styles applied to the root element if `variant="dot"`. */
   dot: {
+    borderRadius: RADIUS_DOT,
     height: RADIUS_DOT * 2,
     minWidth: RADIUS_DOT * 2,
     padding: 0,
diff --git a/test/regressions/index.js b/test/regressions/index.js
index cb5cdc818bac05..9b5559e544b5d4 100644
--- a/test/regressions/index.js
+++ b/test/regressions/index.js
@@ -82,6 +82,7 @@ const blacklistFilename = [
   'docs-components-tree-view/CustomizedTreeView.png',
 
   // Redux isolation
+  'docs-components-badges/BadgeAlignment.png',
   'docs-components-chips/ChipsPlayground.png',
   'docs-components-popover/AnchorPlayground.png',
   'docs-components-popper/ScrollPlayground.png',