diff --git a/docs/pages/api-docs/avatar-group.md b/docs/pages/api-docs/avatar-group.md
index 6280185f839fdf..70d36efdf25dfe 100644
--- a/docs/pages/api-docs/avatar-group.md
+++ b/docs/pages/api-docs/avatar-group.md
@@ -26,8 +26,8 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The avatars to stack. |
 | <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) below for more details. |
-| <span class="prop-name">spacing</span> | <span class="prop-type">'medium'<br>&#124;&nbsp;'small'<br>&#124;&nbsp;number</span> | <span class="prop-default">'medium'</span> | Spacing between avatars. |
-| <span class="prop-name">max</span> | <span class="prop-type">number</span> | <span class="prop-default">5</span> | Max avatars to display. |
+| <span class="prop-name">spacing</span> | <span class="prop-type">'medium'<br>&#124;&nbsp;'small'<br>&#124;&nbsp;number</span> | <span class="prop-default">'medium'</span> | The spacing between avatars. A group with `small` spacing value has a larger overlap. |
+| <span class="prop-name">max</span> | <span class="prop-type">number</span> | <span class="prop-default">5</span> | The maximum number of avatars to display. An additional text avatar will display the number of hidden avatars, if any. |
 
 The `ref` is forwarded to the root element.
 
diff --git a/docs/src/pages/components/avatars/GroupAvatars.js b/docs/src/pages/components/avatars/GroupAvatars.js
index 2ba7239497d042..17c8816ff1c540 100644
--- a/docs/src/pages/components/avatars/GroupAvatars.js
+++ b/docs/src/pages/components/avatars/GroupAvatars.js
@@ -4,10 +4,11 @@ import AvatarGroup from '@material-ui/lab/AvatarGroup';
 
 export default function GroupAvatars() {
   return (
-    <AvatarGroup>
+    <AvatarGroup max={3}>
       <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
       <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
       <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
+      <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
     </AvatarGroup>
   );
 }
diff --git a/docs/src/pages/components/avatars/GroupAvatars.tsx b/docs/src/pages/components/avatars/GroupAvatars.tsx
index 2ba7239497d042..17c8816ff1c540 100644
--- a/docs/src/pages/components/avatars/GroupAvatars.tsx
+++ b/docs/src/pages/components/avatars/GroupAvatars.tsx
@@ -4,10 +4,11 @@ import AvatarGroup from '@material-ui/lab/AvatarGroup';
 
 export default function GroupAvatars() {
   return (
-    <AvatarGroup>
+    <AvatarGroup max={3}>
       <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
       <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
       <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
+      <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
     </AvatarGroup>
   );
 }
diff --git a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js
index 64e6c5589ff89e..4725cb1e84b4ef 100644
--- a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js
+++ b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js
@@ -61,7 +61,7 @@ const AvatarGroup = React.forwardRef(function AvatarGroup(props, ref) {
             zIndex: 0,
             marginLeft: spacing && SPACINGS[spacing] !== undefined ? SPACINGS[spacing] : -spacing,
           }}>+{extraAvatars}</Avatar>
-      : <></>}
+      : null}
     </div>
   );
 });