diff --git a/CONTRIBUTING.md b/NWB.md
similarity index 100%
rename from CONTRIBUTING.md
rename to NWB.md
diff --git a/demo/src/index.js b/demo/src/index.js
index dc88c24b..bd196a99 100644
--- a/demo/src/index.js
+++ b/demo/src/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM, { render } from 'react-dom';
+import ReactDOM from 'react-dom';
 import App from './App';
 // import registerServiceWorker from './registerServiceWorker';
 
diff --git a/package.json b/package.json
index ee82e479..a2f8dee9 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,8 @@
     "css/",
     "es/",
     "lib/",
-    "umd/"
+    "umd/",
+    "README.md"
   ],
   "scripts": {
     "build": "nwb build-react-component",
@@ -20,7 +21,7 @@
     "lint": "eslint src"
   },
   "dependencies": {
-    "@coreui/coreui": "^2.0.0-beta.9",
+    "@coreui/coreui": "^2.0.0-beta.10",
     "bootstrap": "^4.1.0",
     "classnames": "^2.2.5",
     "prop-types": "^15.6.1",
@@ -61,6 +62,9 @@
     "react",
     "bootstrap",
     "framework",
-    "responsive"
+    "responsive",
+    "layout",
+    "component",
+    "components"
   ]
 }
diff --git a/src/Aside.js b/src/Aside.js
index df7134fd..669ae98b 100644
--- a/src/Aside.js
+++ b/src/Aside.js
@@ -62,7 +62,13 @@ class AppAside extends Component {
   }
 
   render() {
-    const { className, children, display, fixed, hidden, offCanvas, isOpen, tag: Tag, ...attributes } = this.props;
+    const { className, children, tag: Tag, ...attributes } = this.props;
+
+    delete attributes.display
+    delete attributes.fixed
+    delete attributes.hidden
+    delete attributes.offCanvas
+    delete attributes.isOpen
 
     const classes = classNames(className, 'aside-menu');
 
diff --git a/src/AsideToggler.js b/src/AsideToggler.js
index 38125692..7a3da07c 100644
--- a/src/AsideToggler.js
+++ b/src/AsideToggler.js
@@ -45,19 +45,23 @@ class AppAsideToggler extends Component {
   }
 
   render() {
-    const { className, children, mobile, tag: Tag, display, ...attributes } = this.props;
+    const { className, children, type, tag: Tag, ...attributes } = this.props;
+
+    delete attributes.display
+    delete attributes.mobile
+    delete attributes.display
 
     const classes = classNames(className, 'navbar-toggler');
 
     return (
-      <button
-          type="button"
+      <Tag
+          type={type}
           className={classes}
           {...attributes}
           onClick={(event)=>this.asideToggle(event)}
       >
         {children || <span className="navbar-toggler-icon" />}
-      </button>
+      </Tag>
     );
   }
 }
