diff --git a/docs/src/app/components/pages/components/buttons.jsx b/docs/src/app/components/pages/components/buttons.jsx
index 66d6b52e646171..f19b66d5be70db 100644
--- a/docs/src/app/components/pages/components/buttons.jsx
+++ b/docs/src/app/components/pages/components/buttons.jsx
@@ -70,6 +70,12 @@ export default class ButtonPage extends React.Component {
header: 'optional',
desc: 'Override the inline-styles of the button\'s label element.',
},
+ {
+ name: 'labelPosition',
+ type: 'oneOf ["before", "after"]',
+ header: 'default: "before"',
+ desc: 'Place label before or after the passed children',
+ },
{
name: 'linkButton',
type: 'bool',
@@ -319,7 +325,6 @@ export default class ButtonPage extends React.Component {
height: '100%',
display: 'inline-block',
verticalAlign: 'middle',
- float: 'left',
paddingLeft: '12px',
lineHeight: '36px',
color: Colors.cyan500,
@@ -375,7 +380,17 @@ export default class ButtonPage extends React.Component {
+
+
+
+
+
@@ -420,6 +435,15 @@ export default class ButtonPage extends React.Component {
+
+
+
+
+
diff --git a/docs/src/app/components/raw-code/flat-button-code.txt b/docs/src/app/components/raw-code/flat-button-code.txt
index 4a22cf57b6502f..3bc6aa4d4b760c 100644
--- a/docs/src/app/components/raw-code/flat-button-code.txt
+++ b/docs/src/app/components/raw-code/flat-button-code.txt
@@ -1,15 +1,19 @@
-//Flat Buttons
+
+
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/src/app/components/raw-code/raised-button-code.txt b/docs/src/app/components/raw-code/raised-button-code.txt
index aa2b5361fccd20..93eb6c4509650b 100644
--- a/docs/src/app/components/raw-code/raised-button-code.txt
+++ b/docs/src/app/components/raw-code/raised-button-code.txt
@@ -1,16 +1,19 @@
-//Raised Buttons
+
+
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/flat-button.jsx b/src/flat-button.jsx
index 57391c922e5555..bc16c7483fe8e6 100644
--- a/src/flat-button.jsx
+++ b/src/flat-button.jsx
@@ -67,7 +67,10 @@ const FlatButton = React.createClass({
disabled: React.PropTypes.bool,
hoverColor: React.PropTypes.string,
label: validateLabel,
- labelPosition: React.PropTypes.oneOf(['before', 'after']),
+ labelPosition: React.PropTypes.oneOf([
+ 'before',
+ 'after',
+ ]),
labelStyle: React.PropTypes.object,
onKeyboardFocus: React.PropTypes.func,
onMouseEnter: React.PropTypes.func,
@@ -81,7 +84,7 @@ const FlatButton = React.createClass({
getDefaultProps() {
return {
labelStyle: {},
- labelPosition: 'before',
+ labelPosition: 'before', // Should be after but we keep it like for now (prevent breaking changes)
onKeyboardFocus: () => {},
onMouseEnter: () => {},
onMouseLeave: () => {},
@@ -123,7 +126,7 @@ const FlatButton = React.createClass({
secondary,
style,
...other,
- } = this.props;
+ } = this.props;
const {
buttonColor,
@@ -172,11 +175,14 @@ const FlatButton = React.createClass({
const labelElement = label ? (
) : undefined;
+
// Place label before or after children.
- const childrenFragment = labelPosition === 'before' ? { labelElement, children } : { children, labelElement };
+ const childrenFragment = labelPosition === 'before' ?
+ { labelElement, children }
+ :
+ { children, labelElement };
const enhancedButtonChildren = Children.create(childrenFragment);
-
return (
+
{label}
);
@@ -190,6 +205,13 @@ const RaisedButton = React.createClass({
onKeyboardFocus: this._handleKeyboardFocus,
};
+ // Place label before or after children.
+ const childrenFragment = labelPosition === 'before' ?
+ { labelElement, children }
+ :
+ { children, labelElement };
+ const enhancedButtonChildren = Children.create(childrenFragment);
+
return (
- {labelElement}
- {this.props.children}
+ {enhancedButtonChildren}