import React from 'react';

var Button = React.createClass({
  getInitialState() {
    return {};
  },
  render() {
    const {
      children,
      kind = 'default'
    } = this.props;

    const cls = `btn btn-${kind}`;

    return (
      <button className={cls} role="button"
        onClick={() => this.setState(s => ({ toggle: !s.toggle }))}
        style={{ fontSize: this.state.toggle ? '20px' : '10px'}}
      >
        {children}
      </button>
    );
  }
});

export default Button;

import React from 'react';

var Button = React.createClass({
  render() {
    const {
      children,
      kind = 'default'
    } = this.props;

    const cls = `btn btn-${kind}`;

    return (
      <button className={cls} role="button">
        {children}
      </button>
    );
  }
});

export default Button;

--- 
+++ 
@@ -1,6 +1,9 @@
 import React from 'react';
 
 var Button = React.createClass({
+  getInitialState() {
+    return {};
+  },
   render() {
     const {
       children,
@@ -10,7 +13,10 @@
     const cls = `btn btn-${kind}`;
 
     return (
-      <button className={cls} role="button">
+      <button className={cls} role="button"
+        onClick={() => this.setState(s => ({ toggle: !s.toggle }))}
+        style={{ fontSize: this.state.toggle ? '20px' : '10px'}}
+      >
         {children}
       </button>
     );
Make the button example a bit more dynamic