diff --git a/src/Breadcrumb.js b/src/Breadcrumb.js
index b37e271f..cacf94e3 100644
--- a/src/Breadcrumb.js
+++ b/src/Breadcrumb.js
@@ -82,7 +82,11 @@ class AppBreadcrumb extends Component {
   }
 
   render() {
-    const { className, children, appRoutes, tag: Tag, ...attributes } = this.props;
+    const { className, tag: Tag, ...attributes } = this.props;
+
+    delete attributes.children
+    delete attributes.appRoutes
+
     const classes = classNames(className);
 
     return (
diff --git a/src/Footer.js b/src/Footer.js
index c6515cc0..b139162c 100644
--- a/src/Footer.js
+++ b/src/Footer.js
@@ -30,7 +30,9 @@ class AppFooter extends Component {
   }
 
   render() {
-    const { className, children, fixed, tag: Tag, ...attributes } = this.props;
+    const { className, children, tag: Tag, ...attributes } = this.props;
+
+    delete attributes.fixed
 
     const classes = classNames(className, 'app-footer');
 
diff --git a/src/Header.js b/src/Header.js
index 939e8b13..e7ee43af 100644
--- a/src/Header.js
+++ b/src/Header.js
@@ -28,7 +28,9 @@ class AppHeader extends Component {
   // }
 
   render() {
-    const { className, children, fixed, tag: Tag, ...attributes } = this.props;
+    const { className, children, tag: Tag, ...attributes } = this.props;
+
+    delete attributes.fixed
 
     const classes = classNames(className, 'app-header', 'navbar');
 
diff --git a/src/Shared/layout/layout.js b/src/Shared/layout/layout.js
index ec33f475..01d5f7ad 100644
--- a/src/Shared/layout/layout.js
+++ b/src/Shared/layout/layout.js
@@ -1,4 +1,4 @@
-import { ToggleClasses } from '../toggle-classes';
+// import { toggleClasses } from '../toggle-classes';
 
 class Layout {
   static sidebarToggle() {
diff --git a/src/Sidebar.js b/src/Sidebar.js
index 155078b7..6896522f 100644
--- a/src/Sidebar.js
+++ b/src/Sidebar.js
@@ -71,7 +71,15 @@ class AppSidebar extends Component {
   }
 
   render() {
-    const { className, children, compact, display, fixed, minimized, offCanvas, isOpen, tag: Tag, staticContext, ...attributes } = this.props;
+    const { className, children, tag: Tag, ...attributes } = this.props;
+
+    delete attributes.compact
+    delete attributes.display
+    delete attributes.fixed
+    delete attributes.minimized
+    delete attributes.offCanvas
+    delete attributes.isOpen
+    delete attributes.staticContext
 
     const classes = classNames(className, 'sidebar');
 
diff --git a/src/SidebarMinimizer.js b/src/SidebarMinimizer.js
index 96f817fc..c3670090 100644
--- a/src/SidebarMinimizer.js
+++ b/src/SidebarMinimizer.js
@@ -20,9 +20,7 @@ class AppSidebarMinimizer extends Component {
 
     this.handleClick = this.handleClick.bind(this);
   }
-  sidebarMinimize(e) {
-    // e.preventDefault();
-
+  sidebarMinimize() {
     document.body.classList.toggle('sidebar-minimized');
     const sidebar = document.querySelector('.sidebar-nav')
     if (sidebar) {
@@ -31,9 +29,7 @@ class AppSidebarMinimizer extends Component {
     }
   }
 
-  brandMinimize(e) {
-    // e.preventDefault();
-
+  brandMinimize() {
     document.body.classList.toggle('brand-minimized');
   }
 
diff --git a/src/SidebarNav.js b/src/SidebarNav.js
index 34d801ae..0e5aea1b 100644
--- a/src/SidebarNav.js
+++ b/src/SidebarNav.js
@@ -165,7 +165,11 @@ class AppSidebarNav extends Component {
   }
 
   render() {
-    const { className, children, isOpen, tag: Tag, navConfig, staticContext, ...attributes } = this.props;
+    const { className, children, navConfig, ...attributes } = this.props;
+
+    delete attributes.isOpen
+    delete attributes.staticContext
+    delete attributes.Tag
 
     const navClasses = classNames(className, 'sidebar-nav');
 
diff --git a/src/SidebarToggler.js b/src/SidebarToggler.js
index b6847a79..3d8f74b7 100644
--- a/src/SidebarToggler.js
+++ b/src/SidebarToggler.js
@@ -43,7 +43,10 @@ class AppSidebarToggler extends Component {
   }
 
   render() {
-    const { className, children, mobile, tag: Tag, display, ...attributes } = this.props;
+    const { className, children, tag: Tag, ...attributes } = this.props;
+
+    delete attributes.mobile
+    delete attributes.display
 
     const classes = classNames(className, 'navbar-toggler');
 
diff --git a/src/Switch.js b/src/Switch.js
index 1eaac851..7df81d54 100644
--- a/src/Switch.js
+++ b/src/Switch.js
@@ -5,20 +5,23 @@ import classNames from 'classnames';
 const propTypes = {
   color: PropTypes.string,
   label: PropTypes.bool,
-  outline: PropTypes.bool,
-  outlineAlt: PropTypes.bool,
-  pill: PropTypes.bool,
-  size: PropTypes.string,
+  outline: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.string,
+    PropTypes.oneOf(['', 'alt'])
+  ]),
+  size: PropTypes.oneOf(['', 'lg', 'sm']),
   checked: PropTypes.bool,
   defaultChecked: PropTypes.bool,
   defaultValue: PropTypes.any,
+  value: PropTypes.string,
   disabled: PropTypes.bool,
   form: PropTypes.any,
-  indeterminate: PropTypes.any,
   name: PropTypes.string,
   required: PropTypes.bool,
-  type: PropTypes.string,
-  value: PropTypes.string,
+  onChange: PropTypes.func,
+  type: PropTypes.oneOf(['checkbox', 'radio']),
+  variant: PropTypes.oneOf(['', '3d', 'pill']),
   className: PropTypes.string,
   dataOn: PropTypes.string,
   dataOff: PropTypes.string,
@@ -28,14 +31,13 @@ const defaultProps = {
   color: 'secondary',
   label: false,
   outline: false,
-  outlineAlt: false,
-  pill: false,
   size: '',
   checked: false,
   defaultChecked: false,
   disabled: false,
   required: false,
   type: 'checkbox',
+  variant: '',
   dataOn: 'On',
   dataOff: 'Off',
 };
@@ -43,33 +45,38 @@ const defaultProps = {
 class AppSwitch extends Component {
   constructor(props) {
     super(props);
-    this.toggle = this.toggle.bind(this);
+    this.onChange = this.onChange.bind(this);
     this.state = {
       checked: this.props.defaultChecked || this.props.checked,
+      selected: []
     };
   }
 
-  toggle(event) {
+  onChange(event) {
     const target = event.target;
     this.setState({
       checked: target.checked,
-    });
+    })
+
+    if (this.props.onChange) {
+      this.props.onChange(event);
+    }
   }
 
   render() {
-    const { className, checked, disabled, color, defaultChecked, name, label, outline, outlineAlt, pill, size, required, type, value, dataOn, dataOff, ...attributes } = this.props;
-
-    const outlined = outline || outlineAlt;
+    const { className, disabled, color, name, label, outline, size, required, type, value, dataOn, dataOff, variant, ...attributes } = this.props;
 
-    const variant = `switch${outlined ? '-outline' : ''}-${color}${outlineAlt ? '-alt' : ''}`;
+    delete attributes.checked
+    delete attributes.defaultChecked
+    delete attributes.onChange
 
     const classes = classNames(
       className,
       'switch',
       label ? 'switch-label' : false,
-      pill ? 'switch-pill' : false,
       size ? `switch-${size}` : false,
-      variant,
+      variant ? `switch-${variant}` : false,
+      `switch${outline ? '-outline' : ''}-${color}${outline==='alt' ? '-alt' : ''}`,
       'form-check-label',
     );
 
@@ -84,7 +91,7 @@ class AppSwitch extends Component {
 
     return (
       <label className={classes}>
-        <input type={type} className={inputClasses} onChange={this.toggle} checked={this.state.checked} name={name} required={required} disabled={disabled} value={value} />
+        <input type={type} className={inputClasses} onChange={this.onChange} checked={this.state.checked} name={name} required={required} disabled={disabled} value={value} {...attributes} />
         <span className={sliderClasses} data-checked={dataOn} data-unchecked={dataOff}></span>
       </label>
     );
diff --git a/tests/Aside.test.js b/tests/Aside.test.js
index 17ae37ef..15e32696 100644
--- a/tests/Aside.test.js
+++ b/tests/Aside.test.js
@@ -2,7 +2,7 @@ import expect from 'expect'
 import React from 'react'
 import {renderToStaticMarkup as render} from 'react-dom/server'
 
-import { configure, mount } from 'enzyme'
+import { configure, mount, shallow } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 import { spy } from 'sinon'
 
@@ -12,7 +12,7 @@ configure({ adapter: new Adapter() });
 
 describe('AppAside', () => {
   it('renders aside with class="aside-menu"', () => {
-    expect(render(<AppAside fixed hidden display="lg">aside</AppAside>))
+    expect(render(<AppAside fixed hidden offCanvas display="lg">aside</AppAside>))
     .toContain('<aside class="aside-menu">aside</aside>')
   });
   it('calls componentDidMount', () => {
@@ -21,4 +21,14 @@ describe('AppAside', () => {
     const wrapper = mount(<AppAside fixed hidden display="lg" />);
     expect(AppAside.prototype.componentDidMount.calledOnce).toEqual(true);
   });
-})
\ No newline at end of file
+  it('should call isHidden()', () => {
+    const isHidden = spy(AppAside.prototype, 'isHidden');
+    shallow(<AppAside />);
+    expect(isHidden.called).toBe(true);
+  });
+  it('should call isOffCanvas()', () => {
+    const isOffCanvas = spy(AppAside.prototype, 'isOffCanvas');
+    shallow(<AppAside offCanvas={false}/>);
+    expect(isOffCanvas.called).toBe(true);
+  });
+})
diff --git a/tests/Footer.test.js b/tests/Footer.test.js
index e874ec4a..62d8c1ee 100644
--- a/tests/Footer.test.js
+++ b/tests/Footer.test.js
@@ -2,7 +2,7 @@ import expect from 'expect'
 import React from 'react'
 import {renderToStaticMarkup as render} from 'react-dom/server'
 
-import { configure, mount } from 'enzyme'
+import { configure, mount, shallow } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 import { spy } from 'sinon'
 
@@ -21,4 +21,10 @@ describe('AppFooter', () => {
     const wrapper = mount(<AppFooter fixed display="lg" />);
     expect(AppFooter.prototype.componentDidMount.calledOnce).toEqual(true);
   });
-})
\ No newline at end of file
+  it('should call isFixed()', () => {
+    const isFixed = spy(AppFooter.prototype, 'isFixed');
+    shallow(<AppFooter />);
+    expect(isFixed.called).toBe(true);
+  });
+
+})
diff --git a/tests/Header.test.js b/tests/Header.test.js
index 12d0a863..63e5a041 100644
--- a/tests/Header.test.js
+++ b/tests/Header.test.js
@@ -2,11 +2,12 @@ import expect from 'expect'
 import React from 'react'
 import {renderToStaticMarkup as render} from 'react-dom/server'
 
-import { configure, mount } from 'enzyme'
+import { configure, mount, shallow } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 import { spy } from 'sinon'
 
 import AppHeader from 'src/Header'
+import AppFooter from '../src/Footer';
 
 configure({ adapter: new Adapter() });
 
@@ -21,4 +22,9 @@ describe('AppHeader', () => {
     const wrapper = mount(<AppHeader fixed/>);
     expect(AppHeader.prototype.componentDidMount.calledOnce).toEqual(true);
   });
-})
\ No newline at end of file
+  it('should call isFixed()', () => {
+    const isFixed = spy(AppHeader.prototype, 'isFixed');
+    shallow(<AppHeader />);
+    expect(isFixed.called).toBe(true);
+  });
+})
diff --git a/tests/NavbarBrand.test.js b/tests/NavbarBrand.test.js
index d10d8739..738f1021 100644
--- a/tests/NavbarBrand.test.js
+++ b/tests/NavbarBrand.test.js
@@ -15,4 +15,13 @@ describe('AppNavbarBrand', () => {
       minimized={{ src: sygnet, width: 30, height: 30, alt: 'CoreUI Minimized' }}
     />)).toContain('class="navbar-brand"');
   });
+  it('renders anchor with class="navbar-brand"', () => {
+    expect(render(<AppNavbarBrand
+      brand={{ }}
+    />)).toContain('class="navbar-brand"');
+  });
+  it('renders anchor with class="navbar-brand"', () => {
+    expect(render(<AppNavbarBrand />)).toContain('class="navbar-brand"');
+  });
+
 });
diff --git a/tests/Sidebar.test.js b/tests/Sidebar.test.js
index 4f635ad7..082d1b01 100644
--- a/tests/Sidebar.test.js
+++ b/tests/Sidebar.test.js
@@ -2,7 +2,7 @@ import expect from 'expect'
 import React from 'react'
 import {renderToStaticMarkup as render} from 'react-dom/server'
 
-import { configure, mount } from 'enzyme'
+import { configure, mount, shallow } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 import { spy } from 'sinon'
 
@@ -21,4 +21,9 @@ describe('AppSidebar', () => {
     const wrapper = mount(<AppSidebar fixed display="lg" compact minimized offCanvas />);
     expect(AppSidebar.prototype.componentDidMount.calledOnce).toBe(true);
   });
+  it('should call isFixed()', () => {
+    const isFixed = spy(AppSidebar.prototype, 'isFixed');
+    shallow(<AppSidebar />);
+    expect(isFixed.called).toBe(true);
+  });
 })
diff --git a/tests/SidebarFooter.test.js b/tests/SidebarFooter.test.js
index c9ec3393..95805f6c 100644
--- a/tests/SidebarFooter.test.js
+++ b/tests/SidebarFooter.test.js
@@ -9,4 +9,8 @@ describe('SidebarFooter', () => {
     expect(render(<SidebarFooter>test</SidebarFooter>))
     .toContain('<div class="sidebar-footer">test</div>')
   })
-})
\ No newline at end of file
+  it('renders no div with class="sidebar-footer"', () => {
+    expect(render(<SidebarFooter></SidebarFooter>))
+    .toNotContain('<div class="sidebar-footer"></div>')
+  })
+})
diff --git a/tests/SidebarForm.test.js b/tests/SidebarForm.test.js
index 3d58d803..08f88115 100644
--- a/tests/SidebarForm.test.js
+++ b/tests/SidebarForm.test.js
@@ -9,4 +9,8 @@ describe('AppSidebarForm', () => {
     expect(render(<AppSidebarForm>test</AppSidebarForm>))
     .toContain('<div class="sidebar-form">test</div>')
   })
