diff --git a/components/button/Button.jsx b/components/button/Button.jsx index 7f6b78786..9de384cae 100644 --- a/components/button/Button.jsx +++ b/components/button/Button.jsx @@ -17,6 +17,7 @@ class Button extends React.Component { inverse: React.PropTypes.bool, label: React.PropTypes.string, mini: React.PropTypes.bool, + neutral: React.PropTypes.bool, onMouseLeave: React.PropTypes.func, onMouseUp: React.PropTypes.func, primary: React.PropTypes.bool, @@ -30,6 +31,7 @@ class Button extends React.Component { flat: false, floating: false, mini: false, + neutral: true, primary: false, raised: false }; @@ -46,13 +48,13 @@ class Button extends React.Component { render () { const { accent, children, className, flat, floating, href, icon, - inverse, label, mini, primary, raised, ...others} = this.props; + inverse, label, mini, neutral, primary, raised, ...others} = this.props; const element = href ? 'a' : 'button'; const level = primary ? 'primary' : accent ? 'accent' : 'neutral'; const shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : 'flat'; const classes = ClassNames([style[shape]], { - [style[level]]: className === '', + [style[level]]: neutral, [style.mini]: mini, [style.inverse]: inverse }, className); diff --git a/components/button/IconButton.jsx b/components/button/IconButton.jsx index 15058a39f..ae0105e66 100644 --- a/components/button/IconButton.jsx +++ b/components/button/IconButton.jsx @@ -13,6 +13,7 @@ class IconButton extends React.Component { href: React.PropTypes.string, icon: React.PropTypes.string, inverse: React.PropTypes.bool, + neutral: React.PropTypes.bool, primary: React.PropTypes.bool, type: React.PropTypes.string }; @@ -20,6 +21,7 @@ class IconButton extends React.Component { static defaultProps = { accent: false, className: '', + neutral: true, primary: false }; @@ -28,11 +30,11 @@ class IconButton extends React.Component { }; render () { - const {accent, children, className, href, icon, inverse, primary, ...others} = this.props; + const {accent, children, className, href, icon, inverse, neutral, primary, ...others} = this.props; const element = href ? 'a' : 'button'; const level = primary ? 'primary' : accent ? 'accent' : 'neutral'; const classes = ClassNames([style.toggle], { - [style[level]]: className === '', + [style[level]]: neutral, [style.inverse]: inverse }, className); diff --git a/components/button/readme.md b/components/button/readme.md index 91e4e3370..5def51952 100644 --- a/components/button/readme.md +++ b/components/button/readme.md @@ -43,6 +43,7 @@ const TestButtons = () => ( | `inverse` | `Boolean` | | If true, the neutral colors are inverted. Useful to put a button over a dark background. | | `label` | `String` | | The text string to use for the name of the button.| | `mini` | `Boolean` | `false` | To be used with floating button. If true the button will be smaller.| +| `neutral` | `Boolean` | `true` | Set it to `false` if you don't want the neutral styles to be included.| | `primary` | `false` | `false` | Indicates if the button should have primary color.| | `raised` | `Boolean` | `false` | If true, the button will have a raised look. | | `ripple` | `Boolean` | `true` | If true, component will have a ripple effect on click.|