diff --git a/docs/src/pages/demos/buttons/TransitionFab.js b/docs/src/pages/demos/buttons/TransitionFab.js
new file mode 100644
index 00000000000000..f1d3f8c43d172f
--- /dev/null
+++ b/docs/src/pages/demos/buttons/TransitionFab.js
@@ -0,0 +1,62 @@
+// @flow weak
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from 'material-ui/styles';
+import Button from 'material-ui/Button';
+import AddIcon from 'material-ui-icons/Add';
+import ModeEditIcon from 'material-ui-icons/ModeEdit';
+import CloseIcon from 'material-ui-icons/Close';
+import AccountCircle from 'material-ui-icons/AccountCircle';
+
+const styles = theme => ({
+  button: {
+    margin: theme.spacing.unit,
+    display: 'block',
+  },
+});
+
+class TransitionFab extends React.Component {
+  state = {
+    open: false,
+  };
+
+  toggleOpen = () => {
+    const { open } = this.state;
+    this.setState({ open: !open });
+  };
+
+  render() {
+    const { classes } = this.props;
+    const { open } = this.state;
+    return (
+      <div>
+        {open && (
+          <div className={classes.fabcontainer}>
+            <Button fab color="accent" aria-label="edit" className={classes.button}>
+              <ModeEditIcon />
+            </Button>
+            <Button fab color="accent" aria-label="edit" className={classes.button}>
+              <AccountCircle />
+            </Button>
+          </div>
+        )}
+        <Button
+          fab
+          color="primary"
+          aria-label="add"
+          className={classes.button}
+          onClick={this.toggleOpen}
+        >
+          {open ? <CloseIcon /> : <AddIcon />}
+        </Button>
+      </div>
+    );
+  }
+}
+
+TransitionFab.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(TransitionFab);
diff --git a/docs/src/pages/demos/buttons/buttons.md b/docs/src/pages/demos/buttons/buttons.md
index b88c1201e868cc..286595f514cc70 100644
--- a/docs/src/pages/demos/buttons/buttons.md
+++ b/docs/src/pages/demos/buttons/buttons.md
@@ -48,6 +48,12 @@ Sometimes you might want to have icons for certain button to enhance the UX of t
 
 {{demo='pages/demos/buttons/IconLabelButtons.js'}}
 
+### TransitionFab Buttons
+
+A FAB that reveals other fabs when clicked, and hides them when clicked again.
+
+{{demo='pages/demos/buttons/TransitionFab.js'}}
+
 ## Complex Buttons
 
 The Flat Buttons, Raised Buttons, Floating Action Buttons and Icon Buttons are built on top of the same component: the `ButtonBase`.
diff --git a/pages/demos/buttons.js b/pages/demos/buttons.js
index f82a552405ee62..1d93b5371c0366 100644
--- a/pages/demos/buttons.js
+++ b/pages/demos/buttons.js
@@ -43,6 +43,13 @@ module.exports = require('fs')
           raw: preval`
 module.exports = require('fs')
   .readFileSync(require.resolve('docs/src/pages/demos/buttons/IconLabelButtons'), 'utf8')
+`,
+        },
+        'pages/demos/buttons/TransitionFab.js': {
+          js: require('docs/src/pages/demos/buttons/TransitionFab').default,
+          raw: preval`
+ module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/demos/buttons/TransitionFab'), 'utf8')
 `,
         },
         'pages/demos/buttons/ButtonBases.js': {