-})
\ No newline at end of file
+  it('renders no div with class="sidebar-form"', () => {
+    expect(render(<AppSidebarForm></AppSidebarForm>))
+    .toNotContain('<div class="sidebar-form"></div>')
+  })
+})
diff --git a/tests/SidebarHeader.test.js b/tests/SidebarHeader.test.js
index fdb8c59c..42843b60 100644
--- a/tests/SidebarHeader.test.js
+++ b/tests/SidebarHeader.test.js
@@ -9,4 +9,8 @@ describe('AppSidebarHeader', () => {
     expect(render(<AppSidebarHeader>test</AppSidebarHeader>))
     .toContain('<div class="sidebar-header">test</div>')
   })
-})
\ No newline at end of file
+  it('renders no div with class="sidebar-header"', () => {
+    expect(render(<AppSidebarHeader></AppSidebarHeader>))
+    .toNotContain('<div class="sidebar-header"></div>')
+  })
+})
diff --git a/tests/Switch.test.js b/tests/Switch.test.js
index 54025719..48dea343 100644
--- a/tests/Switch.test.js
+++ b/tests/Switch.test.js
@@ -2,9 +2,9 @@ import expect from 'expect'
 import React from 'react'
 import {renderToStaticMarkup as render} from 'react-dom/server'
 
