diff --git a/docs/src/pages/components/alert/TransitionAlerts.js b/docs/src/pages/components/alert/TransitionAlerts.js
index e3af8dd1783f29..d026609b1a0d6c 100644
--- a/docs/src/pages/components/alert/TransitionAlerts.js
+++ b/docs/src/pages/components/alert/TransitionAlerts.js
@@ -15,7 +15,7 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-export default function ActionAlerts() {
+export default function TransitionAlerts() {
   const classes = useStyles();
   const [open, setOpen] = React.useState(true);
 
@@ -40,12 +40,13 @@ export default function ActionAlerts() {
         </Alert>
       </Collapse>
       <Button
+        disabled={open}
         variant="outlined"
         onClick={() => {
-          setOpen(!open);
+          setOpen(true);
         }}
       >
-        {open ? 'Close' : 'Re-open'}
+        Re-open
       </Button>
     </div>
   );
diff --git a/docs/src/pages/components/alert/TransitionAlerts.tsx b/docs/src/pages/components/alert/TransitionAlerts.tsx
index f1bcb356cb14cc..db8d25f75ca098 100644
--- a/docs/src/pages/components/alert/TransitionAlerts.tsx
+++ b/docs/src/pages/components/alert/TransitionAlerts.tsx
@@ -17,7 +17,7 @@ const useStyles = makeStyles((theme: Theme) =>
   }),
 );
 
-export default function ActionAlerts() {
+export default function TransitionAlerts() {
   const classes = useStyles();
   const [open, setOpen] = React.useState(true);
 
@@ -42,12 +42,13 @@ export default function ActionAlerts() {
         </Alert>
       </Collapse>
       <Button
+        disabled={open}
         variant="outlined"
         onClick={() => {
-          setOpen(!open);
+          setOpen(true);
         }}
       >
-        {open ? 'Close' : 'Re-open'}
+        Re-open
       </Button>
     </div>
   );