[Buttons] Disable elevation

[MaxLeiter]

I have buttons that I don't want to have a box-shadow. Instead of custom CSS, using the elevation key would be ideal for me, as that's how we handle <Paper /> shadows

[joshwooding]

I’m not sure if this should be in the core library. I guess we should see what other users wants. I would close this in the mean time let’s see what @oliviertassinari thinks :)

[oliviertassinari]

@joshwooding I agree. Personally, I would override the box shadow, or start from the ButtonBase component.

[MaxLeiter]

It just seems kind of 'silly' for paper to accept elevation but nothing else. What sets Paper apart?

[oliviertassinari]

@MaxLeiter The Paper is used to abstract a surface, a surface has an elevation. In the light mode, the surface elevation defines the box shadow, in the dark mode, the elevation defines the box shadow and the background color. I don't think that the Button answer to the same requirements. But waiting for people upvotes sounds like a good tradeoff.

[oliviertassinari]

What about a disableElevation prop?

diff --git a/packages/material-ui/src/Button/Button.d.ts b/packages/material-ui/src/Button/Button.d.ts
index 77fadc64e..b3b4b1ee4 100644
--- a/packages/material-ui/src/Button/Button.d.ts
+++ b/packages/material-ui/src/Button/Button.d.ts
@@ -8,6 +8,7 @@ export type ButtonTypeMap<
 > = ExtendButtonBaseTypeMap<{
   props: P & {
     color?: PropTypes.Color;
+    disableElevation?: boolean;
     disableFocusRipple?: boolean;
     endIcon?: React.ReactNode;
     fullWidth?: boolean;
@@ -39,6 +40,7 @@ export type ButtonClassKey =
   | 'contained'
   | 'containedPrimary'
   | 'containedSecondary'
+  | 'disableElevation'
   | 'focusVisible'
   | 'disabled'
   | 'colorInherit'
diff --git a/packages/material-ui/src/Button/Button.js b/packages/material-ui/src/Button/Button.js
index bdba5db1f..380389b47 100644
--- a/packages/material-ui/src/Button/Button.js
+++ b/packages/material-ui/src/Button/Button.js
@@ -158,6 +158,25 @@ export const styles = theme => ({
       },
     },
   },
+  /* Styles applied to the root element if `disableElevation={true}`. */
+  disableElevation: {
+    boxShadow: 'none',
+    '&:hover': {
+      boxShadow: 'none',
+      '@media (hover: none)': {
+        boxShadow: 'none',
+      },
+    },
+    '&$focusVisible': {
+      boxShadow: 'none',
+    },
+    '&:active': {
+      boxShadow: 'none',
+    },
+    '&$disabled': {
+      boxShadow: 'none',
+    },
+  },
   /* Pseudo-class applied to the ButtonBase root element if the button is keyboard focused. */
   focusVisible: {},
   /* Pseudo-class applied to the root element if `disabled={true}`. */
@@ -251,6 +270,7 @@ const Button = React.forwardRef(function Button(props, ref) {
     color = 'default',
     component = 'button',
     disabled = false,
+    disableElevation = false,
     disableFocusRipple = false,
     endIcon: endIconProp,
     focusVisibleClassName,
@@ -282,6 +302,7 @@ const Button = React.forwardRef(function Button(props, ref) {
           [classes[`${variant}${capitalize(color)}`]]: color !== 'default' && color !== 'inherit',
           [classes[`${variant}Size${capitalize(size)}`]]: size !== 'medium',
           [classes[`size${capitalize(size)}`]]: size !== 'medium',
+          [classes.disableElevation]: disableElevation,
           [classes.disabled]: disabled,
           [classes.fullWidth]: fullWidth,
           [classes.colorInherit]: color === 'inherit',
@@ -332,6 +353,10 @@ Button.propTypes = {
    * If `true`, the button will be disabled.
    */
   disabled: PropTypes.bool,
+  /**
+   * If `true`, no elevation is used.
+   */
+  disableElevation: PropTypes.bool,
   /**
    * If `true`, the  keyboard focus ripple will be disabled.
    * `disableRipple` must also be true.
```

[netochaves]

Can I work on this?

[jawpio]

Guys, is it possible to override it on top level?

I tried following approach but no luck:

let theme = createMuiTheme({
  overrides: {
    MuiButton: {
      disableElevation: {
          boxShadow: 'none',
          '&:hover': {
            boxShadow: 'none',
            '@media (hover: none)': {
              boxShadow: 'none',
            },
          },
          '&$focusVisible': {
            boxShadow: 'none',
          },
          '&:active': {
            boxShadow: 'none',
          },
          '&$disabled': {
            boxShadow: 'none',
          },
      },
      root: {
        borderRadius: 2
      },
....

[oliviertassinari]

@jawpio Simpler:

const theme = createMuiTheme({
  props: {
    MuiButton: {
      disableElevation: true,
    },
  },
});

[negarineh]

@jawpio Simpler:

const theme = createMuiTheme({
  props: {
    MuiButton: {
      disableElevation: true,
    },
  },
});

This just shows an error like in console:

Warning: Material-UI: you are trying to override a style that does not exist.
Fix the `disableElevation` key of `theme.overrides.MuiButton`. 

Any suggestion how we can use disableElevation to get it to work?
This one also does not work:

<MaterialButton disableElevation variant="contained" color="primary" >

Thanks in advance for suggestions

[oliviertassinari]

@negarineh theme.overrides !== theme.props

[cmacdonnacha]

@oliviertassinari Is there a way to use disableElevation but still have a box shadow for pseudo classes like :active or :hover? Right now it looks like disableElevation overrides all styles, no matter what:

[oliviertassinari]

@cmacdonnacha you can customize the CSS directly.

[cmacdonnacha]

@oliviertassinari Yea I have added some css to my main theme.ts file but it still doesn't seem to work:

  props: {
    MuiButton: {
      disableElevation: true,
      variant: 'contained',
    },
  },
  overrides: {
    MuiButton: {
      root: {
        borderRadius: '2px',
        '&:active': {
          boxShadow: 'inset 0px 4px 4px rgba(0, 40, 56, 0.4)',
        },
      },
    },