From bdd81ec996122d1800a08ee7141d45a8e6e7bde8 Mon Sep 17 00:00:00 2001
From: zanivan <victorzanivan@gmail.com>
Date: Mon, 2 Sep 2024 15:07:23 -0300
Subject: [PATCH] Add disabled button styles

---
 .../website/branding-theme-test.tsx           | 26 +++++++++++++++++++
 .../mui-docs/src/branding/brandingTheme.ts    | 10 +++++++
 2 files changed, 36 insertions(+)

diff --git a/docs/pages/experiments/website/branding-theme-test.tsx b/docs/pages/experiments/website/branding-theme-test.tsx
index 0b0eb57ce93291..6408551e549058 100644
--- a/docs/pages/experiments/website/branding-theme-test.tsx
+++ b/docs/pages/experiments/website/branding-theme-test.tsx
@@ -80,6 +80,32 @@ export default function BrandingThemeTest() {
               <GitHubIcon fontSize="small" />
             </IconButton>
           </Stack>
+          <Stack direction="row" spacing={2} useFlexGap sx={{ width: 'fit-content', mt: 8 }}>
+            <Button variant="contained" size="small" color="primary" disabled>
+              Contained primary
+            </Button>
+            <Button variant="contained" size="small" color="secondary" disabled>
+              Contained secondary
+            </Button>
+            <Button variant="outlined" size="small" color="primary" disabled>
+              Outlined primary
+            </Button>
+            <Button variant="outlined" size="small" color="secondary" disabled>
+              Outlined secondary
+            </Button>
+            <Button variant="text" size="small" disabled>
+              This button
+            </Button>
+            <IconButton color="primary">
+              <GitHubIcon fontSize="small" />
+            </IconButton>
+            <IconButton color="info">
+              <GitHubIcon fontSize="small" />
+            </IconButton>
+            <IconButton>
+              <GitHubIcon fontSize="small" />
+            </IconButton>
+          </Stack>
           <Stack direction="column" spacing={2} useFlexGap sx={{ width: 'fit-content', mt: 8 }}>
             <Button variant="contained" size="large" color="primary">
               Large
diff --git a/packages/mui-docs/src/branding/brandingTheme.ts b/packages/mui-docs/src/branding/brandingTheme.ts
index 3cedb53020f790..eca6caa98770ba 100644
--- a/packages/mui-docs/src/branding/brandingTheme.ts
+++ b/packages/mui-docs/src/branding/brandingTheme.ts
@@ -635,6 +635,11 @@ export function getThemedComponents(): ThemeOptions {
                   borderColor: (theme.vars || theme).palette.primary[600],
                   boxShadow: `${alpha(theme.palette.primary[900], 0.7)} 0 1px 0 1px inset`,
                 },
+                '&.Mui-disabled': {
+                  color: theme.palette.grey[700],
+                  textShadow: 'none',
+                  borderColor: theme.palette.grey[400],
+                },
               }),
             ...(ownerState.variant === 'contained' &&
               ownerState.color === 'secondary' && {
@@ -654,6 +659,11 @@ export function getThemedComponents(): ThemeOptions {
                   borderColor: (theme.vars || theme).palette.primaryDark[600],
                   boxShadow: `${alpha(theme.palette.primaryDark[900], 0.7)} 0 1px 0 1px inset`,
                 },
+                '&.Mui-disabled': {
+                  color: theme.palette.grey[700],
+                  textShadow: 'none',
+                  borderColor: theme.palette.grey[400],
+                },
               }),
             ...(ownerState.variant === 'text' &&
               ownerState.color === 'secondary' && {