diff --git a/docs/data/base/components/menu/MenuSimple.js b/docs/data/base/components/menu/MenuSimple.js
index 676b412e92db5f..8c83c65db3df1a 100644
--- a/docs/data/base/components/menu/MenuSimple.js
+++ b/docs/data/base/components/menu/MenuSimple.js
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import Menu from '@mui/base/Menu';
 import MenuItem, { menuItemClasses } from '@mui/base/MenuItem';
+import Button, { buttonClasses } from '@mui/base/Button';
 import Popper from '@mui/base/Popper';
 import { styled } from '@mui/system';
 import { ListActionTypes } from '@mui/base/useList';
@@ -165,7 +166,7 @@ const StyledMenuItem = styled(MenuItem)(
   `,
 );
 
-const TriggerButton = styled('button')(
+const TriggerButton = styled(Button)(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
   font-size: 0.875rem;
@@ -187,7 +188,7 @@ const TriggerButton = styled('button')(
     border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
   }
 
-  &:focus {
+  &.${buttonClasses.focusVisible} {
     border-color: ${blue[400]};
     outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
   }
diff --git a/docs/data/base/components/menu/MenuSimple.tsx b/docs/data/base/components/menu/MenuSimple.tsx
index a5944c9b6132b6..46f80e96f3fd78 100644
--- a/docs/data/base/components/menu/MenuSimple.tsx
+++ b/docs/data/base/components/menu/MenuSimple.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import Menu, { MenuActions } from '@mui/base/Menu';
 import MenuItem, { menuItemClasses } from '@mui/base/MenuItem';
+import Button, { buttonClasses } from '@mui/base/Button';
 import Popper from '@mui/base/Popper';
 import { styled } from '@mui/system';
 import { ListActionTypes } from '@mui/base/useList';
@@ -166,7 +167,7 @@ const StyledMenuItem = styled(MenuItem)(
   `,
 );
 
-const TriggerButton = styled('button')(
+const TriggerButton = styled(Button)(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
   font-size: 0.875rem;
@@ -188,7 +189,7 @@ const TriggerButton = styled('button')(
     border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
   }
 
-  &:focus {
+  &.${buttonClasses.focusVisible} {
     border-color: ${blue[400]};
     outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
   }
diff --git a/docs/data/base/components/menu/UnstyledMenuIntroduction.js b/docs/data/base/components/menu/UnstyledMenuIntroduction.js
index 4c388e00ba5cfe..3810ac2ba22444 100644
--- a/docs/data/base/components/menu/UnstyledMenuIntroduction.js
+++ b/docs/data/base/components/menu/UnstyledMenuIntroduction.js
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import Menu from '@mui/base/Menu';
 import MenuItem, { menuItemClasses } from '@mui/base/MenuItem';
+import Button, { buttonClasses } from '@mui/base/Button';
 import Popper from '@mui/base/Popper';
 import { styled } from '@mui/system';
 import { ListActionTypes } from '@mui/base/useList';
@@ -163,7 +164,7 @@ const StyledMenuItem = styled(MenuItem)(
   `,
 );
 
-const TriggerButton = styled('button')(
+const TriggerButton = styled(Button)(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
   font-size: 0.875rem;
@@ -185,7 +186,7 @@ const TriggerButton = styled('button')(
     border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
   }
 
-  &:focus {
+  &.${buttonClasses.focusVisible} {
     border-color: ${blue[400]};
     outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
   }
diff --git a/docs/data/base/components/menu/UnstyledMenuIntroduction.tsx b/docs/data/base/components/menu/UnstyledMenuIntroduction.tsx
index 631d3728b631cd..f5f713c39e2d51 100644
--- a/docs/data/base/components/menu/UnstyledMenuIntroduction.tsx
+++ b/docs/data/base/components/menu/UnstyledMenuIntroduction.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import Menu, { MenuActions } from '@mui/base/Menu';
 import MenuItem, { menuItemClasses } from '@mui/base/MenuItem';
+import Button, { buttonClasses } from '@mui/base/Button';
 import Popper from '@mui/base/Popper';
 import { styled } from '@mui/system';
 import { ListActionTypes } from '@mui/base/useList';
@@ -164,7 +165,7 @@ const StyledMenuItem = styled(MenuItem)(
   `,
 );
 
-const TriggerButton = styled('button')(
+const TriggerButton = styled(Button)(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
   font-size: 0.875rem;
@@ -186,7 +187,7 @@ const TriggerButton = styled('button')(
     border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
   }
 
-  &:focus {
+  &.${buttonClasses.focusVisible} {
     border-color: ${blue[400]};
     outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
   }
diff --git a/docs/data/base/components/menu/UseMenu.js b/docs/data/base/components/menu/UseMenu.js
index 79fe2fe00b1e6d..ec615b0687a59f 100644
--- a/docs/data/base/components/menu/UseMenu.js
+++ b/docs/data/base/components/menu/UseMenu.js
@@ -238,7 +238,7 @@ const styles = `
       border-color: ${grey[300]};
     }
   
-    &:focus {
+    &:focus-visible {
       border-color: ${blue[400]};
       outline: 3px solid ${blue[200]};
     }
diff --git a/docs/data/base/components/menu/UseMenu.tsx b/docs/data/base/components/menu/UseMenu.tsx
index ec5822adae19fd..b42425fa864d37 100644
--- a/docs/data/base/components/menu/UseMenu.tsx
+++ b/docs/data/base/components/menu/UseMenu.tsx
@@ -236,7 +236,7 @@ const styles = `
       border-color: ${grey[300]};
     }
   
-    &:focus {
+    &:focus-visible {
       border-color: ${blue[400]};
       outline: 3px solid ${blue[200]};
     }
diff --git a/docs/data/base/components/menu/WrappedMenuItems.js b/docs/data/base/components/menu/WrappedMenuItems.js
index 2bcac287a266e7..9e4c596a097b32 100644
--- a/docs/data/base/components/menu/WrappedMenuItems.js
+++ b/docs/data/base/components/menu/WrappedMenuItems.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import Menu from '@mui/base/Menu';
 import MenuItem, { menuItemClasses } from '@mui/base/MenuItem';
-import { buttonClasses } from '@mui/base/Button';
+import Button, { buttonClasses } from '@mui/base/Button';
 import Popper from '@mui/base/Popper';
 import { styled } from '@mui/system';
 import { ListActionTypes } from '@mui/base/useList';
@@ -199,7 +199,7 @@ const StyledMenuItem = styled(MenuItem)(
   `,
 );
 
-const TriggerButton = styled('button')(
+const TriggerButton = styled(Button)(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
   font-size: 0.875rem;
diff --git a/docs/data/base/components/menu/WrappedMenuItems.tsx b/docs/data/base/components/menu/WrappedMenuItems.tsx
index 046d7c8fa670ea..2d62efd1277292 100644
--- a/docs/data/base/components/menu/WrappedMenuItems.tsx
+++ b/docs/data/base/components/menu/WrappedMenuItems.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Menu, { MenuActions } from '@mui/base/Menu';
 import MenuItem, { menuItemClasses } from '@mui/base/MenuItem';
-import { buttonClasses } from '@mui/base/Button';
+import Button, { buttonClasses } from '@mui/base/Button';
 import Popper from '@mui/base/Popper';
 import { styled } from '@mui/system';
 import { ListActionTypes } from '@mui/base/useList';
@@ -194,7 +194,7 @@ const StyledMenuItem = styled(MenuItem)(
   `,
 );
 
-const TriggerButton = styled('button')(
+const TriggerButton = styled(Button)(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
   font-size: 0.875rem;