Add linkButton functionality to buttons. Fixes #130

docs/src/app/components/pages/components/buttons.jsx

@@ -108,6 +108,12 @@ var ButtonPage = React.createClass({
             desc: 'This is the text to display inside the button. This only applies to flat and ' +
               'raised buttons.'
           },
+          {
+            name: 'linkButton',
+            type: 'bool',
+            header: 'default: false',
+            desc: 'If true, an anchor element will be generated instead of a button element.'
+          },
           {
             name: 'primary',
             type: 'bool',
@@ -128,6 +134,12 @@ var ButtonPage = React.createClass({
             desc: 'This is the text to display inside the button. This only applies to flat and ' +
               'raised buttons.'
           },
+          {
+            name: 'linkButton',
+            type: 'bool',
+            header: 'default: false',
+            desc: 'If true, an anchor element will be generated instead of a button element.'
+          },
           {
             name: 'primary',
             type: 'bool',
@@ -148,6 +160,12 @@ var ButtonPage = React.createClass({
             desc: 'This is the name of the icon to display inside the button. This only applies to ' +
               'floating action buttons.'
           },
+          {
+            name: 'linkButton',
+            type: 'bool',
+            header: 'default: false',
+            desc: 'If true, an anchor element will be generated instead of a button element.'
+          },
           {
             name: 'mini',
             type: 'bool',

src/js/enhanced-button.jsx

@@ -1,7 +1,7 @@
-var React = require('react'),
-  KeyCode = require('./utils/key-code.js'),
-  Classable = require('./mixins/classable.js'),
-  WindowListenable = require('./mixins/window-listenable');
+var React = require('react');
+var KeyCode = require('./utils/key-code.js');
+var Classable = require('./mixins/classable.js');
+var WindowListenable = require('./mixins/window-listenable');
 
 var EnhancedButton = React.createClass({
 
@@ -10,6 +10,7 @@ var EnhancedButton = React.createClass({
   propTypes: {
     className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
+    linkButton: React.PropTypes.bool,
     onBlur: React.PropTypes.func,
     onFocus: React.PropTypes.func,
     onTouchTap: React.PropTypes.func
@@ -30,14 +31,33 @@ var EnhancedButton = React.createClass({
       className,
       disabled,
       icon,
+      linkButton,
       onTouchTap,
-      ...other } = this.props,
-      classes = this.getClasses('mui-enhanced-button', {
-        'mui-is-disabled': disabled,
-        'mui-is-keyboard-focused': this.state.isKeyboardFocused
-      });
+      ...other } = this.props;
+    var classes = this.getClasses('mui-enhanced-button', {
+      'mui-is-disabled': disabled,
+      'mui-is-keyboard-focused': this.state.isKeyboardFocused,
+      'mui-is-link-button': linkButton
+    });
 
-    return (
+    return this.props.linkButton ? (
+      this.props.disabled ? (
+        <span {...other} 
+          className={classes} 
+          disabled={disabled}>
+          {this.props.children}
+        </span>
+      ) : (
+        <a {...other} 
+          className={classes} 
+          disabled={disabled} 
+          onBlur={this._onBlur}
+          onFocus={this._onFocus}
+          onTouchTap={this._onTouchTap}>
+          {this.props.children}
+        </a>
+      )
+    ) : (
       <button {...other} 
         className={classes} 
         disabled={disabled} 

src/less/components/enhanced-button.less

@@ -7,4 +7,17 @@
     outline: none;
   }
 
+  &.mui-is-link-button {
+    display: inline-block;
+    cursor: pointer;
+
+    &:hover {
+      text-decoration: none;
+    }
+
+    &.mui-is-disabled {
+      cursor: default;
+    }
+  }
+
 }

src/less/components/flat-button.less

@@ -70,5 +70,4 @@
       }
     }
   }
-
 }

src/less/components/raised-button.less

@@ -2,6 +2,7 @@
 
   display: inline-block;
   min-width: @button-min-width;
+  height: @button-height;
 
   * { .ease-out(); }