[Button] disableElevation prop

[netochaves]

Closes #16357 Added a disableElevation prop to Button.

• I have followed (at least) the PR section of the contributing guide.

[mui-pr-bot]

Details of bundle changes.

Comparing: 53ef743...f7bf663

bundle	Size Change	Size	Gzip Change	Gzip
@material-ui/core[umd]	▲ +241 B (+0.08% )	312 kB	▲ +66 B (+0.07% )	90.2 kB
ButtonGroup	▲ +241 B (+0.30% )	81.1 kB	▲ +56 B (+0.23% )	24.8 kB
Button	▲ +241 B (+0.31% )	78.5 kB	▲ +49 B (+0.20% )	24 kB
docs.main	▲ +241 B (+0.04% )	610 kB	▲ +43 B (+0.02% )	194 kB
@material-ui/core	▲ +241 B (+0.07% )	356 kB	▲ +29 B (+0.03% )	97.2 kB
@material-ui/lab	--	175 kB	--	52.4 kB
@material-ui/styles	--	51 kB	--	15.3 kB
@material-ui/system	--	14.8 kB	--	4.07 kB
AppBar	--	62.7 kB	--	19.5 kB
Autocomplete	--	128 kB	--	39.8 kB
Avatar	--	64.2 kB	--	20.1 kB
AvatarGroup	--	61.2 kB	--	19.1 kB
Backdrop	--	66.6 kB	--	20.5 kB
Badge	--	64.2 kB	--	19.9 kB
BottomNavigation	--	61.3 kB	--	19.1 kB
BottomNavigationAction	--	74.3 kB	--	23.4 kB
Box	--	69.6 kB	--	21 kB
Breadcrumbs	--	66.9 kB	--	20.9 kB
ButtonBase	--	72.8 kB	--	22.8 kB
Card	--	61.6 kB	--	19.2 kB
CardActionArea	--	73.9 kB	--	23.1 kB
CardActions	--	60.9 kB	--	19 kB
CardContent	--	60.9 kB	--	19 kB
CardHeader	--	64 kB	--	20 kB
CardMedia	--	61.2 kB	--	19.2 kB
Checkbox	--	80.8 kB	--	25.4 kB
Chip	--	81.4 kB	--	24.8 kB
CircularProgress	--	63 kB	--	19.8 kB
ClickAwayListener	--	3.87 kB	--	1.56 kB
Collapse	--	66.8 kB	--	20.6 kB
colorManipulator	--	3.85 kB	--	1.52 kB
Container	--	62.1 kB	--	19.3 kB
CssBaseline	--	56.5 kB	--	17.6 kB
Dialog	--	81.5 kB	--	25.4 kB
DialogActions	--	61 kB	--	19 kB
DialogContent	--	61.1 kB	--	19.1 kB
DialogContentText	--	62.9 kB	--	19.7 kB
DialogTitle	--	63.2 kB	--	19.7 kB
Divider	--	61.5 kB	--	19.2 kB
docs.landing	--	52.4 kB	--	11.4 kB
Drawer	--	83.2 kB	--	25.2 kB
ExpansionPanel	--	70.2 kB	--	21.8 kB
ExpansionPanelActions	--	61 kB	--	19 kB
ExpansionPanelDetails	--	60.8 kB	--	19 kB
ExpansionPanelSummary	--	76.9 kB	--	24.2 kB
Fab	--	75.6 kB	--	23.5 kB
Fade	--	22.5 kB	--	7.71 kB
FilledInput	--	72.4 kB	--	22.4 kB
FormControl	--	63.3 kB	--	19.6 kB
FormControlLabel	--	64.4 kB	--	20.1 kB
FormGroup	--	60.9 kB	--	19 kB
FormHelperText	--	62.2 kB	--	19.4 kB
FormLabel	--	62.4 kB	--	19.2 kB
Grid	--	64 kB	--	20 kB
GridList	--	61.4 kB	--	19.2 kB
GridListTile	--	62.6 kB	--	19.5 kB
GridListTileBar	--	62.1 kB	--	19.4 kB
Grow	--	23.1 kB	--	7.83 kB
Hidden	--	64.8 kB	--	20.2 kB
Icon	--	61.7 kB	--	19.2 kB
IconButton	--	75 kB	--	23.3 kB
Input	--	71.3 kB	--	22.1 kB
InputAdornment	--	64 kB	--	20 kB
InputBase	--	69.4 kB	--	21.7 kB
InputLabel	--	64.2 kB	--	20 kB
LinearProgress	--	64.2 kB	--	20 kB
Link	--	65.5 kB	--	20.6 kB
List	--	61.3 kB	--	19 kB
ListItem	--	76 kB	--	23.6 kB
ListItemAvatar	--	61 kB	--	19 kB
ListItemIcon	--	61.1 kB	--	19 kB
ListItemSecondaryAction	--	60.9 kB	--	19 kB
ListItemText	--	63.9 kB	--	19.9 kB
ListSubheader	--	61.7 kB	--	19.3 kB
Menu	--	87.2 kB	--	26.8 kB
MenuItem	--	77 kB	--	23.9 kB
MenuList	--	64.9 kB	--	20.2 kB
MobileStepper	--	66.6 kB	--	20.8 kB
Modal	--	14.3 kB	--	5 kB
NativeSelect	--	75.6 kB	--	23.7 kB
NoSsr	--	2.19 kB	--	1.03 kB
OutlinedInput	--	72.8 kB	--	22.6 kB
Paper	--	61.1 kB	--	19 kB
Popover	--	81.5 kB	--	25.1 kB
Popper	--	28.7 kB	--	10.2 kB
Portal	--	2.9 kB	--	1.3 kB
Radio	--	81.7 kB	--	25.7 kB
RadioGroup	--	62.1 kB	--	19.4 kB
Rating	--	68.9 kB	--	22 kB
RootRef	--	4.43 kB	--	1.66 kB
Select	--	113 kB	--	33.5 kB
Skeleton	--	61.5 kB	--	19.3 kB
Slide	--	24.5 kB	--	8.33 kB
Slider	--	74.5 kB	--	23.3 kB
Snackbar	--	76 kB	--	23.7 kB
SnackbarContent	--	64.5 kB	--	20.2 kB
SpeedDial	--	84.9 kB	--	26.7 kB
SpeedDialAction	--	116 kB	--	36.6 kB
SpeedDialIcon	--	63.5 kB	--	19.8 kB
Step	--	61.5 kB	--	19.2 kB
StepButton	--	81.1 kB	--	25.5 kB
StepConnector	--	61.6 kB	--	19.3 kB
StepContent	--	67.9 kB	--	21.2 kB
StepIcon	--	63.5 kB	--	19.7 kB
StepLabel	--	67.5 kB	--	21.1 kB
Stepper	--	63.6 kB	--	20 kB
styles/createMuiTheme	--	15.7 kB	--	5.47 kB
SvgIcon	--	61.9 kB	--	19.3 kB
SwipeableDrawer	--	90.6 kB	--	28 kB
Switch	--	80 kB	--	25 kB
Tab	--	75.2 kB	--	23.7 kB
Table	--	61.5 kB	--	19.2 kB
TableBody	--	61 kB	--	19 kB
TableCell	--	62.9 kB	--	19.7 kB
TableFooter	--	61 kB	--	19 kB
TableHead	--	61 kB	--	19 kB
TablePagination	--	140 kB	--	40.8 kB
TableRow	--	61.4 kB	--	19.1 kB
TableSortLabel	--	76.2 kB	--	23.9 kB
Tabs	--	84.3 kB	--	26.5 kB
TextareaAutosize	--	5.06 kB	--	2.11 kB
TextField	--	122 kB	--	35.6 kB
ToggleButton	--	75 kB	--	23.7 kB
ToggleButtonGroup	--	62.1 kB	--	19.4 kB
Toolbar	--	61.2 kB	--	19.1 kB
Tooltip	--	99.7 kB	--	31.5 kB
TreeItem	--	72.5 kB	--	22.8 kB
TreeView	--	65.3 kB	--	20.4 kB
Typography	--	62.5 kB	--	19.5 kB
useAutocomplete	--	12.6 kB	--	4.63 kB
useMediaQuery	--	2.47 kB	--	1.04 kB
Zoom	--	22.5 kB	--	7.71 kB

Generated by 🚫 dangerJS against f7bf663

[mbrookes]

Could you add a demo? I guess it can go in docs/src/pages/components/buttons/ContainedButtons.js for now. A test would be good too.

[netochaves]

Done @mbrookes

[oliviertassinari]

@netochaves Thank you.

[Morriz]

Can I ask why it is chosen to deviate from elevation and go with a crude disableElevation prop instead? Does not seem to conform to the rest of Material UI components. Weird...

[oliviertassinari]

@Morriz What's your use case?

[eps1lon]

@Morriz What's your use case?

I think the point was why we didn't implement elevation={n} instead. The current implementation does not conform in any way to Material design since elevation is integral to the design system. Increasing or reducing elevation to make buttons stand out more might make sense but disabling it entirely doesn't.

[oliviertassinari]

The purpose of the disableElevation prop is to simplify customizations. The box-shadow had 6 different values, depending on the state of the button element.