diff --git a/docs/src/modules/components/ApiPage/ApiAlert.tsx b/docs/src/modules/components/ApiPage/ApiAlert.tsx
new file mode 100644
index 00000000000000..ab733a8ed17796
--- /dev/null
+++ b/docs/src/modules/components/ApiPage/ApiAlert.tsx
@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { alpha } from '@mui/system';
+import { styled } from '@mui/material/styles';
+import Alert from '@mui/material/Alert';
+import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
+import {
+  brandingDarkTheme as darkTheme,
+  brandingLightTheme as lightTheme,
+} from 'docs/src/modules/brandingTheme';
+
+const StyledAlert = styled(Alert)(
+  ({ theme }) => ({
+    '&.MuiAlert-standardWarning': {
+      alignItems: 'center',
+      padding: '2px 12px',
+      fontWeight: theme.typography.fontWeightRegular,
+      color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`,
+      backgroundColor: alpha(lightTheme.palette.warning[50], 0.5),
+      borderColor: `var(--muidocs-palette-warning-200, ${lightTheme.palette.warning[200]})`,
+      '& .MuiAlert-icon': {
+        height: 'fit-content',
+        padding: 0,
+      },
+      '& code': { all: 'unset' },
+      '& strong': {
+        color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`,
+      },
+      '& svg': {
+        fill: `var(--muidocs-palette-warning-600, ${lightTheme.palette.warning[600]})`,
+      },
+      '& a': {
+        color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`,
+        textDecorationColor: alpha(lightTheme.palette.warning.main, 0.4),
+        '&:hover': {
+          textDecorationColor: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`,
+        },
+      },
+    },
+  }),
+  ({ theme }) => ({
+    [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: {
+      '&.MuiAlert-standardWarning': {
+        color: `var(--muidocs-palette-warning-50, ${darkTheme.palette.warning[50]})`,
+        backgroundColor: alpha(darkTheme.palette.warning[700], 0.15),
+        borderColor: alpha(darkTheme.palette.warning[600], 0.3),
+        '& strong': {
+          color: `var(--muidocs-palette-warning-200, ${darkTheme.palette.warning[200]})`,
+        },
+        '& svg': {
+          fill: `var(--muidocs-palette-warning-400, ${darkTheme.palette.warning[400]})`,
+        },
+        '& a': {
+          color: `var(--muidocs-palette-warning-200, ${darkTheme.palette.warning[200]})`,
+          textDecorationColor: alpha(darkTheme.palette.warning.main, 0.4),
+          '&:hover': {
+            textDecorationColor: `var(--muidocs-palette-warning-200, ${darkTheme.palette.warning[200]})`,
+          },
+        },
+      },
+    },
+  }),
+);
+
+interface DeprecationAlertProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export default function ApiAlert({ children, className }: DeprecationAlertProps) {
+  return (
+    <StyledAlert
+      className={className}
+      severity="warning"
+      icon={<WarningRoundedIcon fontSize="small" />}
+    >
+      {children}
+    </StyledAlert>
+  );
+}
diff --git a/docs/src/modules/components/ApiPage/list/ClassesList.tsx b/docs/src/modules/components/ApiPage/list/ClassesList.tsx
index 8e9f13b2939a81..7bd5febc8ea003 100644
--- a/docs/src/modules/components/ApiPage/list/ClassesList.tsx
+++ b/docs/src/modules/components/ApiPage/list/ClassesList.tsx
@@ -1,8 +1,6 @@
 /* eslint-disable react/no-danger */
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
-import Alert from '@mui/material/Alert';
-import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
 import { ComponentClassDefinition } from '@mui-internal/docs-utilities';
 import { useTranslate } from 'docs/src/modules/utils/i18n';
 import ExpandableApiItem, {
@@ -12,6 +10,7 @@ import {
   brandingLightTheme as lightTheme,
   brandingDarkTheme as darkTheme,
 } from 'docs/src/modules/brandingTheme';
+import ApiAlert from 'docs/src/modules/components/ApiPage/ApiAlert';
 
 const StyledApiItem = styled(ExpandableApiItem)(
   ({ theme }) => ({
@@ -31,12 +30,13 @@ const StyledApiItem = styled(ExpandableApiItem)(
     },
     '&.classes-list-deprecated-item': {
       '& .MuiApi-item-note': {
-        color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`,
-      },
-      '& .classes-list-alert': {
-        '& code': { all: 'unset' },
+        color: `var(--muidocs-palette-warning-700, ${lightTheme.palette.warning[700]})`,
       },
     },
+    '& .classes-list-alert': {
+      marginTop: 12,
+      marginBottom: 16,
+    },
   }),
   ({ theme }) => ({
     [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: {
@@ -88,24 +88,8 @@ export default function ClassesList(props: ClassesListProps) {
             className={isDeprecated ? 'classes-list-deprecated-item' : ''}
           >
             {description && <p dangerouslySetInnerHTML={{ __html: description }} />}
-            {displayClassKeys && !isGlobal && (
-              <p className="prop-list-class">
-                <span className="prop-list-title">{'Rule name'}:</span>
-                <code className="Api-code">{key}</code>
-              </p>
-            )}
             {isDeprecated && (
-              <Alert
-                className="MuiApi-collapsible classes-list-alert"
-                severity="warning"
-                icon={<WarningRoundedIcon fontSize="small" />}
-                sx={{
-                  '& .MuiAlert-icon': {
-                    height: 'fit-content',
-                    py: '8px',
-                  },
-                }}
-              >
+              <ApiAlert className="MuiApi-collapsible classes-list-alert">
                 {t('api-docs.deprecated')}
                 {deprecationInfo && (
                   <React.Fragment>
@@ -117,7 +101,13 @@ export default function ClassesList(props: ClassesListProps) {
                     />
                   </React.Fragment>
                 )}
-              </Alert>
+              </ApiAlert>
+            )}
+            {displayClassKeys && !isGlobal && (
+              <p className="prop-list-class">
+                <span className="prop-list-title">{'Rule name'}:</span>
+                <code className="Api-code">{key}</code>
+              </p>
             )}
           </StyledApiItem>
         );
diff --git a/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx b/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx
index be8c66d1c193ca..8fdeadaf42148b 100644
--- a/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx
+++ b/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx
@@ -93,21 +93,6 @@ const Root = styled('div')<{ ownerState: { type?: DescriptionType } }>(
         },
       },
     },
-    '& .MuiAlert-standardWarning': {
-      padding: '6px 12px',
-      fontWeight: theme.typography.fontWeightMedium,
-      border: '1px solid',
-      borderColor: `var(--muidocs-palette-warning-300, ${lightTheme.palette.warning[300]})`,
-      borderRadius: 12,
-      backgroundColor: `var(--muidocs-palette-warning-50, ${lightTheme.palette.warning[50]})`,
-      color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`,
-      marginBottom: 16,
-      '.MuiAlert-icon': {
-        display: 'flex',
-        alignItems: 'center',
-        fill: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`,
-      },
-    },
     '& code.Api-code': {
       ...theme.typography.caption,
       fontFamily: theme.typography.fontFamilyCode,
@@ -152,14 +137,6 @@ const Root = styled('div')<{ ownerState: { type?: DescriptionType } }>(
           color: `var(--muidocs-palette-success-400, ${darkTheme.palette.success[400]})`,
         },
       },
-      '& .MuiAlert-standardWarning': {
-        borderColor: alpha(darkTheme.palette.warning[800], 0.3),
-        backgroundColor: alpha(darkTheme.palette.warning[800], 0.2),
-        color: `var(--muidocs-palette-warning-100, ${darkTheme.palette.warning[100]})`,
-        '.MuiAlert-icon svg': {
-          fill: `var(--muidocs-palette-warning-400, ${darkTheme.palette.warning[400]})`,
-        },
-      },
       '& code.Api-code': {
         color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`,
         borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`,
diff --git a/docs/src/modules/components/ApiPage/list/PropertiesList.tsx b/docs/src/modules/components/ApiPage/list/PropertiesList.tsx
index 38031ca5b91540..72dc0880817987 100644
--- a/docs/src/modules/components/ApiPage/list/PropertiesList.tsx
+++ b/docs/src/modules/components/ApiPage/list/PropertiesList.tsx
@@ -1,8 +1,6 @@
 /* eslint-disable react/no-danger */
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
-import Alert from '@mui/material/Alert';
-import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
 import { useTranslate } from 'docs/src/modules/utils/i18n';
 import {
   brandingDarkTheme as darkTheme,
@@ -11,6 +9,7 @@ import {
 import ExpandableApiItem, {
   ApiItemContaier,
 } from 'docs/src/modules/components/ApiPage/list/ExpandableApiItem';
+import ApiAlert from 'docs/src/modules/components/ApiPage/ApiAlert';
 
 const StyledApiItem = styled(ExpandableApiItem)(
   ({ theme }) => ({
@@ -38,12 +37,13 @@ const StyledApiItem = styled(ExpandableApiItem)(
     },
     '&.prop-list-deprecated-item': {
       '& .MuiApi-item-note': {
-        color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`,
-      },
-      '& .prop-list-alert': {
-        '& code': { all: 'unset' },
+        color: `var(--muidocs-palette-warning-700, ${lightTheme.palette.warning[700]})`,
       },
     },
+    '& .prop-list-alert': {
+      marginTop: 12,
+      marginBottom: 16,
+    },
     '& .prop-list-default-props': {
       ...theme.typography.body2,
       fontWeight: theme.typography.fontWeightSemiBold,
@@ -193,22 +193,13 @@ export default function PropertiesList(props: PropertiesListProps) {
           >
             {description && <PropDescription description={description} />}
             {requiresRef && (
-              <Alert
-                severity="warning"
-                icon={<WarningRoundedIcon fontSize="small" />}
-                sx={{
-                  '& .MuiAlert-icon': {
-                    height: 'fit-content',
-                    py: '8px',
-                  },
-                }}
-              >
+              <ApiAlert className="MuiApi-collapsible prop-list-alert">
                 <span
                   dangerouslySetInnerHTML={{
                     __html: t('api-docs.requires-ref'),
                   }}
                 />
-              </Alert>
+              </ApiAlert>
             )}
             {additionalInfo.map((key) => (
               <p
@@ -220,17 +211,7 @@ export default function PropertiesList(props: PropertiesListProps) {
               />
             ))}
             {isDeprecated && (
-              <Alert
-                className="MuiApi-collapsible prop-list-alert"
-                severity="warning"
-                icon={<WarningRoundedIcon fontSize="small" />}
-                sx={{
-                  '& .MuiAlert-icon': {
-                    height: 'fit-content',
-                    py: '8px',
-                  },
-                }}
-              >
+              <ApiAlert className="MuiApi-collapsible prop-list-alert">
                 {t('api-docs.deprecated')}
                 {deprecationInfo && (
                   <React.Fragment>
@@ -242,7 +223,7 @@ export default function PropertiesList(props: PropertiesListProps) {
                     />
                   </React.Fragment>
                 )}
-              </Alert>
+              </ApiAlert>
             )}
             <div className="prop-list-additional-info">
               {typeName && (
diff --git a/docs/src/modules/components/ApiPage/table/ClassesTable.tsx b/docs/src/modules/components/ApiPage/table/ClassesTable.tsx
index 7a78f98eb9c5ad..0fb9293367f204 100644
--- a/docs/src/modules/components/ApiPage/table/ClassesTable.tsx
+++ b/docs/src/modules/components/ApiPage/table/ClassesTable.tsx
@@ -2,14 +2,13 @@
 import * as React from 'react';
 import { ComponentClassDefinition } from '@mui-internal/docs-utilities';
 import { styled, alpha } from '@mui/material/styles';
-import Alert from '@mui/material/Alert';
-import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
 import {
   brandingDarkTheme as darkTheme,
   brandingLightTheme as lightTheme,
 } from 'docs/src/modules/brandingTheme';
 import { getHash } from 'docs/src/modules/components/ApiPage/list/ClassesList';
 import { useTranslate } from 'docs/src/modules/utils/i18n';
+import ApiAlert from 'docs/src/modules/components/ApiPage/ApiAlert';
 
 const StyledTable = styled('table')(
   ({ theme }) => ({
@@ -32,31 +31,8 @@ const StyledTable = styled('table')(
       borderColor: alpha(darkTheme.palette.primary[100], 0.8),
       backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.primary[50]})`,
     },
-    '& .classes-table-deprecated': {
-      '& code ': { all: 'unset' },
-    },
     '& .classes-table-alert': {
-      padding: '2px 12px',
       marginTop: 12,
-      color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`,
-      backgroundColor: alpha(lightTheme.palette.warning[50], 0.5),
-      borderColor: `var(--muidocs-palette-warning-200, ${lightTheme.palette.warning[200]})`,
-      '& .MuiAlert-icon': {
-        padding: 0,
-      },
-      '& strong': {
-        color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`,
-      },
-      '&>svg': {
-        fill: `var(--muidocs-palette-warning-600, ${lightTheme.palette.warning[600]})`,
-      },
-      '& a': {
-        color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`,
-        textDecorationColor: alpha(lightTheme.palette.warning.main, 0.4),
-        '&:hover': {
-          textDecorationColor: 'inherit',
-        },
-      },
     },
   }),
   ({ theme }) => ({
@@ -69,20 +45,6 @@ const StyledTable = styled('table')(
         borderColor: alpha(darkTheme.palette.primary[400], 0.1),
         backgroundColor: alpha(darkTheme.palette.primary[900], 0.4),
       },
-      '& .classes-table-alert': {
-        color: `var(--muidocs-palette-warning-50, ${darkTheme.palette.warning[50]})`,
-        backgroundColor: alpha(darkTheme.palette.warning[700], 0.15),
-        borderColor: alpha(darkTheme.palette.warning[600], 0.3),
-        '& strong': {
-          color: `var(--muidocs-palette-warning-200, ${darkTheme.palette.warning[200]})`,
-        },
-        '&>svg': {
-          fill: `var(--muidocs-palette-warning-400, ${darkTheme.palette.warning[400]})`,
-        },
-        '& a': {
-          color: `var(--muidocs-palette-warning-100, ${darkTheme.palette.warning[100]})`,
-        },
-      },
     },
   }),
 );
@@ -123,12 +85,7 @@ export default function ClassesTable(props: ClassesTableProps) {
                   }}
                 />
                 {isDeprecated && (
-                  <Alert
-                    severity="warning"
-                    className="classes-table-alert classes-table-deprecated"
-                    icon={<WarningRoundedIcon fontSize="small" />}
-                    sx={{ mb: 1, py: 0, alignItems: 'center' }}
-                  >
+                  <ApiAlert className="classes-table-alert">
                     {t('api-docs.deprecated')}
                     {deprecationInfo && (
                       <React.Fragment>
@@ -140,7 +97,7 @@ export default function ClassesTable(props: ClassesTableProps) {
                         />
                       </React.Fragment>
                     )}
-                  </Alert>
+                  </ApiAlert>
                 )}
               </td>
             </tr>
diff --git a/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx b/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx
index 320781d92491a4..3048c0c7e801f0 100644
--- a/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx
+++ b/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx
@@ -1,8 +1,6 @@
 /* eslint-disable react/no-danger */
 import * as React from 'react';
 import { styled, alpha } from '@mui/material/styles';
-import Alert from '@mui/material/Alert';
-import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
 import { useTranslate } from 'docs/src/modules/utils/i18n';
 import {
   brandingDarkTheme as darkTheme,
@@ -13,6 +11,7 @@ import {
   getHash,
 } from 'docs/src/modules/components/ApiPage/list/PropertiesList';
 import StyledTableContainer from 'docs/src/modules/components/ApiPage/table/StyledTableContainer';
+import ApiAlert from 'docs/src/modules/components/ApiPage/ApiAlert';
 
 const StyledTable = styled('table')(
   ({ theme }) => ({
@@ -61,31 +60,8 @@ const StyledTable = styled('table')(
         marginTop: 12,
         marginBottom: 0,
       },
-      '& .prop-table-deprecated': {
-        '& code ': { all: 'unset' },
-      },
       '& .prop-table-alert': {
-        padding: '2px 12px',
         marginTop: 12,
-        color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`,
-        backgroundColor: alpha(lightTheme.palette.warning[50], 0.5),
-        borderColor: `var(--muidocs-palette-warning-200, ${lightTheme.palette.warning[200]})`,
-        '& .MuiAlert-icon': {
-          padding: 0,
-        },
-        '& strong': {
-          color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`,
-        },
-        '&>svg': {
-          fill: `var(--muidocs-palette-warning-600, ${lightTheme.palette.warning[600]})`,
-        },
-        '& a': {
-          color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`,
-          textDecorationColor: alpha(lightTheme.palette.warning.main, 0.4),
-          '&:hover': {
-            textDecorationColor: 'inherit',
-          },
-        },
       },
     },
     '& .prop-table-signature': {
@@ -119,22 +95,6 @@ const StyledTable = styled('table')(
           color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`,
         },
       },
-      '& .MuiPropTable-description-column': {
-        '& .prop-table-alert': {
-          color: `var(--muidocs-palette-warning-50, ${darkTheme.palette.warning[50]})`,
-          backgroundColor: alpha(darkTheme.palette.warning[700], 0.15),
-          borderColor: alpha(darkTheme.palette.warning[600], 0.3),
-          '& strong': {
-            color: `var(--muidocs-palette-warning-200, ${darkTheme.palette.warning[200]})`,
-          },
-          '&>svg': {
-            fill: `var(--muidocs-palette-warning-400, ${darkTheme.palette.warning[400]})`,
-          },
-          '& a': {
-            color: `var(--muidocs-palette-warning-100, ${darkTheme.palette.warning[100]})`,
-          },
-        },
-      },
     },
   }),
 );
@@ -219,26 +179,13 @@ export default function PropertiesTable(props: PropertiesTableProps) {
                 <td className="MuiPropTable-description-column">
                   {description && <PropDescription description={description} />}
                   {requiresRef && (
-                    <Alert
-                      className="prop-table-alert"
-                      severity="warning"
-                      icon={<WarningRoundedIcon fontSize="small" />}
-                      sx={{
-                        alignItems: 'center',
-                        '& .MuiAlert-icon': {
-                          height: 'fit-content',
-                          p: 0,
-                          mr: 1,
-                          mb: 0.3,
-                        },
-                      }}
-                    >
+                    <ApiAlert className="prop-table-alert">
                       <span
                         dangerouslySetInnerHTML={{
                           __html: t('api-docs.requires-ref'),
                         }}
                       />
-                    </Alert>
+                    </ApiAlert>
                   )}
                   {additionalInfo.map((key) => (
                     <p
@@ -250,12 +197,7 @@ export default function PropertiesTable(props: PropertiesTableProps) {
                     />
                   ))}
                   {isDeprecated && (
-                    <Alert
-                      severity="warning"
-                      className="prop-table-alert prop-table-deprecated"
-                      icon={<WarningRoundedIcon fontSize="small" />}
-                      sx={{ mb: 1, py: 0, alignItems: 'center' }}
-                    >
+                    <ApiAlert className="prop-table-alert">
                       {t('api-docs.deprecated')}
                       {deprecationInfo && (
                         <React.Fragment>
@@ -267,7 +209,7 @@ export default function PropertiesTable(props: PropertiesTableProps) {
                           />
                         </React.Fragment>
                       )}
-                    </Alert>
+                    </ApiAlert>
                   )}
                   {signature && (
                     <div className="prop-table-signature">