Muhi Masri

Customizing disabled button color with Material UI (MUI)

Discover different solutions for customizing a disabled button with Material UI and React

Last updated on December 17, 2022

react
mui
MUI Disabled Button Colors

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!

Recommended Reading

A comprehensive guide to creating React editable table cells and rows using dynamic column schemas with TanStack.

react
mui

Discussion

Master your front-end development techniques 🌟

Subscribe to stay up-to-date and receive quality front-end development articles straight to your inbox!

No spam, sales, or ads. Unsubscribe anytime you wish.

© 2023, Muhi Masri