diff --git a/docs/src/app/components/pages/components/FlatButton/ExampleSimple.js b/docs/src/app/components/pages/components/FlatButton/ExampleSimple.js
index 80ef74e1f07aa0..6bef81ee3bb8aa 100644
--- a/docs/src/app/components/pages/components/FlatButton/ExampleSimple.js
+++ b/docs/src/app/components/pages/components/FlatButton/ExampleSimple.js
@@ -7,6 +7,9 @@ const FlatButtonExampleSimple = () => (
     <FlatButton label="Primary" primary={true} />
     <FlatButton label="Secondary" secondary={true} />
     <FlatButton label="Disabled" disabled={true} />
+    <br />
+    <br />
+    <FlatButton label="Full width" fullWidth={true} />
   </div>
 );
 
diff --git a/src/FlatButton/FlatButton.js b/src/FlatButton/FlatButton.js
index cda0063edb3485..5bc48f19600dfa 100644
--- a/src/FlatButton/FlatButton.js
+++ b/src/FlatButton/FlatButton.js
@@ -35,6 +35,10 @@ class FlatButton extends Component {
      * Disables the button if set to true.
      */
     disabled: PropTypes.bool,
+    /**
+     * If true, the button will take up the full width of its container.
+     */
+    fullWidth: PropTypes.bool,
     /**
      * Color of button when mouse hovers over.
      */
@@ -97,6 +101,7 @@ class FlatButton extends Component {
 
   static defaultProps = {
     disabled: false,
+    fullWidth: false,
     labelStyle: {},
     labelPosition: 'after',
     onKeyboardFocus: () => {},
@@ -148,10 +153,11 @@ class FlatButton extends Component {
 
   render() {
     const {
+      backgroundColor,
       children,
       disabled,
+      fullWidth,
       hoverColor,
-      backgroundColor,
       icon,
       label,
       labelStyle,
@@ -196,7 +202,7 @@ class FlatButton extends Component {
     const mergedRootStyles = Object.assign({}, {
       height: buttonHeight,
       lineHeight: `${buttonHeight}px`,
-      minWidth: buttonMinWidth,
+      minWidth: fullWidth ? '100%' : buttonMinWidth,
       color: defaultTextColor,
       transition: transitions.easeOut(),
       borderRadius: 2,