-import { configure, mount } from 'enzyme'
+import { configure, mount, shallow } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
-import { spy } from 'sinon'
+import { spy, mock } from 'sinon'
 
 import AppSwitch from 'src/Switch'
 
@@ -15,14 +15,60 @@ describe('AppSwitch', () => {
     expect(render(<AppSwitch />))
     .toContain('<label class="switch')
   });
-  it('should call toggle', () => {
-    const onChange = spy(AppSwitch.prototype, 'toggle');
-    const event = {target: { checked: true }};
-    const wrapper = mount(<AppSwitch outlineAlt label pill size="lg" />);
-    expect(wrapper.find('input').props().checked).toBe(false);
-    wrapper.find('input').simulate('change', event)
-    expect(onChange.called).toBe(true);
-    expect(wrapper.find('input').props().checked).toBe(true);
+  it('should render with switch class', () => {
+    const wrapper = shallow(<AppSwitch />);
+    expect(wrapper.hasClass('switch')).toBe(true);
+  });
+  it('should render with outline class', () => {
+    const wrapper = shallow(<AppSwitch outline />);
+    expect(wrapper.hasClass('switch-outline-secondary')).toBe(true);
+  });
+  it('should render with outline alt class', () => {
+    const wrapper = shallow(<AppSwitch outline={'alt'} />);
+    expect(wrapper.hasClass('switch-outline-secondary-alt')).toBe(true);
+  });
+  it('should render with outline alt class', () => {
+    const wrapper = shallow(<AppSwitch outline color="primary-alt" />);
+    expect(wrapper.hasClass('switch-outline-primary-alt')).toBe(true);
+  });
+  it('should render with info class', () => {
+    const wrapper = shallow(<AppSwitch color="info" />);
+    expect(wrapper.hasClass('switch-info')).toBe(true);
+  });
+  it('should render with pill class', () => {
+    const wrapper = shallow(<AppSwitch variant="pill" />);
+    expect(wrapper.hasClass('switch-pill')).toBe(true);
+  });
+  it('should render with 3d class', () => {
+    const wrapper = shallow(<AppSwitch variant="3d" />);
+    expect(wrapper.hasClass('switch-3d')).toBe(true);
+  });
+  it('should render with lg class', () => {
+    const wrapper = shallow(<AppSwitch size="lg" />);
+    expect(wrapper.hasClass('switch-lg')).toBe(true);
+  });
+  it('should render with label class', () => {
+    const wrapper = shallow(<AppSwitch label />);
+    expect(wrapper.hasClass('switch-label')).toBe(true);
+  });
+
+  describe('onChange', () => {
+      it('calls props.onChange if it exists', () => {
+        const onChangeMock = mock()
+        const wrapper = mount(<AppSwitch onChange={onChangeMock} />);
+        wrapper.find('input').hostNodes().simulate('change');
+        expect(onChangeMock.called).toBe(true);
+      });
 
-  })
+      it('should call onChange()', () => {
+        const onChange = spy(AppSwitch.prototype, 'onChange');
+        const event = { target: { checked: true } };
+        const wrapper = shallow(<AppSwitch label size="lg" />);
+        expect(wrapper.find('input').props().checked).toBe(false);
+        wrapper.find('input').simulate('change', event)
+        expect(onChange.called).toBe(true);
+        expect(wrapper.find('input').props().checked).toBe(true);
+      })
+    }
+  )
 })