Material UI customize button color?

In Material UI v5, this is how you create customized colors in your theme for your Material UI Button. The primary and secondary colors are created the same way under the hood:

const { palette } = createTheme();
const { augmentColor } = palette;
const createColor = (mainColor) => augmentColor({ color: { main: mainColor } });
const theme = createTheme({
  palette: {
    anger: createColor('#F40B27'),
    apple: createColor('#5DBA40'),
    steelBlue: createColor('#5C76B7'),
    violet: createColor('#BC00A3'),
  },
});

Usage

<Button color="anger" variant="contained">
  anger
</Button>
<Button color="apple" variant="contained">
  apple
</Button>
<Button color="steelBlue" variant="contained">
  steelBlue
</Button>
<Button color="violet" variant="contained">
  violet
</Button>

If you’re using typescript, you also need to add additional types for the colors you just defined:

declare module '@mui/material/styles' {
  interface CustomPalette {
    anger: PaletteColorOptions;
    apple: PaletteColorOptions;
    steelBlue: PaletteColorOptions;
    violet: PaletteColorOptions;
  }
  interface Palette extends CustomPalette {}
  interface PaletteOptions extends CustomPalette {}
}

declare module '@mui/material/Button' {
  interface ButtonPropsColorOverrides {
    anger: true;
    apple: true;
    steelBlue: true;
    violet: true;
  }
}

Live Demo

Related Answers

• How to add custom Material UI palette colors
• Change primary and secondary colors in Material UI