diff --git a/.eslintrc b/.eslintrc
index 106f32e..c27e62f 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -23,7 +23,7 @@
         "strict": [2, "global"],
 
         "react/display-name": 0,
-        "react/jsx-boolean-value": [2, "always"],
+        "react/jsx-boolean-value": [2, "never"],
         "react/jsx-no-undef": 2,
         "react/jsx-sort-props": 0,
         "react/jsx-sort-prop-types": 2,
diff --git a/demo/button/button.js b/demo/button/button.js
index 5171904..3e2b77d 100644
--- a/demo/button/button.js
+++ b/demo/button/button.js
@@ -11,11 +11,11 @@ class Demo extends React.Component {
             <div>
                 <h1>Colored FAB Button</h1>
                 <p>Colored FAB button</p>
-                <FABButton colored={true} ripple={false}>
+                <FABButton colored ripple={false}>
                     <Icon name="add" />
                 </FABButton>
                 <p>Colored FAB button with ripple</p>
-                <FABButton colored={true}>
+                <FABButton colored>
                     <Icon name="add" />
                 </FABButton>
 
@@ -29,26 +29,26 @@ class Demo extends React.Component {
                     <Icon name="add" />
                 </FABButton>
                 <p>Disabled FAB Button</p>
-                <FABButton disabled={true}>
+                <FABButton disabled>
                     <Icon name="add" />
                 </FABButton>
 
 
                 <h1>Raised Button</h1>
                 <p>Raised button</p>
-                <Button raised={true} ripple={false}>Button</Button>
+                <Button raised ripple={false}>Button</Button>
                 <p>Raised button with ripple</p>
-                <Button raised={true}>Button</Button>
+                <Button raised>Button</Button>
                 <p>Raised disabled button</p>
-                <Button raised={true} disabled={true}>Button</Button>
+                <Button raised disabled>Button</Button>
 
                 <h1>Colored Raised Button</h1>
                 <p>Raised button</p>
-                <Button raised={true} colored={true} ripple={false}>Button</Button>
+                <Button raised colored ripple={false}>Button</Button>
                 <p>Accent-colored raised button</p>
-                <Button raised={true} accent={true} ripple={false}>Button</Button>
+                <Button raised accent ripple={false}>Button</Button>
                 <p>Accent-colored raised button with ripple</p>
-                <Button raised={true} accent={true}>Button</Button>
+                <Button raised accent>Button</Button>
 
                 <h1>Flat button</h1>
                 <p>Flat button</p>
@@ -56,27 +56,27 @@ class Demo extends React.Component {
                 <p>Flat button with ripple</p>
                 <Button>Button</Button>
                 <p>Disabled Flat button</p>
-                <Button disabled={true}>Button</Button>
+                <Button disabled>Button</Button>
 
                 <h1>Colored Flat button</h1>
                 <p>Primary-colored Flat button</p>
-                <Button primary={true} ripple={false}>Button</Button>
+                <Button primary ripple={false}>Button</Button>
                 <p>Accent-colored flat button</p>
-                <Button accent={true} ripple={false}>Button</Button>
+                <Button accent ripple={false}>Button</Button>
 
                 <h1>Icon Button</h1>
                 <p>Icon button</p>
                 <IconButton name="mood" ripple={false} />
                 <p>Colored Icon button</p>
-                <IconButton name="mood" colored={true} ripple={false} />
+                <IconButton name="mood" colored ripple={false} />
 
                 <h1>Mini FAB Button</h1>
                 <p>Mini FAB Button</p>
-                <FABButton mini={true}>
+                <FABButton mini>
                     <Icon name="add" />
                 </FABButton>
                 <p>Colored Mini FAB Button</p>
-                <FABButton mini={true} colored={true}>
+                <FABButton mini colored>
                     <Icon name="add" />
                 </FABButton>
             </div>
diff --git a/demo/card/card.js b/demo/card/card.js
index d731fbf..f02bfbd 100644
--- a/demo/card/card.js
+++ b/demo/card/card.js
@@ -16,8 +16,8 @@ class Demo extends React.Component {
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                         Mauris sagittis pellentesque lacus eleifend lacinia...
                     </CardText>
-                    <CardActions border={true}>
-                        <Button colored={true}>Get Started</Button>
+                    <CardActions border>
+                        <Button colored>Get Started</Button>
                     </CardActions>
                     <CardMenu style={{color: '#fff'}}>
                         <IconButton name="share" />
@@ -26,19 +26,19 @@ class Demo extends React.Component {
 
                 <p>Square card</p>
                 <Card shadowLevel={0} style={{width: '320px', height: '320px'}}>
-                    <CardTitle expand={true} style={{color: '#fff', background: 'url(http://www.getmdl.io/assets/demos/dog.png) bottom right 15% no-repeat #46B6AC'}}>Update</CardTitle>
+                    <CardTitle expand style={{color: '#fff', background: 'url(http://www.getmdl.io/assets/demos/dog.png) bottom right 15% no-repeat #46B6AC'}}>Update</CardTitle>
                     <CardText>
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                         Aenan convallis.
                     </CardText>
-                    <CardActions border={true}>
-                        <Button colored={true}>View Updates</Button>
+                    <CardActions border>
+                        <Button colored>View Updates</Button>
                     </CardActions>
                 </Card>
 
                 <p>Image card</p>
                 <Card shadowLevel={0} style={{width: '256px', height: '256px', background: 'url(http://www.getmdl.io/assets/demos/image_card.jpg) center / cover'}}>
-                    <CardTitle expand={true} />
+                    <CardTitle expand />
                     <CardActions style={{height: '52px', padding: '16px', background: 'rgba(0,0,0,0.2)'}}>
                         <span style={{color: '#fff', fontSize: '14px', fontWeight: '500'}}>
                             Image.jpg
@@ -49,15 +49,15 @@ class Demo extends React.Component {
 
                 <p>Event card</p>
                 <Card shadowLevel={0} style={{width: '256px', height: '256px', background: '#3E4EB8'}}>
-                    <CardTitle expand={true} style={{alignItems: 'flex-start', color: '#fff'}}>
+                    <CardTitle expand style={{alignItems: 'flex-start', color: '#fff'}}>
                         <h4 style={{marginTop: '0'}}>
                             Featured event:<br />
                             May 24, 2016<br />
                             7-11pm
                         </h4>
                     </CardTitle>
-                    <CardActions border={true} style={{borderColor: 'rgba(255, 255, 255, 0.2)', display: 'flex', boxSizing: 'border-box', alignItems: 'center', color: '#fff'}}>
-                        <Button colored={true} style={{color: '#fff'}}>Add to Calendar</Button>
+                    <CardActions border style={{borderColor: 'rgba(255, 255, 255, 0.2)', display: 'flex', boxSizing: 'border-box', alignItems: 'center', color: '#fff'}}>
+                        <Button colored style={{color: '#fff'}}>Add to Calendar</Button>
                         <div className="mdl-layout-spacer"></div>
                         <Icon name="event" />
                     </CardActions>
diff --git a/demo/datatable/datatable.js b/demo/datatable/datatable.js
index 824541b..3679a3d 100644
--- a/demo/datatable/datatable.js
+++ b/demo/datatable/datatable.js
@@ -18,7 +18,7 @@ class Demo extends React.Component {
 
         return (
             <div>
-                <DataTable columns={columns} data={data} selectable={true} />
+                <DataTable columns={columns} data={data} selectable />
             </div>
         );
     }
diff --git a/demo/layout/layout.js b/demo/layout/layout.js
index 131d80d..6c20153 100644
--- a/demo/layout/layout.js
+++ b/demo/layout/layout.js
@@ -10,7 +10,7 @@ class Demo extends React.Component {
                 <p>Uses a transparent header that draws on top of the layout's background</p>
                 <div style={{height: '300px', position: 'relative'}}>
                     <Layout style={{background: 'url(http://www.getmdl.io/assets/demos/transparent.jpg) center / cover'}}>
-                        <Header transparent={true} title="Title" style={{color: 'white'}}>
+                        <Header transparent title="Title" style={{color: 'white'}}>
                             <Navigation>
                                 <a href="">Link</a>
                                 <a href="">Link</a>
@@ -32,7 +32,7 @@ class Demo extends React.Component {
 
                 <p>No header, and the drawer stays open on larger screens (fixed drawer).</p>
                 <div style={{height: '300px', position: 'relative'}}>
-                    <Layout fixedDrawer={true}>
+                    <Layout fixedDrawer>
                         <Drawer title="Title">
                             <Navigation>
                                 <a href="">Link</a>
@@ -47,7 +47,7 @@ class Demo extends React.Component {
 
                 <p>Always shows a header, even in smaller screens.</p>
                 <div style={{height: '300px', position: 'relative'}}>
-                    <Layout fixedHeader={true}>
+                    <Layout fixedHeader>
                         <Header title={<span><span style={{ color: '#ddd' }}>Area / </span><strong>The Title</strong></span>}>
                             <Navigation>
                                 <a href="">Link</a>
@@ -71,13 +71,13 @@ class Demo extends React.Component {
                 <p>The drawer is always open in large screens. The header is always shown,
   even in small screens.</p>
                 <div style={{height: '300px', position: 'relative'}}>
-                    <Layout fixedHeader={true} fixedDrawer={true}>
+                    <Layout fixedHeader fixedDrawer>
                         <Header title="Title">
                             <Textfield
                                 value=""
                                 onChange={() => {}}
                                 label="Search"
-                                expandable={true}
+                                expandable
                                 expandableIcon="search"
                             />
                         </Header>
@@ -97,7 +97,7 @@ class Demo extends React.Component {
   locked at the top</p>
                 <div className="big-content" style={{height: '300px', position: 'relative'}}>
                     <Layout>
-                        <Header title="Title" scroll={true}>
+                        <Header title="Title" scroll>
                             <Navigation>
                                 <a href="">Link</a>
                                 <a href="">Link</a>
@@ -122,13 +122,13 @@ class Demo extends React.Component {
                 <p>Uses a header that contracts as the page scrolls down.</p>
                 <div className="big-content" style={{height: '300px', position: 'relative'}}>
                     <Layout>
-                        <Header waterfall={true}>
+                        <Header waterfall>
                             <HeaderRow title="Title">
                                 <Textfield
                                     value=""
                                     onChange={() => {}}
                                     label="Search"
-                                    expandable={true}
+                                    expandable
                                     expandableIcon="search"
                                 />
                             </HeaderRow>
@@ -157,7 +157,7 @@ class Demo extends React.Component {
 
                 <p>Simple header with scrollable tabs.</p>
                 <div style={{height: '300px', position: 'relative'}}>
-                    <Layout fixedHeader={true}>
+                    <Layout fixedHeader>
                         <Header>
                             <HeaderRow title="Title" />
                             <HeaderTabs>
@@ -195,7 +195,7 @@ class Demo extends React.Component {
 
                 <p>Simple header with fixed tabs.</p>
                 <div style={{height: '300px', position: 'relative'}}>
-                    <Layout fixedHeader={true} fixedTabs={true}>
+                    <Layout fixedHeader fixedTabs>
                         <Header>
                             <HeaderRow title="Title" />
                             <HeaderTabs>
diff --git a/demo/loading/loading.js b/demo/loading/loading.js
index fcc02e3..0f16cf4 100644
--- a/demo/loading/loading.js
+++ b/demo/loading/loading.js
@@ -11,7 +11,7 @@ class Demo extends React.Component {
                 <ProgressBar progress={44} />
 
                 <p>MDL Progress Bar with Indeterminate Progress</p>
-                <ProgressBar indeterminate={true} />
+                <ProgressBar indeterminate />
 
                 <p>MDL Progress Bar with Buffering</p>
                 <ProgressBar progress={33} buffer={87} />
@@ -20,7 +20,7 @@ class Demo extends React.Component {
                 <Spinner />
 
                 <p>MDL Spinner Component with Single Color</p>
-                <Spinner singleColor={true} />
+                <Spinner singleColor />
             </div>
         );
     }
diff --git a/demo/menu/menu.js b/demo/menu/menu.js
index 07683bf..d6fffe8 100644
--- a/demo/menu/menu.js
+++ b/demo/menu/menu.js
@@ -12,7 +12,7 @@ class Demo extends React.Component {
                 <Menu target="demo-menu-lower-left">
                     <MenuItem>Some Action</MenuItem>
                     <MenuItem>Another Action</MenuItem>
-                    <MenuItem disabled={true}>Disabled Action</MenuItem>
+                    <MenuItem disabled>Disabled Action</MenuItem>
                     <MenuItem>Yet Another Action</MenuItem>
                 </Menu>
 
@@ -21,7 +21,7 @@ class Demo extends React.Component {
                 <Menu target="demo-menu-lower-right" align="right">
                     <MenuItem>Some Action</MenuItem>
                     <MenuItem>Another Action</MenuItem>
-                    <MenuItem disabled={true}>Disabled Action</MenuItem>
+                    <MenuItem disabled>Disabled Action</MenuItem>
                     <MenuItem>Yet Another Action</MenuItem>
                 </Menu>
 
@@ -30,7 +30,7 @@ class Demo extends React.Component {
                 <Menu target="demo-menu-top-left" valign="top">
                     <MenuItem>Some Action</MenuItem>
                     <MenuItem>Another Action</MenuItem>
-                    <MenuItem disabled={true}>Disabled Action</MenuItem>
+                    <MenuItem disabled>Disabled Action</MenuItem>
                     <MenuItem>Yet Another Action</MenuItem>
                 </Menu>
 
@@ -39,7 +39,7 @@ class Demo extends React.Component {
                 <Menu target="demo-menu-top-right" valign="top" align="right">
                     <MenuItem>Some Action</MenuItem>
                     <MenuItem>Another Action</MenuItem>
-                    <MenuItem disabled={true}>Disabled Action</MenuItem>
+                    <MenuItem disabled>Disabled Action</MenuItem>
                     <MenuItem>Yet Another Action</MenuItem>
                 </Menu>
             </div>
diff --git a/demo/tabs/tabs.js b/demo/tabs/tabs.js
index e8f70ce..0ce4b18 100644
--- a/demo/tabs/tabs.js
+++ b/demo/tabs/tabs.js
@@ -65,7 +65,7 @@ class Demo extends React.Component {
         return (
             <div>
                 <p>With ripple</p>
-                <TabsDemo ripple={true} />
+                <TabsDemo ripple />
 
                 <p>Without ripple</p>
                 <TabsDemo ripple={false} />
diff --git a/demo/textfield/textfield.js b/demo/textfield/textfield.js
index fb0d20b..b5d8e8a 100644
--- a/demo/textfield/textfield.js
+++ b/demo/textfield/textfield.js
@@ -55,7 +55,7 @@ class Demo extends React.Component {
                     value={this.state.textfield3}
                     onChange={linkToState(this, 'textfield3')}
                     label="Text..."
-                    floatingLabel={true}
+                    floatingLabel
                     style={{width: '200px'}}
                 />
 
@@ -66,7 +66,7 @@ class Demo extends React.Component {
                     pattern="-?[0-9]*(\.[0-9]+)?"
                     error="Input is not a number!"
                     label="Number..."
-                    floatingLabel={true}
+                    floatingLabel
                 />
 
                 <p>Floating Multiline Textfield</p>
@@ -83,7 +83,7 @@ class Demo extends React.Component {
                     value={this.state.textfield6}
                     onChange={linkToState(this, 'textfield6')}
                     label="Expandable Input"
-                    expandable={true}
+                    expandable
                     expandableIcon="search"
                 />
 
diff --git a/demo/tooltip/tooltip.js b/demo/tooltip/tooltip.js
index 950d933..c0c973e 100644
--- a/demo/tooltip/tooltip.js
+++ b/demo/tooltip/tooltip.js
@@ -13,7 +13,7 @@ class Demo extends React.Component {
                 </Tooltip>
 
                 <p>Large Tooltip</p>
-                <Tooltip label="Print" large={true}>
+                <Tooltip label="Print" large>
                     <Icon name="print" />
                 </Tooltip>
 
diff --git a/src/Footer/DropDownSection.js b/src/Footer/DropDownSection.js
index 3b19c20..e346bd3 100644
--- a/src/Footer/DropDownSection.js
+++ b/src/Footer/DropDownSection.js
@@ -18,7 +18,7 @@ class DropDownSection extends React.Component {
 
         return (
             <div className={classes} {...otherProps}>
-                <input className={`mdl-${size}-footer__heading-checkbox`} type="checkbox" defaultChecked={true} />
+                <input className={`mdl-${size}-footer__heading-checkbox`} type="checkbox" defaultChecked />
                 <h1 className={`mdl-${size}-footer__heading`}>{title}</h1>
                 {cloneChildren(this.props.children, { size: size })}
             </div>
@@ -26,4 +26,4 @@ class DropDownSection extends React.Component {
     }
 }
 
-export default DropDownSection;
\ No newline at end of file
+export default DropDownSection;
diff --git a/test/Button.test.js b/test/Button.test.js
index 29fecdf..95565f0 100644
--- a/test/Button.test.js
+++ b/test/Button.test.js
@@ -16,7 +16,7 @@ describe('Button', function() {
     });
 
     it('disabled', function() {
-        shallowRenderer.render(<Button disabled={true}>Button</Button>);
+        shallowRenderer.render(<Button disabled>Button</Button>);
         var output = shallowRenderer.getRenderOutput();
 
         expect(output.type).toBe('button');
@@ -72,7 +72,7 @@ describe('Button', function() {
             });
 
             it('with ripple', function() {
-                shallowRenderer.render(<Button colored={true}>Button</Button>);
+                shallowRenderer.render(<Button colored>Button</Button>);
                 var output = shallowRenderer.getRenderOutput();
 
                 expect(output.props.className)
@@ -80,7 +80,7 @@ describe('Button', function() {
             });
 
             it('without ripple', function() {
-                shallowRenderer.render(<Button ripple={false} colored={true}>Button</Button>);
+                shallowRenderer.render(<Button ripple={false} colored>Button</Button>);
                 var output = shallowRenderer.getRenderOutput();
 
                 expect(output.props.className)
@@ -99,7 +99,7 @@ describe('Button', function() {
             });
 
             it('with ripple', function() {
-                shallowRenderer.render(<Button primary={true}>Button</Button>);
+                shallowRenderer.render(<Button primary>Button</Button>);
                 var output = shallowRenderer.getRenderOutput();
 
                 expect(output.props.className)
@@ -107,7 +107,7 @@ describe('Button', function() {
             });
 
             it('without ripple', function() {
-                shallowRenderer.render(<Button ripple={false} primary={true}>Button</Button>);
+                shallowRenderer.render(<Button ripple={false} primary>Button</Button>);
                 var output = shallowRenderer.getRenderOutput();
 
                 expect(output.props.className)
@@ -126,7 +126,7 @@ describe('Button', function() {
             });
 
             it('with ripple', function() {
-                shallowRenderer.render(<Button accent={true}>Button</Button>);
+                shallowRenderer.render(<Button accent>Button</Button>);
                 var output = shallowRenderer.getRenderOutput();
 
                 expect(output.props.className)
@@ -134,7 +134,7 @@ describe('Button', function() {
             });
 
             it('without ripple', function() {
-                shallowRenderer.render(<Button ripple={false} accent={true}>Button</Button>);
+                shallowRenderer.render(<Button ripple={false} accent>Button</Button>);
                 var output = shallowRenderer.getRenderOutput();
 
                 expect(output.props.className)
@@ -165,7 +165,7 @@ describe('Button', function() {
             });
 
             it('with ripple', function() {
-                shallowRenderer.render(<Button raised={true}>Button</Button>);
+                shallowRenderer.render(<Button raised>Button</Button>);
                 var output = shallowRenderer.getRenderOutput();
 
                 expect(output.props.className)
@@ -173,7 +173,7 @@ describe('Button', function() {
             });
 
             it('without ripple', function() {
-                shallowRenderer.render(<Button raised={true} ripple={false}>Button</Button>);
+                shallowRenderer.render(<Button raised ripple={false}>Button</Button>);
                 var output = shallowRenderer.getRenderOutput();
 
                 expect(output.props.className)
@@ -192,7 +192,7 @@ describe('Button', function() {
             });
 
             it('with ripple', function() {
-                shallowRenderer.render(<Button raised={true} colored={true}>Button</Button>);
+                shallowRenderer.render(<Button raised colored>Button</Button>);
                 var output = shallowRenderer.getRenderOutput();
 
                 expect(output.props.className)
@@ -200,7 +200,7 @@ describe('Button', function() {
             });
 
             it('without ripple', function() {
-                shallowRenderer.render(<Button raised={true} ripple={false} colored={true}>Button</Button>);
+                shallowRenderer.render(<Button raised ripple={false} colored>Button</Button>);
                 var output = shallowRenderer.getRenderOutput();
 
                 expect(output.props.className)
@@ -219,7 +219,7 @@ describe('Button', function() {
             });
 
             it('with ripple', function() {
-                shallowRenderer.render(<Button raised={true} primary={true}>Button</Button>);
+                shallowRenderer.render(<Button raised primary>Button</Button>);
                 var output = shallowRenderer.getRenderOutput();
 
                 expect(output.props.className)
@@ -227,7 +227,7 @@ describe('Button', function() {
             });
 
             it('without ripple', function() {
-                shallowRenderer.render(<Button raised={true} ripple={false} primary={true}>Button</Button>);
+                shallowRenderer.render(<Button raised ripple={false} primary>Button</Button>);
                 var output = shallowRenderer.getRenderOutput();
 
                 expect(output.props.className)
@@ -246,7 +246,7 @@ describe('Button', function() {
             });
 
             it('with ripple', function() {
-                shallowRenderer.render(<Button raised={true} accent={true}>Button</Button>);
+                shallowRenderer.render(<Button raised accent>Button</Button>);
                 var output = shallowRenderer.getRenderOutput();
 
                 expect(output.props.className)
@@ -254,7 +254,7 @@ describe('Button', function() {
             });
 
             it('without ripple', function() {
-                shallowRenderer.render(<Button raised={true} ripple={false} accent={true}>Button</Button>);
+                shallowRenderer.render(<Button raised ripple={false} accent>Button</Button>);
                 var output = shallowRenderer.getRenderOutput();
 
                 expect(output.props.className)