Customizing disabled button color with Material UI (MUI)

Disabling buttons is essential in the UI world as it stops the user from committing an action until specific criteria are met.

A disabled button typically has default greyed-out/faded color, but it’s typical to customize it to match our overall design system. So let’s look at different approaches available for us using MUI.

If you’d like to skip all the details, below is the complete code example:

If this is your first time working with MUI, please follow the installation instructions from the official documentation to get started.

Solution 1: Modifying the button class directly

Using MUI’s sx prop, we can easily customize the colors of the disabled button:

import React from "react";
import { Button } from "@mui/material";

export default function App() {
  return (
    <Button
      disabled
      variant="contained"
      sx={{
        "&.Mui-disabled": {
          background: "#eaeaea",
          color: "#c0c0c0"
        }
      }}
    >
      Disabled Button
    </Button>
  );
}

MUI’s button API can provide us with all the required classes and props to customize a button. In our case, .Mui-disabled is sufficient.

Although the solution above looks simple, it can become redundant. As the application grows, we must do this every time we need the disabled button.

Solution 2: Using MUI Theme

Customizing the global theme will enable the new disabled colors to persist everywhere in the application:

import React from "react";
import { Button } from "@mui/material";
import { ThemeProvider, createTheme } from "@mui/material/styles";

const theme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          "&.Mui-disabled": {
            background: "#f3f3f3",
            color: "#dadada"
          }
        }
      }
    }
  }
});

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button disabled variant="contained">
        Disabled Button
      </Button>
    </ThemeProvider>
  );
}

We can even take it further and customize the disabled button color based on the selected variant!

import React from "react";
import { Button } from "@mui/material";
import { ThemeProvider, createTheme } from "@mui/material/styles";

const theme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        root: ({ ownerState }) => {
          switch (ownerState.variant) {
            case "contained":
              return {
                "&.Mui-disabled": {
                  background: "#f3f3f3",
                  color: "#dadada"
                }
              };
            case "outlined":
              return {
                "&.Mui-disabled": {
                  background: "#e9e9e9",
                  color: "#c7c7c7",
                  borderColor: "#e4e4e4"
                }
              };
            default:
              return;
          }
        }
      }
    }
  }
});

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button disabled variant="contained">
        Disabled Contained Button
      </Button>
      <Button disabled variant="outlined">
        Disabled Outlined Button
      </Button>
    </ThemeProvider>
  );
}

Solution 3: Creating a Styled Component

Styled Components is an excellent option for isolating styles in a custom component while still inheriting all the button’s features.

Below, we can change the disabled button color for three different variants (default, outlined, and contained):

import React from "react";
import { Button as MuiButton } from "@mui/material";
import { styled } from "@mui/system";

const Button = styled(MuiButton)({
  "&.Mui-disabled": {
    color: "#c0c0c0"
  },
  "&.MuiButton-outlined.Mui-disabled": {
    background: "#e4e4e4",
    color: "#b7babf"
  },
  "&.MuiButton-contained.Mui-disabled": {
    background: "#eaeaea",
    color: "#c0c0c0"
  }
});

export default function App() {
  return (
    <Button disabled variant="outlined">
      Disabled Outlined Button
    </Button>
  );
}

And, of course, we can reuse the component anywhere in the project without re-writing the styles again.

Summary

Using sx is very useful for one-time styling but if we’d like to apply it globally, then using MUI theme is a more scalable solution. Styled Components is a better option for more custom and advanced use-case.

I hope you enjoyed learning from this tutorial and if you have any questions, please leave a comment below.

Bye for now!