diff --git a/docs/src/pages/components/drawers/SwipeableTemporaryDrawer.js b/docs/src/pages/components/drawers/SwipeableTemporaryDrawer.js
index 01ede3560ce286..3c82a28f6a4480 100644
--- a/docs/src/pages/components/drawers/SwipeableTemporaryDrawer.js
+++ b/docs/src/pages/components/drawers/SwipeableTemporaryDrawer.js
@@ -92,41 +92,19 @@ export default function SwipeableTemporaryDrawer() {
 
   return (
     <div>
-      <Button onClick={toggleDrawer('left', true)}>Open Left</Button>
-      <Button onClick={toggleDrawer('right', true)}>Open Right</Button>
-      <Button onClick={toggleDrawer('top', true)}>Open Top</Button>
-      <Button onClick={toggleDrawer('bottom', true)}>Open Bottom</Button>
-      <SwipeableDrawer
-        open={state.left}
-        onClose={toggleDrawer('left', false)}
-        onOpen={toggleDrawer('left', true)}
-      >
-        {sideList('left')}
-      </SwipeableDrawer>
-      <SwipeableDrawer
-        anchor="top"
-        open={state.top}
-        onClose={toggleDrawer('top', false)}
-        onOpen={toggleDrawer('top', true)}
-      >
-        {fullList('top')}
-      </SwipeableDrawer>
-      <SwipeableDrawer
-        anchor="bottom"
-        open={state.bottom}
-        onClose={toggleDrawer('bottom', false)}
-        onOpen={toggleDrawer('bottom', true)}
-      >
-        {fullList('bottom')}
-      </SwipeableDrawer>
-      <SwipeableDrawer
-        anchor="right"
-        open={state.right}
-        onClose={toggleDrawer('right', false)}
-        onOpen={toggleDrawer('right', true)}
-      >
-        {sideList('right')}
-      </SwipeableDrawer>
+      {['left', 'right', 'top', 'bottom'].map(anchor => (
+        <React.Fragment key={anchor}>
+          <Button onClick={toggleDrawer(anchor, true)}>{anchor}</Button>
+          <SwipeableDrawer
+            anchor={anchor}
+            open={state[anchor]}
+            onClose={toggleDrawer(anchor, false)}
+            onOpen={toggleDrawer(anchor, true)}
+          >
+            {sideList(anchor)}
+          </SwipeableDrawer>
+        </React.Fragment>
+      ))}
     </div>
   );
 }
diff --git a/docs/src/pages/components/drawers/SwipeableTemporaryDrawer.tsx b/docs/src/pages/components/drawers/SwipeableTemporaryDrawer.tsx
index 4494b62210ac4e..c9e83d17a9662d 100644
--- a/docs/src/pages/components/drawers/SwipeableTemporaryDrawer.tsx
+++ b/docs/src/pages/components/drawers/SwipeableTemporaryDrawer.tsx
@@ -100,41 +100,19 @@ export default function SwipeableTemporaryDrawer() {
 
   return (
     <div>
-      <Button onClick={toggleDrawer('left', true)}>Open Left</Button>
-      <Button onClick={toggleDrawer('right', true)}>Open Right</Button>
-      <Button onClick={toggleDrawer('top', true)}>Open Top</Button>
-      <Button onClick={toggleDrawer('bottom', true)}>Open Bottom</Button>
-      <SwipeableDrawer
-        open={state.left}
-        onClose={toggleDrawer('left', false)}
-        onOpen={toggleDrawer('left', true)}
-      >
-        {sideList('left')}
-      </SwipeableDrawer>
-      <SwipeableDrawer
-        anchor="top"
-        open={state.top}
-        onClose={toggleDrawer('top', false)}
-        onOpen={toggleDrawer('top', true)}
-      >
-        {fullList('top')}
-      </SwipeableDrawer>
-      <SwipeableDrawer
-        anchor="bottom"
-        open={state.bottom}
-        onClose={toggleDrawer('bottom', false)}
-        onOpen={toggleDrawer('bottom', true)}
-      >
-        {fullList('bottom')}
-      </SwipeableDrawer>
-      <SwipeableDrawer
-        anchor="right"
-        open={state.right}
-        onClose={toggleDrawer('right', false)}
-        onOpen={toggleDrawer('right', true)}
-      >
-        {sideList('right')}
-      </SwipeableDrawer>
+      {(['left', 'right', 'top', 'bottom'] as DrawerSide[]).map(anchor => (
+        <React.Fragment key={anchor}>
+          <Button onClick={toggleDrawer(anchor, true)}>{anchor}</Button>
+          <SwipeableDrawer
+            anchor={anchor}
+            open={state[anchor]}
+            onClose={toggleDrawer(anchor, false)}
+            onOpen={toggleDrawer(anchor, true)}
+          >
+            {sideList(anchor)}
+          </SwipeableDrawer>
+        </React.Fragment>
+      ))}
     </div>
   );
 }
