diff --git a/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js b/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js
index 41d5676b854441..0d1d1319ff3a9e 100644
--- a/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js
+++ b/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js
@@ -2,6 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { withStyles } from '@material-ui/core/styles';
+import { emphasize } from '@material-ui/core/styles/colorManipulator';
import Button from '@material-ui/core/Button';
import Tooltip from '@material-ui/core/Tooltip';
@@ -14,6 +15,10 @@ export const styles = theme => ({
button: {
margin: 8,
color: theme.palette.text.secondary,
+ backgroundColor: emphasize(theme.palette.background.default, 0.12),
+ '&:hover': {
+ backgroundColor: emphasize(theme.palette.background.default, 0.15),
+ },
transition: `${theme.transitions.create('transform', {
duration: theme.transitions.duration.shorter,
})}, opacity 0.8s`,
diff --git a/packages/material-ui/src/Button/Button.js b/packages/material-ui/src/Button/Button.js
index 965603ba079ebc..9096ca46ebf195 100644
--- a/packages/material-ui/src/Button/Button.js
+++ b/packages/material-ui/src/Button/Button.js
@@ -79,7 +79,7 @@ export const styles = theme => ({
theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'
}`,
},
- /* Styles applied to the root element if `variant="contained"`. */
+ /* Styles applied to the root element if `variant="[contained | fab]"`. */
contained: {
color: theme.palette.getContrastText(theme.palette.grey[300]),
backgroundColor: theme.palette.grey[300],
@@ -106,7 +106,7 @@ export const styles = theme => ({
},
},
},
- /* Styles applied to the root element if `variant="contained"` and `color="primary"`. */
+ /* Styles applied to the root element if `variant="[contained | fab|"` and `color="primary"`. */
containedPrimary: {
color: theme.palette.primary.contrastText,
backgroundColor: theme.palette.primary.main,
@@ -118,7 +118,7 @@ export const styles = theme => ({
},
},
},
- /* Styles applied to the root element if `variant="contained"` and `color="secondary"`. */
+ /* Styles applied to the root element if `variant="[contained | fab]"` and `color="secondary"`. */
containedSecondary: {
color: theme.palette.secondary.contrastText,
backgroundColor: theme.palette.secondary.main,
@@ -136,7 +136,7 @@ export const styles = theme => ({
raisedPrimary: {}, // legacy
/* Styles applied to the root element for backwards compatibility with legacy variant naming. */
raisedSecondary: {}, // legacy
- /* Styles applied to the root element if `variant="fab"`. */
+ /* Styles applied to the root element if `variant="[fab | extendedFab]"`. */
fab: {
borderRadius: '50%',
padding: 0,
@@ -164,7 +164,7 @@ export const styles = theme => ({
colorInherit: {
color: 'inherit',
},
- /* Styles applied to the root element if `size="mini"`. */
+ /* Styles applied to the root element if `size="mini"` & `variant="[fab | extendedFab]"`. */
mini: {
width: 40,
height: 40,
diff --git a/pages/api/button.md b/pages/api/button.md
index 6a6693aa496855..9d7b1883e05f03 100644
--- a/pages/api/button.md
+++ b/pages/api/button.md
@@ -47,18 +47,18 @@ This property accepts the following keys:
| flatPrimary | Styles applied to the root element for backwards compatibility with legacy variant naming.
| flatSecondary | Styles applied to the root element for backwards compatibility with legacy variant naming.
| outlined | Styles applied to the root element if `variant="outlined"`.
-| contained | Styles applied to the root element if `variant="contained"`.
-| containedPrimary | Styles applied to the root element if `variant="contained"` and `color="primary"`.
-| containedSecondary | Styles applied to the root element if `variant="contained"` and `color="secondary"`.
+| contained | Styles applied to the root element if `variant="[contained | fab]"`.
+| containedPrimary | Styles applied to the root element if `variant="[contained | fab|"` and `color="primary"`.
+| containedSecondary | Styles applied to the root element if `variant="[contained | fab]"` and `color="secondary"`.
| raised | Styles applied to the root element for backwards compatibility with legacy variant naming.
| raisedPrimary | Styles applied to the root element for backwards compatibility with legacy variant naming.
| raisedSecondary | Styles applied to the root element for backwards compatibility with legacy variant naming.
-| fab | Styles applied to the root element if `variant="fab"`.
+| fab | Styles applied to the root element if `variant="[fab | extendedFab]"`.
| extendedFab | Styles applied to the root element if `variant="extendedFab"`.
| focusVisible | Styles applied to the ButtonBase root element if the button is keyboard focused.
| disabled | Styles applied to the root element if `disabled={true}`.
| colorInherit | Styles applied to the root element if `color="inherit"`.
-| mini | Styles applied to the root element if `size="mini"`.
+| mini | Styles applied to the root element if `size="mini"` & `variant="[fab | extendedFab]"`.
| sizeSmall | Styles applied to the root element if `size="small"`.
| sizeLarge | Styles applied to the root element if `size="large"`.
| fullWidth | Styles applied to the root element if `fullWidth={true}`.