diff --git a/docs/src/app/components/pages/components/buttons.jsx b/docs/src/app/components/pages/components/buttons.jsx index b3a39ed6c98187..8649a1df918fd9 100644 --- a/docs/src/app/components/pages/components/buttons.jsx +++ b/docs/src/app/components/pages/components/buttons.jsx @@ -144,6 +144,12 @@ class ButtonPage extends React.Component { { name: 'Raised Button', infoArray: [ + { + name: 'fullWidth', + type: 'bool', + header: 'optional', + desc: 'If true, will change the width of the button to span the full width of the parent.' + }, { name: 'containerElement', type: 'oneOfType [string, element]', @@ -404,6 +410,9 @@ class ButtonPage extends React.Component { +
+ +
diff --git a/src/raised-button.jsx b/src/raised-button.jsx index ad187bfd931c9d..a90f25f9bf64b2 100644 --- a/src/raised-button.jsx +++ b/src/raised-button.jsx @@ -34,6 +34,7 @@ let RaisedButton = React.createClass({ primary: React.PropTypes.bool, secondary: React.PropTypes.bool, labelStyle: React.PropTypes.object, + fullWidth: React.PropTypes.bool }, getInitialState: function() { @@ -81,7 +82,7 @@ let RaisedButton = React.createClass({ let styles = { root: { display: 'inline-block', - minWidth: this.getThemeButton().minWidth, + minWidth: this.props.fullWidth ? '100%' : this.getThemeButton().minWidth, height: this.getThemeButton().height, transition: Transitions.easeOut() },