diff --git a/docs/src/pages/components/drawers/TemporaryDrawer.js b/docs/src/pages/components/drawers/TemporaryDrawer.js
index 790aa1bc0bdc06..245a2afb7f2ac6 100644
--- a/docs/src/pages/components/drawers/TemporaryDrawer.js
+++ b/docs/src/pages/components/drawers/TemporaryDrawer.js
@@ -92,22 +92,14 @@ export default function TemporaryDrawer() {
 
   return (
     <div>
-      <Button onClick={toggleDrawer('left', true)}>Open Left</Button>
-      <Button onClick={toggleDrawer('right', true)}>Open Right</Button>
-      <Button onClick={toggleDrawer('top', true)}>Open Top</Button>
-      <Button onClick={toggleDrawer('bottom', true)}>Open Bottom</Button>
-      <Drawer open={state.left} onClose={toggleDrawer('left', false)}>
-        {sideList('left')}
-      </Drawer>
-      <Drawer anchor="top" open={state.top} onClose={toggleDrawer('top', false)}>
-        {fullList('top')}
-      </Drawer>
-      <Drawer anchor="bottom" open={state.bottom} onClose={toggleDrawer('bottom', false)}>
-        {fullList('bottom')}
-      </Drawer>
-      <Drawer anchor="right" open={state.right} onClose={toggleDrawer('right', false)}>
-        {sideList('right')}
-      </Drawer>
+      {['left', 'right', 'top', 'bottom'].map(anchor => (
+        <React.Fragment key={anchor}>
+          <Button onClick={toggleDrawer(anchor, true)}>{anchor}</Button>
+          <Drawer anchor={anchor} open={state[anchor]} onClose={toggleDrawer(anchor, false)}>
+            {sideList(anchor)}
+          </Drawer>
+        </React.Fragment>
+      ))}
     </div>
   );
 }
diff --git a/docs/src/pages/components/drawers/TemporaryDrawer.tsx b/docs/src/pages/components/drawers/TemporaryDrawer.tsx
index 515d56d6447d34..5c3230c6d33146 100644
--- a/docs/src/pages/components/drawers/TemporaryDrawer.tsx
+++ b/docs/src/pages/components/drawers/TemporaryDrawer.tsx
@@ -29,6 +29,7 @@ export default function TemporaryDrawer() {
   });
 
   type DrawerSide = 'top' | 'left' | 'bottom' | 'right';
+
   const toggleDrawer = (side: DrawerSide, open: boolean) => (
     event: React.KeyboardEvent | React.MouseEvent,
   ) => {
@@ -99,22 +100,14 @@ export default function TemporaryDrawer() {
 
   return (
     <div>
-      <Button onClick={toggleDrawer('left', true)}>Open Left</Button>
-      <Button onClick={toggleDrawer('right', true)}>Open Right</Button>
-      <Button onClick={toggleDrawer('top', true)}>Open Top</Button>
-      <Button onClick={toggleDrawer('bottom', true)}>Open Bottom</Button>
-      <Drawer open={state.left} onClose={toggleDrawer('left', false)}>
-        {sideList('left')}
-      </Drawer>
-      <Drawer anchor="top" open={state.top} onClose={toggleDrawer('top', false)}>
-        {fullList('top')}
-      </Drawer>
-      <Drawer anchor="bottom" open={state.bottom} onClose={toggleDrawer('bottom', false)}>
-        {fullList('bottom')}
-      </Drawer>
-      <Drawer anchor="right" open={state.right} onClose={toggleDrawer('right', false)}>
-        {sideList('right')}
-      </Drawer>
+      {(['left', 'right', 'top', 'bottom'] as DrawerSide[]).map(anchor => (
+        <React.Fragment key={anchor}>
+          <Button onClick={toggleDrawer(anchor, true)}>{anchor}</Button>
+          <Drawer anchor={anchor} open={state[anchor]} onClose={toggleDrawer(anchor, false)}>
+            {sideList(anchor)}
+          </Drawer>
+        </React.Fragment>
+      ))}
     </div>
   );
 }
diff --git a/docs/src/pages/components/drawers/drawers.md b/docs/src/pages/components/drawers/drawers.md
index 13ffac584020ce..af75b1878a25bd 100644
--- a/docs/src/pages/components/drawers/drawers.md
+++ b/docs/src/pages/components/drawers/drawers.md
@@ -20,7 +20,7 @@ It closes when an item is selected, handled by controlling the `open` prop.
 
 {{"demo": "pages/components/drawers/TemporaryDrawer.js"}}
 
-## Swipeable Temporary drawer
+### Swipeable
 
 You can make the drawer swipeable with the `SwipeableDrawer` component.