Muhi Logo Text
Work With MeAboutTestimonialsBlog

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.

Bye for now 👋

If you enjoyed this post, I regularly share similar content on Twitter. Follow me @muhimasri to stay up to date, or feel free to message me on Twitter if you have any questions or comments. I'm always open to discussing the topics I write about!

Recommended Reading

Learn how to create a scrollable table with a sticky header and column in React.

react
html
css

Discussion

Upskill Your Frontend Development Techniques 🌟

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

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

© 2024, Muhi Masri