Add disabled button styles

mui · Sep 2, 2024 · bdd81ec · bdd81ec
1 parent 3e1a79b
commit bdd81ec
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 0 deletions.
diff --git 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
@@ -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' && {