diff --git a/src/ActionBar/ActionBar.js b/src/ActionBar/ActionBar.js
index 99544201a..d3148f86b 100644
--- a/src/ActionBar/ActionBar.js
+++ b/src/ActionBar/ActionBar.js
@@ -11,7 +11,7 @@ export const ActionBar = ({ mobile, width, children, className, ...props }) => {
     return (
         <React.Fragment>
             {mobile ? (
-                <div style={{ width: width ? width : '319px' }}>
+                <div style={{width}}>
                     <div {...props} className={actionBarClasses}>{children}</div>
                 </div>
             ) : (
@@ -27,6 +27,10 @@ ActionBar.propTypes = {
     width: PropTypes.string
 };
 
+ActionBar.defaultProps = {
+    width: '319px'
+};
+
 ActionBar.propDescriptions = {
     mobile: 'Set to **true** for mobile view of the Action Bar.',
     width: 'The width of the Action Bar in mobile view.'
@@ -65,18 +69,20 @@ export const ActionBarHeader = ({ className, description, descriptionProps, titl
             <h1
                 {...titleProps}
                 className='fd-action-bar__title'>{title}</h1>
-            <p
-                {...descriptionProps}
-                className='fd-action-bar__description'>{description} </p>
+            {description &&
+                <p
+                    {...descriptionProps}
+                    className='fd-action-bar__description'>{description}</p>
+            }
         </div>
     );
 };
 
 ActionBarHeader.propTypes = {
+    title: PropTypes.string.isRequired,
     className: PropTypes.string,
     description: PropTypes.string,
     descriptionProps: PropTypes.object,
-    title: PropTypes.string,
     titleProps: PropTypes.object
 };
 
diff --git a/src/ActionBar/ActionBar.test.js b/src/ActionBar/ActionBar.test.js
index 14eccbdd4..60f2060b2 100644
--- a/src/ActionBar/ActionBar.test.js
+++ b/src/ActionBar/ActionBar.test.js
@@ -114,7 +114,12 @@ describe('<ActionBar />', () => {
         });
 
         test('should allow props to be spread to the ActionBarHeader component', () => {
-            const element = mount(<ActionBarHeader data-sample='Sample' />);
+            const element = mount(
+                <ActionBarHeader
+                    data-sample='Sample'
+                    description=''
+                    title='' />
+            );
 
             expect(
                 element.getDOMNode().attributes['data-sample'].value
@@ -122,7 +127,12 @@ describe('<ActionBar />', () => {
         });
 
         test('should allow props to be spread to the ActionBarHeader component\'s h1 element', () => {
-            const element = mount(<ActionBarHeader titleProps={{'data-sample': 'Sample'}} />);
+            const element = mount(
+                <ActionBarHeader
+                    description=''
+                    title=''
+                    titleProps={{'data-sample': 'Sample'}} />
+            );
 
             expect(
                 element.find('h1').getDOMNode().attributes['data-sample'].value
@@ -130,7 +140,12 @@ describe('<ActionBar />', () => {
         });
 
         test('should allow props to be spread to the ActionBarHeader component\'s p element', () => {
-            const element = mount(<ActionBarHeader descriptionProps={{'data-sample': 'Sample'}} />);
+            const element = mount(
+                <ActionBarHeader
+                    description='Sample Description'
+                    descriptionProps={{'data-sample': 'Sample'}}
+                    title='' />
+            );
 
             expect(
                 element.find('p').getDOMNode().attributes['data-sample'].value
diff --git a/src/ActionBar/__snapshots__/ActionBar.test.js.snap b/src/ActionBar/__snapshots__/ActionBar.test.js.snap
index b562e2439..33da7a377 100644
--- a/src/ActionBar/__snapshots__/ActionBar.test.js.snap
+++ b/src/ActionBar/__snapshots__/ActionBar.test.js.snap
@@ -23,7 +23,6 @@ exports[`<ActionBar /> create basic Action Bar 1`] = `
       className="fd-action-bar__description"
     >
       Action Bar Description
-       
     </p>
   </div>
   <div
@@ -59,7 +58,6 @@ exports[`<ActionBar /> create basic Action Bar 2`] = `
       className="fd-action-bar__description"
     >
       Action Bar Description
-       
     </p>
   </div>
   <div
@@ -102,7 +100,6 @@ exports[`<ActionBar /> create basic mobile Action Bar 1`] = `
         className="fd-action-bar__description"
       >
         Action Bar Description
-         
       </p>
     </div>
     <div
@@ -146,7 +143,6 @@ exports[`<ActionBar /> create basic mobile Action Bar 2`] = `
         className="fd-action-bar__description"
       >
         Action Bar Description
-         
       </p>
     </div>
     <div
diff --git a/src/Alert/Alert.Component.js b/src/Alert/Alert.Component.js
index c35cae4a5..164a7ea87 100644
--- a/src/Alert/Alert.Component.js
+++ b/src/Alert/Alert.Component.js
@@ -135,7 +135,7 @@ export const AlertComponent = () => {
                     }
                 ]}>
                 <Alert dismissible={false} link='#'
-                    linkText='link' type=''>
+                    linkText='link'>
                     Default alert with a{' '}
                 </Alert>
             </Playground>
diff --git a/src/Badge/Badge.js b/src/Badge/Badge.js
index a6438baae..896c061cf 100644
--- a/src/Badge/Badge.js
+++ b/src/Badge/Badge.js
@@ -1,7 +1,7 @@
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-import {BADGE_TYPES, LABEL_TYPES, STATUS_TYPES} from '../utils/constants';
+import {BADGE_MODIFIERS, BADGE_TYPES, LABEL_TYPES, STATUS_TYPES} from '../utils/constants';
 
 
 export const Badge = ({ type, modifier, children, className, ...props }) => {
@@ -23,7 +23,7 @@ export const Badge = ({ type, modifier, children, className, ...props }) => {
 
 Badge.propTypes = {
     className: PropTypes.string,
-    modifier: PropTypes.oneOf(['', 'pill', 'filled']),
+    modifier: PropTypes.oneOf(BADGE_MODIFIERS),
     type: PropTypes.oneOf(BADGE_TYPES)
 };
 
diff --git a/src/Button/Button.js b/src/Button/Button.js
index 85d2c4aaa..0be512c0d 100644
--- a/src/Button/Button.js
+++ b/src/Button/Button.js
@@ -34,13 +34,15 @@ export const Button = ({
     );
 
     return (<button {...props} className={buttonClasses}
-        disabled={disabled ? disabled : false} onClick={onClick}
-        selected={selected ? selected : false} type={typeAttr}>
+        disabled={disabled} onClick={onClick}
+        selected={selected} type={typeAttr}>
         {children}
     </button>);
 };
 
 Button.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
     compact: PropTypes.bool,
     disabled: PropTypes.bool,
     dropdown: PropTypes.bool,
diff --git a/src/Button/__snapshots__/Button.test.js.snap b/src/Button/__snapshots__/Button.test.js.snap
index 835318a11..7c87481e6 100644
--- a/src/Button/__snapshots__/Button.test.js.snap
+++ b/src/Button/__snapshots__/Button.test.js.snap
@@ -8,18 +8,13 @@ exports[`<Button /> create button group 1`] = `
 >
   <button
     className="fd-button sap-icon--survey blue"
-    disabled={false}
-    selected={false}
   />
   <button
     className="fd-button sap-icon--pie-chart is-selected"
-    disabled={false}
     selected={true}
   />
   <button
     className="fd-button sap-icon--pool"
-    disabled={false}
-    selected={false}
   />
 </div>
 `;
@@ -27,8 +22,6 @@ exports[`<Button /> create button group 1`] = `
 exports[`<Button /> create buttons 1`] = `
 <button
   className="fd-button"
-  disabled={false}
-  selected={false}
 >
   Regular Button
 </button>
@@ -37,8 +30,6 @@ exports[`<Button /> create buttons 1`] = `
 exports[`<Button /> create buttons 2`] = `
 <button
   className="fd-button--emphasized"
-  disabled={false}
-  selected={false}
 >
   Emphasized Button
 </button>
@@ -47,8 +38,6 @@ exports[`<Button /> create buttons 2`] = `
 exports[`<Button /> create buttons 3`] = `
 <button
   className="fd-button fd-button--positive"
-  disabled={false}
-  selected={false}
 >
   Positive Button
 </button>
@@ -57,8 +46,6 @@ exports[`<Button /> create buttons 3`] = `
 exports[`<Button /> create buttons 4`] = `
 <button
   className="fd-button sap-icon--cart"
-  disabled={false}
-  selected={false}
 >
   Icon Button
 </button>
@@ -67,8 +54,6 @@ exports[`<Button /> create buttons 4`] = `
 exports[`<Button /> create buttons 5`] = `
 <button
   className="fd-button fd-button--compact"
-  disabled={false}
-  selected={false}
 >
   Compact
 </button>
@@ -77,7 +62,6 @@ exports[`<Button /> create buttons 5`] = `
 exports[`<Button /> create buttons 6`] = `
 <button
   className="fd-button--emphasized is-selected"
-  disabled={false}
   selected={true}
 >
   Selected State
@@ -88,7 +72,6 @@ exports[`<Button /> create buttons 7`] = `
 <button
   className="fd-button--emphasized is-disabled"
   disabled={true}
-  selected={false}
 >
   Disabled State
 </button>
@@ -97,8 +80,6 @@ exports[`<Button /> create buttons 7`] = `
 exports[`<Button /> create buttons 8`] = `
 <button
   className="fd-button fd-dropdown__control"
-  disabled={false}
-  selected={false}
 >
   Dropdown Button
 </button>
@@ -107,8 +88,6 @@ exports[`<Button /> create buttons 8`] = `
 exports[`<Button /> create buttons 9`] = `
 <button
   className="fd-button fd-global-nav__btn"
-  disabled={false}
-  selected={false}
 >
   Navbar button
 </button>
diff --git a/src/Calendar/Calendar.js b/src/Calendar/Calendar.js
index 06c011190..ce7ef25de 100644
--- a/src/Calendar/Calendar.js
+++ b/src/Calendar/Calendar.js
@@ -373,13 +373,7 @@ export class Calendar extends Component {
     }
 
     returnDateSelected = (dates) => {
-        if (typeof this.props.onChange !== 'undefined') {
-            if (this.props.enableRangeSelection === true) {
-                this.props.onChange(dates);
-            } else {
-                this.props.onChange(dates);
-            }
-        }
+        this.props.onChange(dates);
     }
 
     generateNavigation = () => {
@@ -559,7 +553,12 @@ Calendar.propTypes = {
     tableBodyProps: PropTypes.object,
     tableHeaderProps: PropTypes.object,
     tableProps: PropTypes.object,
-    yearListProps: PropTypes.object
+    yearListProps: PropTypes.object,
+    onChange: PropTypes.func
+};
+
+Calendar.defaultProps = {
+    onChange: () => {}
 };
 
 Calendar.propDescriptions = {
diff --git a/src/ComboboxInput/ComboboxInput.js b/src/ComboboxInput/ComboboxInput.js
index 1ccb5c43f..3e716852d 100644
--- a/src/ComboboxInput/ComboboxInput.js
+++ b/src/ComboboxInput/ComboboxInput.js
@@ -60,11 +60,6 @@ ComboboxInput.propTypes = {
     popoverProps: PropTypes.object
 };
 
-ComboboxInput.defaultTypes = {
-    compact: false,
-    placeholder: ''
-};
-
 ComboboxInput.propDescriptions = {
     menu: 'An object containing a `Menu` component.'
 };
diff --git a/src/DatePicker/DatePicker.js b/src/DatePicker/DatePicker.js
index cb306c8db..7025a93ed 100644
--- a/src/DatePicker/DatePicker.js
+++ b/src/DatePicker/DatePicker.js
@@ -439,7 +439,6 @@ export class DatePicker extends Component {
 
 DatePicker.propTypes = {
     ...Calendar.basePropTypes,
-
     buttonProps: PropTypes.object,
     compact: PropTypes.bool,
     enableRangeSelection: PropTypes.bool,
diff --git a/src/Dropdown/__snapshots__/Dropdown.test.js.snap b/src/Dropdown/__snapshots__/Dropdown.test.js.snap
index ecbaa7ce8..796c4c50e 100644
--- a/src/Dropdown/__snapshots__/Dropdown.test.js.snap
+++ b/src/Dropdown/__snapshots__/Dropdown.test.js.snap
@@ -14,8 +14,6 @@ exports[`<Dropdown /> create dropdown component 1`] = `
     >
       <button
         className="fd-button fd-dropdown__control"
-        disabled={false}
-        selected={false}
       >
         Select
       </button>
@@ -83,8 +81,6 @@ exports[`<Dropdown /> create dropdown component 2`] = `
     >
       <button
         className="fd-button fd-dropdown__control fd-button--compact"
-        disabled={false}
-        selected={false}
       >
         Select
       </button>
@@ -152,8 +148,6 @@ exports[`<Dropdown /> create dropdown component 3`] = `
     >
       <button
         className="fd-button fd-button--standard fd-dropdown__control"
-        disabled={false}
-        selected={false}
       >
         Select
       </button>
@@ -222,8 +216,6 @@ exports[`<Dropdown /> create dropdown component 4`] = `
     >
       <button
         className="fd-button fd-dropdown__control sap-icon--filter"
-        disabled={false}
-        selected={false}
       >
         Select
       </button>
@@ -295,7 +287,6 @@ exports[`<Dropdown /> create dropdown component 5`] = `
       <button
         className="fd-button fd-dropdown__control sap-icon--filter is-disabled"
         disabled={true}
-        selected={false}
       >
         Select
       </button>
diff --git a/src/Forms/Forms.js b/src/Forms/Forms.js
index 1df05f01a..8b7fa7304 100644
--- a/src/Forms/Forms.js
+++ b/src/Forms/Forms.js
@@ -1,4 +1,5 @@
 import classnames from 'classnames';
+import { FORM_MESSAGE_TYPES } from '../utils/constants';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
@@ -98,7 +99,7 @@ export const FormMessage = ({ type, children, className, ...props }) => {
 FormMessage.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
-    type: PropTypes.oneOf(['', 'error', 'warning', 'help'])
+    type: PropTypes.oneOf(FORM_MESSAGE_TYPES)
 };
 
 // ------------------------------------------------- Form Input ----------------------------------------------
@@ -197,7 +198,7 @@ export const FormSelect = ({ disabled, children, className, ...props }) => {
         <select
             {...props}
             className={formSelectClasses}
-            disabled={disabled ? true : ''}>
+            disabled={disabled}>
             {children}
         </select>
     );
@@ -237,7 +238,7 @@ export class FormRadio extends Component {
                         <input
                             checked={this.state.selectedItem === inputItem.id}
                             className='fd-form__control'
-                            disabled={disabled ? true : ''}
+                            disabled={disabled}
                             id={inputItem.id}
                             name={inputItem.name}
                             onChange={this.handleChange}
@@ -253,7 +254,7 @@ export class FormRadio extends Component {
                     <input
                         checked={this.state.selectedItem === inputItem.id}
                         className='fd-form__control'
-                        disabled={disabled ? true : ''}
+                        disabled={disabled}
                         id={inputItem.id}
                         name={inputItem.name}
                         onChange={this.handleChange}
@@ -269,9 +270,9 @@ export class FormRadio extends Component {
     }
 }
 FormRadio.propTypes = {
+    inputs: PropTypes.array.isRequired,
     defaultChecked: PropTypes.string,
     disabled: PropTypes.bool,
-    inputs: PropTypes.array,
     isInline: PropTypes.bool
 };
 
diff --git a/src/Forms/__snapshots__/Forms.test.js.snap b/src/Forms/__snapshots__/Forms.test.js.snap
index 11df68e81..f4679f540 100644
--- a/src/Forms/__snapshots__/Forms.test.js.snap
+++ b/src/Forms/__snapshots__/Forms.test.js.snap
@@ -62,7 +62,6 @@ exports[`<Forms /> create form item 1`] = `
     </span>
     <select
       className="fd-form__control"
-      disabled=""
       id="select-1"
     >
       <option
@@ -136,7 +135,6 @@ exports[`<Forms /> create form item 3`] = `
       <input
         checked={false}
         className="fd-form__control"
-        disabled=""
         id="radio-1"
         name="radio-1"
         onChange={[Function]}
@@ -156,7 +154,6 @@ exports[`<Forms /> create form item 3`] = `
       <input
         checked={true}
         className="fd-form__control"
-        disabled=""
         id="radio-2"
         name="radio-2"
         onChange={[Function]}
@@ -176,7 +173,6 @@ exports[`<Forms /> create form item 3`] = `
       <input
         checked={false}
         className="fd-form__control"
-        disabled=""
         id="radio-3"
         name="radio-3"
         onChange={[Function]}
@@ -210,7 +206,6 @@ exports[`<Forms /> create form item 4`] = `
       <input
         checked={false}
         className="fd-form__control"
-        disabled=""
         id="radio-1"
         name="radio-1"
         onChange={[Function]}
@@ -230,7 +225,6 @@ exports[`<Forms /> create form item 4`] = `
       <input
         checked={true}
         className="fd-form__control"
-        disabled=""
         id="radio-2"
         name="radio-2"
         onChange={[Function]}
@@ -250,7 +244,6 @@ exports[`<Forms /> create form item 4`] = `
       <input
         checked={false}
         className="fd-form__control"
-        disabled=""
         id="radio-3"
         name="radio-3"
         onChange={[Function]}
@@ -346,7 +339,6 @@ exports[`<Forms /> create form item 4`] = `
         <input
           checked={false}
           className="fd-form__control"
-          disabled=""
           id="radio-7"
           name="radio-7"
           onChange={[Function]}
@@ -366,7 +358,6 @@ exports[`<Forms /> create form item 4`] = `
         <input
           checked={false}
           className="fd-form__control"
-          disabled=""
           id="radio-8"
           name="radio-8"
           onChange={[Function]}
@@ -386,7 +377,6 @@ exports[`<Forms /> create form item 4`] = `
         <input
           checked={true}
           className="fd-form__control"
-          disabled=""
           id="radio-9"
           name="radio-9"
           onChange={[Function]}
diff --git a/src/Icon/Icon.js b/src/Icon/Icon.js
index a3858f7f1..77def5b59 100644
--- a/src/Icon/Icon.js
+++ b/src/Icon/Icon.js
@@ -20,10 +20,6 @@ export const Icon = ({ glyph, size, clickHandler, className, ...props }) => {
     );
 };
 
-Icon.defaultProps = {
-    clickHandler: () => {}
-};
-
 Icon.propTypes = {
     glyph: PropTypes.string.isRequired,
     className: PropTypes.string,
diff --git a/src/Icon/__snapshots__/Icon.test.js.snap b/src/Icon/__snapshots__/Icon.test.js.snap
index b129d1974..7feee51d7 100644
--- a/src/Icon/__snapshots__/Icon.test.js.snap
+++ b/src/Icon/__snapshots__/Icon.test.js.snap
@@ -10,6 +10,5 @@ exports[`<Icon /> create icon 1`] = `
 exports[`<Icon /> create icon 2`] = `
 <span
   className="sap-icon--cart sap-icon--s"
-  onClick={[Function]}
 />
 `;
diff --git a/src/InputGroup/InputGroup.js b/src/InputGroup/InputGroup.js
index ff57ca542..c0d7f101c 100644
--- a/src/InputGroup/InputGroup.js
+++ b/src/InputGroup/InputGroup.js
@@ -16,8 +16,8 @@ export class InputGroup extends Component {
         super(props);
 
         this.state = {
-            value: this.props.inputValue || '',
-            searchValue: this.props.inputValue || ''
+            value: this.props.inputValue,
+            searchValue: this.props.inputValue
         };
     }
 
@@ -267,6 +267,12 @@ InputGroup.propTypes = {
     searchButtonProps: PropTypes.object
 };
 
+InputGroup.defaultProps = {
+    addonPos: 'after',
+    inputType: 'text',
+    inputValue: ''
+};
+
 InputGroup.propDescriptions = {
     actions: 'Set to **true** to enable an input with actions. Actions can be shown with a text label or icon.',
     addon: 'The value of the add-on.',
diff --git a/src/InputGroup/__snapshots__/InputGroup.test.js.snap b/src/InputGroup/__snapshots__/InputGroup.test.js.snap
index 444a65d22..2a56df382 100644
--- a/src/InputGroup/__snapshots__/InputGroup.test.js.snap
+++ b/src/InputGroup/__snapshots__/InputGroup.test.js.snap
@@ -271,8 +271,6 @@ exports[`<InputGroup /> create input group items 13`] = `
   >
     <button
       className="fd-button--light"
-      disabled={false}
-      selected={false}
     >
       Button
     </button>
@@ -295,8 +293,6 @@ exports[`<InputGroup /> create input group items 14`] = `
   >
     <button
       className="fd-button--light"
-      disabled={false}
-      selected={false}
     >
       Button
     </button>
diff --git a/src/ListGroup/__snapshots__/ListGroup.test.js.snap b/src/ListGroup/__snapshots__/ListGroup.test.js.snap
index 5ac54ee45..94ae791a1 100644
--- a/src/ListGroup/__snapshots__/ListGroup.test.js.snap
+++ b/src/ListGroup/__snapshots__/ListGroup.test.js.snap
@@ -49,8 +49,6 @@ exports[`<ListGroup /> create list group 1`] = `
     >
       <button
         className="fd-button fd-button--standard sap-icon--edit"
-        disabled={false}
-        selected={false}
       />
     </span>
   </li>
@@ -70,8 +68,6 @@ exports[`<ListGroup /> create list group 2`] = `
     >
       <button
         className="fd-button fd-button--standard sap-icon--edit"
-        disabled={false}
-        selected={false}
       />
     </span>
   </li>
diff --git a/src/Menu/Menu.js b/src/Menu/Menu.js
index 648d2ea47..94588acf2 100644
--- a/src/Menu/Menu.js
+++ b/src/Menu/Menu.js
@@ -128,7 +128,7 @@ export const MenuGroup = ({ title, children, className, titleProps, ...props })
 };
 
 MenuGroup.propTypes = {
+    title: PropTypes.string.isRequired,
     className: PropTypes.string,
-    title: PropTypes.string,
     titleProps: PropTypes.object
 };
diff --git a/src/Menu/Menu.test.js b/src/Menu/Menu.test.js
index f9424cf08..73494c62d 100644
--- a/src/Menu/Menu.test.js
+++ b/src/Menu/Menu.test.js
@@ -214,7 +214,7 @@ describe('<Menu />', () => {
         });
 
         test('should allow props to be spread to the MenuGroup component', () => {
-            const element = mount(<MenuGroup data-sample='Sample' />);
+            const element = mount(<MenuGroup data-sample='Sample' title='Sample' />);
 
             expect(
                 element.getDOMNode().attributes['data-sample'].value
@@ -222,7 +222,7 @@ describe('<Menu />', () => {
         });
 
         test('should allow props to be spread to the MenuGroup h1 component', () => {
-            const element = mount(<MenuGroup titleProps={{ 'data-sample': 'Sample' }} />);
+            const element = mount(<MenuGroup title='Sample' titleProps={{ 'data-sample': 'Sample' }} />);
 
             expect(
                 element.find('h1').getDOMNode().attributes['data-sample'].value
diff --git a/src/MultiInput/MultiInput.js b/src/MultiInput/MultiInput.js
index fb2f7a485..d5734e7b9 100644
--- a/src/MultiInput/MultiInput.js
+++ b/src/MultiInput/MultiInput.js
@@ -199,6 +199,10 @@ MultiInput.propTypes = {
     onTagsUpdate: PropTypes.func
 };
 
+MultiInput.defaultProps = {
+    onTagsUpdate: () => {}
+};
+
 MultiInput.propDescriptions = {
     data: 'Collection of items to display in the list.',
     onTagsUpdate: 'Callback function when a tag is added or removed. Returns array of tags selected.',
diff --git a/src/Pagination/Pagination.js b/src/Pagination/Pagination.js
index e05aa5900..060e15f85 100644
--- a/src/Pagination/Pagination.js
+++ b/src/Pagination/Pagination.js
@@ -89,7 +89,7 @@ export class Pagination extends Component {
         // calculate number of pages based on item total and items per page
         // check to make sure itemsPerPage != 0
         this.numberOfPages = Math.ceil(
-            itemsTotal / (itemsPerPage ? itemsPerPage : 10)
+            itemsTotal / (itemsPerPage || 10)
         );
 
         const paginationClasses = classnames(
@@ -105,7 +105,7 @@ export class Pagination extends Component {
                     <span
                         {...displayTotalProps}
                         className='fd-pagination__total'>
-                        {itemsTotal} {totalText || 'items'}
+                        {itemsTotal} {totalText}
                     </span>
                 ) : (
                     ''
@@ -151,7 +151,8 @@ Pagination.propTypes = {
 Pagination.defaultProps = {
     displayTotal: true,
     initialPage: 1,
-    itemsPerPage: 10
+    itemsPerPage: 10,
+    totalText: 'items'
 };
 
 Pagination.propDescriptions = {
diff --git a/src/Panel/Panel.js b/src/Panel/Panel.js
index 4e561862d..29be9fff0 100644
--- a/src/Panel/Panel.js
+++ b/src/Panel/Panel.js
@@ -23,10 +23,6 @@ Panel.propTypes = {
     colSpan: CustomPropTypes.range(1, 6)
 };
 
-Panel.defaultProps = {
-    colSpan: null
-};
-
 Panel.propDescriptions = {
     colSpan: 'The number of columns to span inside a `PanelGrid`.'
 };
@@ -59,11 +55,6 @@ PanelGrid.propTypes = {
     nogap: PropTypes.bool
 };
 
-PanelGrid.defaultProps = {
-    nogap: false,
-    cols: null
-};
-
 PanelGrid.propDescriptions = {
     cols: 'The number of columns in the grid.',
     nogap: 'Set to **true** to remove the margins between the panels.'
diff --git a/src/Panel/__snapshots__/Panel.test.js.snap b/src/Panel/__snapshots__/Panel.test.js.snap
index e620cbe4f..8df26e282 100644
--- a/src/Panel/__snapshots__/Panel.test.js.snap
+++ b/src/Panel/__snapshots__/Panel.test.js.snap
@@ -26,8 +26,6 @@ exports[`<Panel /> create panels 1`] = `
     >
       <button
         className="fd-button fd-button--compact sap-icon--add"
-        disabled={false}
-        selected={false}
       >
         Add New Button
       </button>
@@ -162,8 +160,6 @@ exports[`<Panel /> create panels 3`] = `
     >
       <button
         className="fd-button fd-button--compact sap-icon--add"
-        disabled={false}
-        selected={false}
       >
         Add New Button
       </button>
diff --git a/src/Popover/__snapshots__/Popover.test.js.snap b/src/Popover/__snapshots__/Popover.test.js.snap
index 29ee4d6ec..b17f6c3f4 100644
--- a/src/Popover/__snapshots__/Popover.test.js.snap
+++ b/src/Popover/__snapshots__/Popover.test.js.snap
@@ -11,7 +11,6 @@ exports[`<Popover /> create Popover 1`] = `
   >
     <span
       className="sap-icon--cart sap-icon--xl"
-      onClick={[Function]}
     />
   </div>
   <div
@@ -74,7 +73,6 @@ exports[`<Popover /> create Popover 2`] = `
   >
     <span
       className="sap-icon--cart sap-icon--xl"
-      onClick={[Function]}
     />
   </div>
   <div
@@ -136,7 +134,6 @@ exports[`<Popover /> create Popover 3`] = `
   >
     <span
       className="sap-icon--cart sap-icon--xl"
-      onClick={[Function]}
     />
   </div>
   <div
@@ -198,7 +195,6 @@ exports[`<Popover /> create Popover 4`] = `
   >
     <span
       className="sap-icon--cart sap-icon--xl"
-      onClick={[Function]}
     />
   </div>
   <div
diff --git a/src/SearchInput/SearchInput.js b/src/SearchInput/SearchInput.js
index e9f0d9677..e5dad746e 100644
--- a/src/SearchInput/SearchInput.js
+++ b/src/SearchInput/SearchInput.js
@@ -125,7 +125,6 @@ export class SearchInput extends Component {
         const {
             placeholder,
             inShellbar,
-            onSearch,
             onEnter,
             searchList,
             onChange,
@@ -267,8 +266,10 @@ export class SearchInput extends Component {
 }
 
 SearchInput.propTypes = {
+    className: PropTypes.string,
     compact: PropTypes.bool,
     inputProps: PropTypes.object,
+    inShellbar: PropTypes.bool,
     listProps: PropTypes.object,
     noSearchBtn: PropTypes.bool,
     placeholder: PropTypes.string,
@@ -278,6 +279,10 @@ SearchInput.propTypes = {
     onEnter: PropTypes.func
 };
 
+SearchInput.defaultProps = {
+    onEnter: () => {}
+};
+
 SearchInput.propDescriptions = {
     noSearchBtn: 'Set to **true** to render without a search button.',
     onEnter: 'Callback function when the user hits the <Enter> key.',
diff --git a/src/Shellbar/Shellbar.js b/src/Shellbar/Shellbar.js
index 8c2c50dfb..d02928942 100644
--- a/src/Shellbar/Shellbar.js
+++ b/src/Shellbar/Shellbar.js
@@ -404,10 +404,6 @@ Shellbar.propTypes = {
     subtitle: PropTypes.string
 };
 
-Shellbar.defaultProps = {
-    actions: null
-};
-
 Shellbar.propDescriptions = {
     actions: 'Holds all product actions and links.',
     copilot: 'For use with applications that utilize CoPilot.',
diff --git a/src/Shellbar/__snapshots__/Shellbar.test.js.snap b/src/Shellbar/__snapshots__/Shellbar.test.js.snap
index 4524318a1..6384ad209 100644
--- a/src/Shellbar/__snapshots__/Shellbar.test.js.snap
+++ b/src/Shellbar/__snapshots__/Shellbar.test.js.snap
@@ -76,7 +76,6 @@ exports[`<Shellbar /> create shellbar 1`] = `
                     >
                       <span
                         className="sap-icon--action-settings sap-icon--s"
-                        onClick={[Function]}
                       />
                          
                       Settings
@@ -89,7 +88,6 @@ exports[`<Shellbar /> create shellbar 1`] = `
                     >
                       <span
                         className="sap-icon--log sap-icon--s"
-                        onClick={[Function]}
                       />
                          
                       Sign Out
@@ -182,7 +180,6 @@ exports[`<Shellbar /> create shellbar 2`] = `
                     >
                       <span
                         className="sap-icon--action-settings sap-icon--s"
-                        onClick={[Function]}
                       />
                          
                       Settings
@@ -195,7 +192,6 @@ exports[`<Shellbar /> create shellbar 2`] = `
                     >
                       <span
                         className="sap-icon--log sap-icon--s"
-                        onClick={[Function]}
                       />
                          
                       Sign Out
@@ -268,7 +264,6 @@ exports[`<Shellbar /> create shellbar 3`] = `
                   >
                     <span
                       className="sap-icon--log"
-                      onClick={[Function]}
                     />
                        
                     Application A
@@ -541,7 +536,6 @@ exports[`<Shellbar /> create shellbar 3`] = `
                     >
                       <span
                         className="sap-icon--search"
-                        onClick={[Function]}
                       />
                        
                       Search
@@ -554,7 +548,6 @@ exports[`<Shellbar /> create shellbar 3`] = `
                     >
                       <span
                         className="sap-icon--settings"
-                        onClick={[Function]}
                       >
                         <span
                           aria-label="Unread count"
@@ -574,7 +567,6 @@ exports[`<Shellbar /> create shellbar 3`] = `
                     >
                       <span
                         className="sap-icon--bell"
-                        onClick={[Function]}
                       >
                         <span
                           aria-label="Unread count"
@@ -594,7 +586,6 @@ exports[`<Shellbar /> create shellbar 3`] = `
                     >
                       <span
                         className="sap-icon--grid"
-                        onClick={[Function]}
                       />
                        
                       Product Switcher
@@ -651,7 +642,6 @@ exports[`<Shellbar /> create shellbar 3`] = `
                     >
                       <span
                         className="sap-icon--action-settings sap-icon--s"
-                        onClick={[Function]}
                       />
                          
                       Settings
@@ -664,7 +654,6 @@ exports[`<Shellbar /> create shellbar 3`] = `
                     >
                       <span
                         className="sap-icon--log sap-icon--s"
-                        onClick={[Function]}
                       />
                          
                       Sign Out
@@ -803,7 +792,6 @@ exports[`<Shellbar /> create shellbar 4`] = `
                   >
                     <span
                       className="sap-icon--log"
-                      onClick={[Function]}
                     />
                        
                     Application A
@@ -1052,7 +1040,6 @@ exports[`<Shellbar /> create shellbar 4`] = `
                     >
                       <span
                         className="sap-icon--search"
-                        onClick={[Function]}
                       />
                        
                       Search
@@ -1065,7 +1052,6 @@ exports[`<Shellbar /> create shellbar 4`] = `
                     >
                       <span
                         className="sap-icon--settings"
-                        onClick={[Function]}
                       >
                         <span
                           aria-label="Unread count"
@@ -1085,7 +1071,6 @@ exports[`<Shellbar /> create shellbar 4`] = `
                     >
                       <span
                         className="sap-icon--bell"
-                        onClick={[Function]}
                       />
                        
                       Notifications
@@ -1098,7 +1083,6 @@ exports[`<Shellbar /> create shellbar 4`] = `
                     >
                       <span
                         className="sap-icon--grid"
-                        onClick={[Function]}
                       />
                        
                       Product Switcher
@@ -1155,7 +1139,6 @@ exports[`<Shellbar /> create shellbar 4`] = `
                     >
                       <span
                         className="sap-icon--action-settings sap-icon--s"
-                        onClick={[Function]}
                       />
                          
                       Settings
@@ -1168,7 +1151,6 @@ exports[`<Shellbar /> create shellbar 4`] = `
                     >
                       <span
                         className="sap-icon--log sap-icon--s"
-                        onClick={[Function]}
                       />
                          
                       Sign Out
@@ -1307,7 +1289,6 @@ exports[`<Shellbar /> create shellbar 5`] = `
                   >
                     <span
                       className="sap-icon--log"
-                      onClick={[Function]}
                     />
                        
                     Application A
@@ -1510,7 +1491,6 @@ exports[`<Shellbar /> create shellbar 5`] = `
                     >
                       <span
                         className="sap-icon--search"
-                        onClick={[Function]}
                       />
                        
                       Search
@@ -1523,7 +1503,6 @@ exports[`<Shellbar /> create shellbar 5`] = `
                     >
                       <span
                         className="sap-icon--settings"
-                        onClick={[Function]}
                       >
                         <span
                           aria-label="Unread count"
@@ -1543,7 +1522,6 @@ exports[`<Shellbar /> create shellbar 5`] = `
                     >
                       <span
                         className="sap-icon--bell"
-                        onClick={[Function]}
                       />
                        
                       Notifications
@@ -1556,7 +1534,6 @@ exports[`<Shellbar /> create shellbar 5`] = `
                     >
                       <span
                         className="sap-icon--grid"
-                        onClick={[Function]}
                       />
                        
                       Product Switcher
@@ -1613,7 +1590,6 @@ exports[`<Shellbar /> create shellbar 5`] = `
                     >
                       <span
                         className="sap-icon--action-settings sap-icon--s"
-                        onClick={[Function]}
                       />
                          
                       Settings
@@ -1626,7 +1602,6 @@ exports[`<Shellbar /> create shellbar 5`] = `
                     >
                       <span
                         className="sap-icon--log sap-icon--s"
-                        onClick={[Function]}
                       />
                          
                       Sign Out
@@ -1765,7 +1740,6 @@ exports[`<Shellbar /> create shellbar 6`] = `
                   >
                     <span
                       className="sap-icon--log"
-                      onClick={[Function]}
                     />
                        
                     Application A
@@ -1992,7 +1966,6 @@ exports[`<Shellbar /> create shellbar 6`] = `
                     >
                       <span
                         className="sap-icon--search"
-                        onClick={[Function]}
                       />
                        
                       Search
@@ -2005,7 +1978,6 @@ exports[`<Shellbar /> create shellbar 6`] = `
                     >
                       <span
                         className="sap-icon--settings"
-                        onClick={[Function]}
                       >
                         <span
                           aria-label="Unread count"
@@ -2025,7 +1997,6 @@ exports[`<Shellbar /> create shellbar 6`] = `
                     >
                       <span
                         className="sap-icon--bell"
-                        onClick={[Function]}
                       >
                         <span
                           aria-label="Unread count"
@@ -2045,7 +2016,6 @@ exports[`<Shellbar /> create shellbar 6`] = `
                     >
                       <span
                         className="sap-icon--grid"
-                        onClick={[Function]}
                       />
                        
                       Product Switcher
@@ -2105,7 +2075,6 @@ exports[`<Shellbar /> create shellbar 6`] = `
                     >
                       <span
                         className="sap-icon--action-settings sap-icon--s"
-                        onClick={[Function]}
                       />
                          
                       Settings
@@ -2118,7 +2087,6 @@ exports[`<Shellbar /> create shellbar 6`] = `
                     >
                       <span
                         className="sap-icon--log sap-icon--s"
-                        onClick={[Function]}
                       />
                          
                       Sign Out
diff --git a/src/SideNavigation/SideNavigation.js b/src/SideNavigation/SideNavigation.js
index 124b4bd14..403e1dd5b 100644
--- a/src/SideNavigation/SideNavigation.js
+++ b/src/SideNavigation/SideNavigation.js
@@ -198,7 +198,7 @@ export const SideNavGroup = props => {
 };
 
 SideNavGroup.propTypes = {
+    title: PropTypes.string.isRequired,
     className: PropTypes.string,
-    title: PropTypes.string,
     titleProps: PropTypes.object
 };
diff --git a/src/SideNavigation/SideNavigation.test.js b/src/SideNavigation/SideNavigation.test.js
index 5fd61513b..c57c3192c 100644
--- a/src/SideNavigation/SideNavigation.test.js
+++ b/src/SideNavigation/SideNavigation.test.js
@@ -218,7 +218,7 @@ describe('<SideNavigation />', () => {
         });
 
         test('should allow props to be spread to the SideNavGroup component', () => {
-            const element = mount(<SideNavGroup data-sample='Sample' />);
+            const element = mount(<SideNavGroup data-sample='Sample' title='test' />);
 
             expect(
                 element.getDOMNode().attributes['data-sample'].value
@@ -226,7 +226,7 @@ describe('<SideNavigation />', () => {
         });
 
         test('should allow props to be spread to the SideNavGroup component\'s h1 element', () => {
-            const element = mount(<SideNavGroup titleProps={{'data-sample': 'Sample'}} />);
+            const element = mount(<SideNavGroup title='test' titleProps={{'data-sample': 'Sample'}} />);
 
             expect(
                 element.find('h1').getDOMNode().attributes['data-sample'].value
diff --git a/src/Table/Table.js b/src/Table/Table.js
index 8d40d528a..51b00b58d 100644
--- a/src/Table/Table.js
+++ b/src/Table/Table.js
@@ -50,13 +50,13 @@ export const Table = props => {
 };
 
 Table.propTypes = {
+    headers: PropTypes.array.isRequired,
     tableData: PropTypes.arrayOf(
         PropTypes.shape({
             rowData: PropTypes.array
         }).isRequired
     ).isRequired,
     className: PropTypes.string,
-    headers: PropTypes.array,
     tableBodyProps: PropTypes.object,
     tableBodyRowProps: PropTypes.oneOfType([
         PropTypes.object,
diff --git a/src/Tile/Tile.js b/src/Tile/Tile.js
index 78f762a86..f3a6db486 100644
--- a/src/Tile/Tile.js
+++ b/src/Tile/Tile.js
@@ -69,8 +69,8 @@ export const TileContent = props => {
 };
 
 TileContent.propTypes = {
+    title: PropTypes.string.isRequired,
     className: PropTypes.string,
-    title: PropTypes.string,
     titleProps: PropTypes.object
 };
 
@@ -85,6 +85,11 @@ export const TileMedia = props => {
     return <div {...rest} className={tileMediaClasses}>{children}</div>;
 };
 
+TileMedia.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string
+};
+
 export const TileActions = props => {
     const { children, className, ...rest } = props;
 
@@ -96,6 +101,11 @@ export const TileActions = props => {
     return <div {...rest} className={tileActionsClasses}>{children}</div>;
 };
 
+TileActions.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string
+};
+
 export const ProductTile = props => {
     const { disabled, children, className, ...rest } = props;
 
@@ -117,6 +127,7 @@ export const ProductTile = props => {
 };
 
 ProductTile.propTypes = {
+    children: PropTypes.node,
     className: PropTypes.string,
     disabled: PropTypes.bool
 };
@@ -173,10 +184,7 @@ export const TileGrid = props => {
 
     const tileGridClasses = classnames(
         'fd-tile-grid',
-        {
-            [`fd-tile-grid--${col}col`]: !!col,
-            'fd-tile-grid--3col': !col
-        },
+        `fd-tile-grid--${col}col`,
         className
     );
 
@@ -190,6 +198,11 @@ export const TileGrid = props => {
 };
 
 TileGrid.propTypes = {
+    children: PropTypes.node,
     className: PropTypes.string,
     col: CustomPropTypes.range(1, 6)
 };
+
+TileGrid.defaultProps = {
+    col: 3
+};
diff --git a/src/Tile/Tile.test.js b/src/Tile/Tile.test.js
index 606231064..b7a14330d 100644
--- a/src/Tile/Tile.test.js
+++ b/src/Tile/Tile.test.js
@@ -191,7 +191,7 @@ describe('<Tile />', () => {
         });
 
         test('should allow props to be spread to the TileContent component', () => {
-            const element = mount(<TileContent data-sample='Sample' />);
+            const element = mount(<TileContent data-sample='Sample' title='Sample' />);
 
             expect(
                 element.getDOMNode().attributes['data-sample'].value
@@ -199,7 +199,7 @@ describe('<Tile />', () => {
         });
 
         test('should allow props to be spread to the TileContent component\'s h2 element', () => {
-            const element = mount(<TileContent titleProps={{ 'data-sample': 'Sample' }} />);
+            const element = mount(<TileContent title='Sample' titleProps={{ 'data-sample': 'Sample' }} />);
 
             expect(
                 element.find('h2').getDOMNode().attributes['data-sample'].value
diff --git a/src/Tile/__snapshots__/Tile.test.js.snap b/src/Tile/__snapshots__/Tile.test.js.snap
index fb74dbf81..9a4b2869e 100644
--- a/src/Tile/__snapshots__/Tile.test.js.snap
+++ b/src/Tile/__snapshots__/Tile.test.js.snap
@@ -92,8 +92,6 @@ exports[`<Tile /> create tile component 4`] = `
       >
         <button
           className="fd-button fd-button--standard sap-icon--vertical-grip"
-          disabled={false}
-          selected={false}
         />
       </div>
       <div
@@ -200,8 +198,6 @@ exports[`<Tile /> create tile component 6`] = `
       >
         <button
           className="fd-button fd-button--standard sap-icon--vertical-grip"
-          disabled={false}
-          selected={false}
         />
       </div>
       <div
diff --git a/src/Time/Time.js b/src/Time/Time.js
index 3e2fb7f31..fae727efd 100644
--- a/src/Time/Time.js
+++ b/src/Time/Time.js
@@ -261,9 +261,7 @@ TimeItem.propTypes = {
 };
 
 TimeItem.defaultProps = {
-    id: '',
-    value: null,
-    arialabel: ''
+    updateTime: () => {}
 };
 
 export class Time extends Component {
@@ -309,10 +307,8 @@ export class Time extends Component {
         this.setState(prevState => ({
             ...prevState.time
         }));
-        //
-        if (this.props.onChange) {
-            this.props.onChange(this.state.time);
-        }
+
+        this.props.onChange(this.state.time);
     };
     // onUpdateTime = () => {
     //   this.props.onUpdateTime();
@@ -468,12 +464,10 @@ Time.propTypes = {
 };
 
 Time.defaultProps = {
-    id: '',
+    onChange: () => {},
     showHour: true,
     showMinute: true,
     showSecond: true,
-    format12Hours: false,
-    disabled: false,
     spinners: true,
     time: {
         hour: '00',
diff --git a/src/Time/__snapshots__/Time.test.js.snap b/src/Time/__snapshots__/Time.test.js.snap
index f1bdd1e5c..3ba886cda 100644
--- a/src/Time/__snapshots__/Time.test.js.snap
+++ b/src/Time/__snapshots__/Time.test.js.snap
@@ -3,7 +3,6 @@
 exports[`<Time /> create time component 1`] = `
 <div
   className="fd-time"
-  id=""
 >
   <div
     className="fd-time__item"
@@ -14,7 +13,6 @@ exports[`<Time /> create time component 1`] = `
       <button
         aria-label="Increase hours"
         className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-        disabled={false}
         onClick={[Function]}
       />
     </div>
@@ -28,7 +26,6 @@ exports[`<Time /> create time component 1`] = `
         name="hour"
         onChange={[Function]}
         placeholder="hh"
-        readOnly={false}
         type="text"
         value="00"
       />
@@ -39,7 +36,6 @@ exports[`<Time /> create time component 1`] = `
       <button
         aria-label="Decrease hours"
         className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-        disabled={false}
         onClick={[Function]}
       />
     </div>
@@ -53,7 +49,6 @@ exports[`<Time /> create time component 1`] = `
       <button
         aria-label="Increase minutes"
         className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-        disabled={false}
         onClick={[Function]}
       />
     </div>
@@ -67,7 +62,6 @@ exports[`<Time /> create time component 1`] = `
         name="minute"
         onChange={[Function]}
         placeholder="mm"
-        readOnly={false}
         type="text"
         value="00"
       />
@@ -78,7 +72,6 @@ exports[`<Time /> create time component 1`] = `
       <button
         aria-label="Decrease minutes"
         className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-        disabled={false}
         onClick={[Function]}
       />
     </div>
@@ -92,7 +85,6 @@ exports[`<Time /> create time component 1`] = `
       <button
         aria-label="Increase seconds"
         className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-        disabled={false}
         onClick={[Function]}
       />
     </div>
@@ -106,7 +98,6 @@ exports[`<Time /> create time component 1`] = `
         name="second"
         onChange={[Function]}
         placeholder="ss"
-        readOnly={false}
         type="text"
         value="00"
       />
@@ -117,7 +108,6 @@ exports[`<Time /> create time component 1`] = `
       <button
         aria-label="Decrease seconds"
         className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-        disabled={false}
         onClick={[Function]}
       />
     </div>
@@ -129,7 +119,6 @@ exports[`<Time /> create time component 1`] = `
 exports[`<Time /> create time component 2`] = `
 <div
   className="fd-time"
-  id=""
 >
   <div
     className="fd-time__item"
@@ -140,7 +129,6 @@ exports[`<Time /> create time component 2`] = `
       <button
         aria-label="Increase hours"
         className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-        disabled={false}
         onClick={[Function]}
       />
     </div>
@@ -154,7 +142,6 @@ exports[`<Time /> create time component 2`] = `
         name="hour"
         onChange={[Function]}
         placeholder="hh"
-        readOnly={false}
         type="text"
         value="00"
       />
@@ -165,7 +152,6 @@ exports[`<Time /> create time component 2`] = `
       <button
         aria-label="Decrease hours"
         className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-        disabled={false}
         onClick={[Function]}
       />
     </div>
@@ -179,7 +165,6 @@ exports[`<Time /> create time component 2`] = `
       <button
         aria-label="Increase minutes"
         className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-        disabled={false}
         onClick={[Function]}
       />
     </div>
@@ -193,7 +178,6 @@ exports[`<Time /> create time component 2`] = `
         name="minute"
         onChange={[Function]}
         placeholder="mm"
-        readOnly={false}
         type="text"
         value="00"
       />
@@ -204,7 +188,6 @@ exports[`<Time /> create time component 2`] = `
       <button
         aria-label="Decrease minutes"
         className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-        disabled={false}
         onClick={[Function]}
       />
     </div>
@@ -218,7 +201,6 @@ exports[`<Time /> create time component 2`] = `
       <button
         aria-label="Increase seconds"
         className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-        disabled={false}
         onClick={[Function]}
       />
     </div>
@@ -232,7 +214,6 @@ exports[`<Time /> create time component 2`] = `
         name="second"
         onChange={[Function]}
         placeholder="ss"
-        readOnly={false}
         type="text"
         value="00"
       />
@@ -243,7 +224,6 @@ exports[`<Time /> create time component 2`] = `
       <button
         aria-label="Decrease seconds"
         className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-        disabled={false}
         onClick={[Function]}
       />
     </div>
@@ -255,7 +235,6 @@ exports[`<Time /> create time component 2`] = `
 exports[`<Time /> create time component 3`] = `
 <div
   className="fd-time"
-  id=""
 >
   <div
     className="fd-time__item"
@@ -266,7 +245,6 @@ exports[`<Time /> create time component 3`] = `
       <button
         aria-label="Increase hours"
         className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-        disabled={false}
         onClick={[Function]}
       />
     </div>
@@ -280,7 +258,6 @@ exports[`<Time /> create time component 3`] = `
         name="hour"
         onChange={[Function]}
         placeholder="hh"
-        readOnly={false}
         type="text"
         value={22}
       />
@@ -291,7 +268,6 @@ exports[`<Time /> create time component 3`] = `
       <button
         aria-label="Decrease hours"
         className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-        disabled={false}
         onClick={[Function]}
       />
     </div>
@@ -305,7 +281,6 @@ exports[`<Time /> create time component 3`] = `
       <button
         aria-label="Increase minutes"
         className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-        disabled={false}
         onClick={[Function]}
       />
     </div>
@@ -319,7 +294,6 @@ exports[`<Time /> create time component 3`] = `
         name="minute"
         onChange={[Function]}
         placeholder="mm"
-        readOnly={false}
         type="text"
         value={34}
       />
@@ -330,7 +304,6 @@ exports[`<Time /> create time component 3`] = `
       <button
         aria-label="Decrease minutes"
         className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-        disabled={false}
         onClick={[Function]}
       />
     </div>
@@ -344,7 +317,6 @@ exports[`<Time /> create time component 3`] = `
       <button
         aria-label="Increase seconds"
         className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-        disabled={false}
         onClick={[Function]}
       />
     </div>
@@ -358,7 +330,6 @@ exports[`<Time /> create time component 3`] = `
         name="second"
         onChange={[Function]}
         placeholder="ss"
-        readOnly={false}
         type="text"
         value={12}
       />
@@ -369,7 +340,6 @@ exports[`<Time /> create time component 3`] = `
       <button
         aria-label="Decrease seconds"
         className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-        disabled={false}
         onClick={[Function]}
       />
     </div>
@@ -381,7 +351,6 @@ exports[`<Time /> create time component 3`] = `
 exports[`<Time /> create time component 4`] = `
 <div
   className="fd-time"
-  id=""
 >
   <div
     className="fd-time__item"
@@ -392,7 +361,6 @@ exports[`<Time /> create time component 4`] = `
       <button
         aria-label="Increase hours"
         className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-        disabled={false}
         onClick={[Function]}
       />
     </div>
@@ -406,7 +374,6 @@ exports[`<Time /> create time component 4`] = `
         name="hour"
         onChange={[Function]}
         placeholder="hh"
-        readOnly={false}
         type="text"
         value="00"
       />
@@ -417,7 +384,6 @@ exports[`<Time /> create time component 4`] = `
       <button
         aria-label="Decrease hours"
         className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-        disabled={false}
         onClick={[Function]}
       />
     </div>
@@ -431,7 +397,6 @@ exports[`<Time /> create time component 4`] = `
       <button
         aria-label="Increase minutes"
         className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-        disabled={false}
         onClick={[Function]}
       />
     </div>
@@ -445,7 +410,6 @@ exports[`<Time /> create time component 4`] = `
         name="minute"
         onChange={[Function]}
         placeholder="mm"
-        readOnly={false}
         type="text"
         value="00"
       />
@@ -456,7 +420,6 @@ exports[`<Time /> create time component 4`] = `
       <button
         aria-label="Decrease minutes"
         className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-        disabled={false}
         onClick={[Function]}
       />
     </div>
@@ -470,7 +433,6 @@ exports[`<Time /> create time component 4`] = `
       <button
         aria-label="Increase seconds"
         className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-        disabled={false}
         onClick={[Function]}
       />
     </div>
@@ -484,7 +446,6 @@ exports[`<Time /> create time component 4`] = `
         name="second"
         onChange={[Function]}
         placeholder="ss"
-        readOnly={false}
         type="text"
         value="00"
       />
@@ -495,7 +456,6 @@ exports[`<Time /> create time component 4`] = `
       <button
         aria-label="Decrease seconds"
         className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-        disabled={false}
         onClick={[Function]}
       />
     </div>
@@ -507,7 +467,6 @@ exports[`<Time /> create time component 4`] = `
 exports[`<Time /> create time component 5`] = `
 <div
   className="fd-time"
-  id=""
 >
   <div
     className="fd-time__item"
@@ -518,7 +477,6 @@ exports[`<Time /> create time component 5`] = `
       <button
         aria-label="Increase hours"
         className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-        disabled={false}
         onClick={[Function]}
       />
     </div>
@@ -532,7 +490,6 @@ exports[`<Time /> create time component 5`] = `
         name="hour"
         onChange={[Function]}
         placeholder="hh"
-        readOnly={false}
         type="text"
         value="12"
       />
@@ -543,7 +500,6 @@ exports[`<Time /> create time component 5`] = `
       <button
         aria-label="Decrease hours"
         className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-        disabled={false}
         onClick={[Function]}
       />
     </div>
@@ -557,7 +513,6 @@ exports[`<Time /> create time component 5`] = `
       <button
         aria-label="Increase minutes"
         className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-        disabled={false}
         onClick={[Function]}
       />
     </div>
@@ -571,7 +526,6 @@ exports[`<Time /> create time component 5`] = `
         name="minute"
         onChange={[Function]}
         placeholder="mm"
-        readOnly={false}
         type="text"
         value="00"
       />
@@ -582,7 +536,6 @@ exports[`<Time /> create time component 5`] = `
       <button
         aria-label="Decrease minutes"
         className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-        disabled={false}
         onClick={[Function]}
       />
     </div>
@@ -596,7 +549,6 @@ exports[`<Time /> create time component 5`] = `
       <button
         aria-label="Increase seconds"
         className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-        disabled={false}
         onClick={[Function]}
       />
     </div>
@@ -610,7 +562,6 @@ exports[`<Time /> create time component 5`] = `
         name="second"
         onChange={[Function]}
         placeholder="ss"
-        readOnly={false}
         type="text"
         value="00"
       />
@@ -621,7 +572,6 @@ exports[`<Time /> create time component 5`] = `
       <button
         aria-label="Decrease seconds"
         className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-        disabled={false}
         onClick={[Function]}
       />
     </div>
@@ -635,7 +585,6 @@ exports[`<Time /> create time component 5`] = `
       <button
         aria-label="Increase period"
         className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-        disabled={false}
         onClick={[Function]}
       />
     </div>
@@ -648,7 +597,6 @@ exports[`<Time /> create time component 5`] = `
         maxLength="2"
         name="meridiem"
         onChange={[Function]}
-        readOnly={false}
         type="text"
         value="am"
       />
@@ -659,7 +607,6 @@ exports[`<Time /> create time component 5`] = `
       <button
         aria-label="Decrease period"
         className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-        disabled={false}
         onClick={[Function]}
       />
     </div>
@@ -670,7 +617,6 @@ exports[`<Time /> create time component 5`] = `
 exports[`<Time /> create time component 6`] = `
 <div
   className="fd-time"
-  id=""
 >
   <div
     className="fd-time__item"
@@ -686,7 +632,6 @@ exports[`<Time /> create time component 6`] = `
         name="hour"
         onChange={[Function]}
         placeholder="hh"
-        readOnly={false}
         type="text"
         value="12"
       />
@@ -707,7 +652,6 @@ exports[`<Time /> create time component 6`] = `
         name="minute"
         onChange={[Function]}
         placeholder="mm"
-        readOnly={false}
         type="text"
         value="00"
       />
@@ -728,7 +672,6 @@ exports[`<Time /> create time component 6`] = `
         name="second"
         onChange={[Function]}
         placeholder="ss"
-        readOnly={false}
         type="text"
         value="00"
       />
@@ -742,7 +685,6 @@ exports[`<Time /> create time component 6`] = `
 exports[`<Time /> create time component 7`] = `
 <div
   className="fd-time"
-  id=""
 >
   <div
     className="fd-time__item"
@@ -753,7 +695,6 @@ exports[`<Time /> create time component 7`] = `
       <button
         aria-label="Increase hours"
         className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-        disabled={false}
         onClick={[Function]}
       />
     </div>
@@ -767,7 +708,6 @@ exports[`<Time /> create time component 7`] = `
         name="hour"
         onChange={[Function]}
         placeholder="hh"
-        readOnly={false}
         type="text"
         value="12"
       />
@@ -778,7 +718,6 @@ exports[`<Time /> create time component 7`] = `
       <button
         aria-label="Decrease hours"
         className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-        disabled={false}
         onClick={[Function]}
       />
     </div>
@@ -792,7 +731,6 @@ exports[`<Time /> create time component 7`] = `
       <button
         aria-label="Increase minutes"
         className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-        disabled={false}
         onClick={[Function]}
       />
     </div>
@@ -806,7 +744,6 @@ exports[`<Time /> create time component 7`] = `
         name="minute"
         onChange={[Function]}
         placeholder="mm"
-        readOnly={false}
         type="text"
         value="00"
       />
@@ -817,7 +754,6 @@ exports[`<Time /> create time component 7`] = `
       <button
         aria-label="Decrease minutes"
         className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-        disabled={false}
         onClick={[Function]}
       />
     </div>
@@ -830,7 +766,6 @@ exports[`<Time /> create time component 7`] = `
 exports[`<Time /> create time component 8`] = `
 <div
   className="fd-time"
-  id=""
 >
   <div
     className="fd-time__item"
diff --git a/src/TimePicker/TimePicker.js b/src/TimePicker/TimePicker.js
index 42ad27bf9..133cc1d7e 100644
--- a/src/TimePicker/TimePicker.js
+++ b/src/TimePicker/TimePicker.js
@@ -12,8 +12,8 @@ class TimePickerItem extends Component {
         var length = this.setLength(props);
         this.state = {
             value: this.props.value,
-            inputId: this.props.id + '-input',
-            buttonID: this.props.id + '-button',
+            inputId: this.props.id && this.props.id + '-input',
+            buttonID: this.props.id && this.props.id + '-button',
             style: 'fd-input',
             isValid: false,
             length: length
@@ -259,15 +259,6 @@ TimePickerItem.propTypes = {
     onChange: PropTypes.func
 };
 
-TimePickerItem.defaultProps = {
-    value: null,
-    inputId: '',
-    buttonID: '',
-    style: '',
-    isValid: false,
-    length: 0
-};
-
 export class TimePicker extends React.Component {
     constructor(props) {
         super(props);
@@ -426,20 +417,16 @@ TimePicker.propTypes = {
 };
 
 TimePicker.defaultProps = {
-    id: '',
     showHour: true,
     showMinute: true,
     showSecond: true,
-    format12Hours: false,
-    disabled: false,
     spinners: true,
     time: {
         hour: '00',
         minute: '00',
         second: '00',
         meridiem: 0
-    },
-    value: ''
+    }
 };
 
 TimePicker.propDescriptions = {
diff --git a/src/TimePicker/__snapshots__/TimePicker.test.js.snap b/src/TimePicker/__snapshots__/TimePicker.test.js.snap
index 1bcef67d5..19a550765 100644
--- a/src/TimePicker/__snapshots__/TimePicker.test.js.snap
+++ b/src/TimePicker/__snapshots__/TimePicker.test.js.snap
@@ -29,7 +29,6 @@ exports[`<TimePicker /> create time picker 1`] = `
               onBlur={[Function]}
               onChange={[Function]}
               placeholder="hh:mm:ss"
-              readOnly={false}
               type="text"
               value=""
             />
@@ -41,7 +40,6 @@ exports[`<TimePicker /> create time picker 1`] = `
                 aria-expanded="false"
                 aria-haspopup="true"
                 className="fd-button--light fd-button--compact sap-icon--fob-watch fd-popover__control"
-                disabled={false}
                 id="myTime-button"
               />
             </span>
@@ -66,7 +64,6 @@ exports[`<TimePicker /> create time picker 1`] = `
               <button
                 aria-label="Increase hours"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -80,7 +77,6 @@ exports[`<TimePicker /> create time picker 1`] = `
                 name="hour"
                 onChange={[Function]}
                 placeholder="hh"
-                readOnly={false}
                 type="text"
                 value="00"
               />
@@ -91,7 +87,6 @@ exports[`<TimePicker /> create time picker 1`] = `
               <button
                 aria-label="Decrease hours"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -105,7 +100,6 @@ exports[`<TimePicker /> create time picker 1`] = `
               <button
                 aria-label="Increase minutes"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -119,7 +113,6 @@ exports[`<TimePicker /> create time picker 1`] = `
                 name="minute"
                 onChange={[Function]}
                 placeholder="mm"
-                readOnly={false}
                 type="text"
                 value="00"
               />
@@ -130,7 +123,6 @@ exports[`<TimePicker /> create time picker 1`] = `
               <button
                 aria-label="Decrease minutes"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -144,7 +136,6 @@ exports[`<TimePicker /> create time picker 1`] = `
               <button
                 aria-label="Increase seconds"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -158,7 +149,6 @@ exports[`<TimePicker /> create time picker 1`] = `
                 name="second"
                 onChange={[Function]}
                 placeholder="ss"
-                readOnly={false}
                 type="text"
                 value="00"
               />
@@ -169,7 +159,6 @@ exports[`<TimePicker /> create time picker 1`] = `
               <button
                 aria-label="Decrease seconds"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -185,7 +174,6 @@ exports[`<TimePicker /> create time picker 1`] = `
 exports[`<TimePicker /> create time picker 2`] = `
 <div
   className="fd-time-picker"
-  id=""
 >
   <div
     className="fd-popover fd-popover--no-arrow"
@@ -207,11 +195,9 @@ exports[`<TimePicker /> create time picker 2`] = `
           >
             <input
               className="fd-input"
-              id="-input"
               onBlur={[Function]}
               onChange={[Function]}
               placeholder="hh:mm:ss am/pm"
-              readOnly={false}
               type="text"
               value=""
             />
@@ -223,8 +209,6 @@ exports[`<TimePicker /> create time picker 2`] = `
                 aria-expanded="false"
                 aria-haspopup="true"
                 className="fd-button--light fd-button--compact sap-icon--fob-watch fd-popover__control"
-                disabled={false}
-                id="-button"
               />
             </span>
           </div>
@@ -248,7 +232,6 @@ exports[`<TimePicker /> create time picker 2`] = `
               <button
                 aria-label="Increase hours"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -262,7 +245,6 @@ exports[`<TimePicker /> create time picker 2`] = `
                 name="hour"
                 onChange={[Function]}
                 placeholder="hh"
-                readOnly={false}
                 type="text"
                 value="12"
               />
@@ -273,7 +255,6 @@ exports[`<TimePicker /> create time picker 2`] = `
               <button
                 aria-label="Decrease hours"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -287,7 +268,6 @@ exports[`<TimePicker /> create time picker 2`] = `
               <button
                 aria-label="Increase minutes"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -301,7 +281,6 @@ exports[`<TimePicker /> create time picker 2`] = `
                 name="minute"
                 onChange={[Function]}
                 placeholder="mm"
-                readOnly={false}
                 type="text"
                 value="00"
               />
@@ -312,7 +291,6 @@ exports[`<TimePicker /> create time picker 2`] = `
               <button
                 aria-label="Decrease minutes"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -326,7 +304,6 @@ exports[`<TimePicker /> create time picker 2`] = `
               <button
                 aria-label="Increase seconds"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -340,7 +317,6 @@ exports[`<TimePicker /> create time picker 2`] = `
                 name="second"
                 onChange={[Function]}
                 placeholder="ss"
-                readOnly={false}
                 type="text"
                 value="00"
               />
@@ -351,7 +327,6 @@ exports[`<TimePicker /> create time picker 2`] = `
               <button
                 aria-label="Decrease seconds"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -365,7 +340,6 @@ exports[`<TimePicker /> create time picker 2`] = `
               <button
                 aria-label="Increase period"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -378,7 +352,6 @@ exports[`<TimePicker /> create time picker 2`] = `
                 maxLength="2"
                 name="meridiem"
                 onChange={[Function]}
-                readOnly={false}
                 type="text"
                 value="am"
               />
@@ -389,7 +362,6 @@ exports[`<TimePicker /> create time picker 2`] = `
               <button
                 aria-label="Decrease period"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -404,7 +376,6 @@ exports[`<TimePicker /> create time picker 2`] = `
 exports[`<TimePicker /> create time picker 3`] = `
 <div
   className="fd-time-picker"
-  id=""
 >
   <div
     className="fd-popover fd-popover--no-arrow"
@@ -426,11 +397,9 @@ exports[`<TimePicker /> create time picker 3`] = `
           >
             <input
               className="fd-input"
-              id="-input"
               onBlur={[Function]}
               onChange={[Function]}
               placeholder="hh:mm"
-              readOnly={false}
               type="text"
               value=""
             />
@@ -442,8 +411,6 @@ exports[`<TimePicker /> create time picker 3`] = `
                 aria-expanded="false"
                 aria-haspopup="true"
                 className="fd-button--light fd-button--compact sap-icon--fob-watch fd-popover__control"
-                disabled={false}
-                id="-button"
               />
             </span>
           </div>
@@ -467,7 +434,6 @@ exports[`<TimePicker /> create time picker 3`] = `
               <button
                 aria-label="Increase hours"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -481,7 +447,6 @@ exports[`<TimePicker /> create time picker 3`] = `
                 name="hour"
                 onChange={[Function]}
                 placeholder="hh"
-                readOnly={false}
                 type="text"
                 value="00"
               />
@@ -492,7 +457,6 @@ exports[`<TimePicker /> create time picker 3`] = `
               <button
                 aria-label="Decrease hours"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -506,7 +470,6 @@ exports[`<TimePicker /> create time picker 3`] = `
               <button
                 aria-label="Increase minutes"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -520,7 +483,6 @@ exports[`<TimePicker /> create time picker 3`] = `
                 name="minute"
                 onChange={[Function]}
                 placeholder="mm"
-                readOnly={false}
                 type="text"
                 value="00"
               />
@@ -531,7 +493,6 @@ exports[`<TimePicker /> create time picker 3`] = `
               <button
                 aria-label="Decrease minutes"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -548,7 +509,6 @@ exports[`<TimePicker /> create time picker 3`] = `
 exports[`<TimePicker /> create time picker 4`] = `
 <div
   className="fd-time-picker"
-  id=""
 >
   <div
     className="fd-popover fd-popover--no-arrow"
@@ -570,7 +530,6 @@ exports[`<TimePicker /> create time picker 4`] = `
           >
             <input
               className="fd-input"
-              id="-input"
               onBlur={[Function]}
               onChange={[Function]}
               placeholder="hh:mm:ss"
@@ -587,7 +546,6 @@ exports[`<TimePicker /> create time picker 4`] = `
                 aria-haspopup="true"
                 className="fd-button--light fd-button--compact sap-icon--fob-watch fd-popover__control"
                 disabled={true}
-                id="-button"
               />
             </span>
           </div>
@@ -730,7 +688,6 @@ exports[`<TimePicker /> create time picker 4`] = `
 exports[`<TimePicker /> create time picker 5`] = `
 <div
   className="fd-time-picker"
-  id=""
 >
   <div
     className="fd-popover fd-popover--no-arrow"
@@ -752,11 +709,9 @@ exports[`<TimePicker /> create time picker 5`] = `
           >
             <input
               className="fd-input"
-              id="-input"
               onBlur={[Function]}
               onChange={[Function]}
               placeholder="hh:mm:ss am/pm"
-              readOnly={false}
               type="text"
               value=""
             />
@@ -768,8 +723,6 @@ exports[`<TimePicker /> create time picker 5`] = `
                 aria-expanded="false"
                 aria-haspopup="true"
                 className="fd-button--light fd-button--compact sap-icon--fob-watch fd-popover__control"
-                disabled={false}
-                id="-button"
               />
             </span>
           </div>
@@ -793,7 +746,6 @@ exports[`<TimePicker /> create time picker 5`] = `
               <button
                 aria-label="Increase hours"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -807,7 +759,6 @@ exports[`<TimePicker /> create time picker 5`] = `
                 name="hour"
                 onChange={[Function]}
                 placeholder="hh"
-                readOnly={false}
                 type="text"
                 value="12"
               />
@@ -818,7 +769,6 @@ exports[`<TimePicker /> create time picker 5`] = `
               <button
                 aria-label="Decrease hours"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -832,7 +782,6 @@ exports[`<TimePicker /> create time picker 5`] = `
               <button
                 aria-label="Increase minutes"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -846,7 +795,6 @@ exports[`<TimePicker /> create time picker 5`] = `
                 name="minute"
                 onChange={[Function]}
                 placeholder="mm"
-                readOnly={false}
                 type="text"
                 value="00"
               />
@@ -857,7 +805,6 @@ exports[`<TimePicker /> create time picker 5`] = `
               <button
                 aria-label="Decrease minutes"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -871,7 +818,6 @@ exports[`<TimePicker /> create time picker 5`] = `
               <button
                 aria-label="Increase seconds"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -885,7 +831,6 @@ exports[`<TimePicker /> create time picker 5`] = `
                 name="second"
                 onChange={[Function]}
                 placeholder="ss"
-                readOnly={false}
                 type="text"
                 value="00"
               />
@@ -896,7 +841,6 @@ exports[`<TimePicker /> create time picker 5`] = `
               <button
                 aria-label="Decrease seconds"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -910,7 +854,6 @@ exports[`<TimePicker /> create time picker 5`] = `
               <button
                 aria-label="Increase period"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -923,7 +866,6 @@ exports[`<TimePicker /> create time picker 5`] = `
                 maxLength="2"
                 name="meridiem"
                 onChange={[Function]}
-                readOnly={false}
                 type="text"
                 value="am"
               />
@@ -934,7 +876,6 @@ exports[`<TimePicker /> create time picker 5`] = `
               <button
                 aria-label="Decrease period"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -949,7 +890,6 @@ exports[`<TimePicker /> create time picker 5`] = `
 exports[`<TimePicker /> create time picker 6`] = `
 <div
   className="fd-time-picker"
-  id=""
 >
   <div
     className="fd-popover fd-popover--no-arrow"
@@ -971,11 +911,9 @@ exports[`<TimePicker /> create time picker 6`] = `
           >
             <input
               className="fd-input"
-              id="-input"
               onBlur={[Function]}
               onChange={[Function]}
               placeholder="hh:mm:ss am/pm"
-              readOnly={false}
               type="text"
               value=""
             />
@@ -987,8 +925,6 @@ exports[`<TimePicker /> create time picker 6`] = `
                 aria-expanded="false"
                 aria-haspopup="true"
                 className="fd-button--light fd-button--compact sap-icon--fob-watch fd-popover__control"
-                disabled={false}
-                id="-button"
               />
             </span>
           </div>
@@ -1012,7 +948,6 @@ exports[`<TimePicker /> create time picker 6`] = `
               <button
                 aria-label="Increase hours"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -1026,7 +961,6 @@ exports[`<TimePicker /> create time picker 6`] = `
                 name="hour"
                 onChange={[Function]}
                 placeholder="hh"
-                readOnly={false}
                 type="text"
                 value="12"
               />
@@ -1037,7 +971,6 @@ exports[`<TimePicker /> create time picker 6`] = `
               <button
                 aria-label="Decrease hours"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -1051,7 +984,6 @@ exports[`<TimePicker /> create time picker 6`] = `
               <button
                 aria-label="Increase minutes"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -1065,7 +997,6 @@ exports[`<TimePicker /> create time picker 6`] = `
                 name="minute"
                 onChange={[Function]}
                 placeholder="mm"
-                readOnly={false}
                 type="text"
                 value="00"
               />
@@ -1076,7 +1007,6 @@ exports[`<TimePicker /> create time picker 6`] = `
               <button
                 aria-label="Decrease minutes"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -1090,7 +1020,6 @@ exports[`<TimePicker /> create time picker 6`] = `
               <button
                 aria-label="Increase seconds"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -1104,7 +1033,6 @@ exports[`<TimePicker /> create time picker 6`] = `
                 name="second"
                 onChange={[Function]}
                 placeholder="ss"
-                readOnly={false}
                 type="text"
                 value="00"
               />
@@ -1115,7 +1043,6 @@ exports[`<TimePicker /> create time picker 6`] = `
               <button
                 aria-label="Decrease seconds"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -1129,7 +1056,6 @@ exports[`<TimePicker /> create time picker 6`] = `
               <button
                 aria-label="Increase period"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -1142,7 +1068,6 @@ exports[`<TimePicker /> create time picker 6`] = `
                 maxLength="2"
                 name="meridiem"
                 onChange={[Function]}
-                readOnly={false}
                 type="text"
                 value="am"
               />
@@ -1153,7 +1078,6 @@ exports[`<TimePicker /> create time picker 6`] = `
               <button
                 aria-label="Decrease period"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -1168,7 +1092,6 @@ exports[`<TimePicker /> create time picker 6`] = `
 exports[`<TimePicker /> create time picker 7`] = `
 <div
   className="fd-time-picker"
-  id=""
 >
   <div
     className="fd-popover fd-popover--no-arrow"
@@ -1190,11 +1113,9 @@ exports[`<TimePicker /> create time picker 7`] = `
           >
             <input
               className="fd-input"
-              id="-input"
               onBlur={[Function]}
               onChange={[Function]}
               placeholder="hh:mm:ss am/pm"
-              readOnly={false}
               type="text"
               value=""
             />
@@ -1206,8 +1127,6 @@ exports[`<TimePicker /> create time picker 7`] = `
                 aria-expanded="false"
                 aria-haspopup="true"
                 className="fd-button--light fd-button--compact sap-icon--fob-watch fd-popover__control"
-                disabled={false}
-                id="-button"
               />
             </span>
           </div>
@@ -1231,7 +1150,6 @@ exports[`<TimePicker /> create time picker 7`] = `
               <button
                 aria-label="Increase hours"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -1245,7 +1163,6 @@ exports[`<TimePicker /> create time picker 7`] = `
                 name="hour"
                 onChange={[Function]}
                 placeholder="hh"
-                readOnly={false}
                 type="text"
                 value="12"
               />
@@ -1256,7 +1173,6 @@ exports[`<TimePicker /> create time picker 7`] = `
               <button
                 aria-label="Decrease hours"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -1270,7 +1186,6 @@ exports[`<TimePicker /> create time picker 7`] = `
               <button
                 aria-label="Increase minutes"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -1284,7 +1199,6 @@ exports[`<TimePicker /> create time picker 7`] = `
                 name="minute"
                 onChange={[Function]}
                 placeholder="mm"
-                readOnly={false}
                 type="text"
                 value="00"
               />
@@ -1295,7 +1209,6 @@ exports[`<TimePicker /> create time picker 7`] = `
               <button
                 aria-label="Decrease minutes"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -1309,7 +1222,6 @@ exports[`<TimePicker /> create time picker 7`] = `
               <button
                 aria-label="Increase seconds"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -1323,7 +1235,6 @@ exports[`<TimePicker /> create time picker 7`] = `
                 name="second"
                 onChange={[Function]}
                 placeholder="ss"
-                readOnly={false}
                 type="text"
                 value="00"
               />
@@ -1334,7 +1245,6 @@ exports[`<TimePicker /> create time picker 7`] = `
               <button
                 aria-label="Decrease seconds"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -1348,7 +1258,6 @@ exports[`<TimePicker /> create time picker 7`] = `
               <button
                 aria-label="Increase period"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -1361,7 +1270,6 @@ exports[`<TimePicker /> create time picker 7`] = `
                 maxLength="2"
                 name="meridiem"
                 onChange={[Function]}
-                readOnly={false}
                 type="text"
                 value="am"
               />
@@ -1372,7 +1280,6 @@ exports[`<TimePicker /> create time picker 7`] = `
               <button
                 aria-label="Decrease period"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -1387,7 +1294,6 @@ exports[`<TimePicker /> create time picker 7`] = `
 exports[`<TimePicker /> create time picker 8`] = `
 <div
   className="fd-time-picker"
-  id=""
 >
   <div
     className="fd-popover fd-popover--no-arrow"
@@ -1409,11 +1315,9 @@ exports[`<TimePicker /> create time picker 8`] = `
           >
             <input
               className="fd-input"
-              id="-input"
               onBlur={[Function]}
               onChange={[Function]}
               placeholder="mm:ss"
-              readOnly={false}
               type="text"
               value=""
             />
@@ -1425,8 +1329,6 @@ exports[`<TimePicker /> create time picker 8`] = `
                 aria-expanded="false"
                 aria-haspopup="true"
                 className="fd-button--light fd-button--compact sap-icon--fob-watch fd-popover__control"
-                disabled={false}
-                id="-button"
               />
             </span>
           </div>
@@ -1451,7 +1353,6 @@ exports[`<TimePicker /> create time picker 8`] = `
               <button
                 aria-label="Increase minutes"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -1465,7 +1366,6 @@ exports[`<TimePicker /> create time picker 8`] = `
                 name="minute"
                 onChange={[Function]}
                 placeholder="mm"
-                readOnly={false}
                 type="text"
                 value="00"
               />
@@ -1476,7 +1376,6 @@ exports[`<TimePicker /> create time picker 8`] = `
               <button
                 aria-label="Decrease minutes"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -1490,7 +1389,6 @@ exports[`<TimePicker /> create time picker 8`] = `
               <button
                 aria-label="Increase seconds"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -1504,7 +1402,6 @@ exports[`<TimePicker /> create time picker 8`] = `
                 name="second"
                 onChange={[Function]}
                 placeholder="ss"
-                readOnly={false}
                 type="text"
                 value="00"
               />
@@ -1515,7 +1412,6 @@ exports[`<TimePicker /> create time picker 8`] = `
               <button
                 aria-label="Decrease seconds"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -1531,7 +1427,6 @@ exports[`<TimePicker /> create time picker 8`] = `
 exports[`<TimePicker /> create time picker 9`] = `
 <div
   className="fd-time-picker"
-  id=""
 >
   <div
     className="fd-popover fd-popover--no-arrow"
@@ -1553,11 +1448,9 @@ exports[`<TimePicker /> create time picker 9`] = `
           >
             <input
               className="fd-input"
-              id="-input"
               onBlur={[Function]}
               onChange={[Function]}
               placeholder="mm:ss am/pm"
-              readOnly={false}
               type="text"
               value=""
             />
@@ -1569,8 +1462,6 @@ exports[`<TimePicker /> create time picker 9`] = `
                 aria-expanded="false"
                 aria-haspopup="true"
                 className="fd-button--light fd-button--compact sap-icon--fob-watch fd-popover__control"
-                disabled={false}
-                id="-button"
               />
             </span>
           </div>
@@ -1595,7 +1486,6 @@ exports[`<TimePicker /> create time picker 9`] = `
               <button
                 aria-label="Increase minutes"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -1609,7 +1499,6 @@ exports[`<TimePicker /> create time picker 9`] = `
                 name="minute"
                 onChange={[Function]}
                 placeholder="mm"
-                readOnly={false}
                 type="text"
                 value="00"
               />
@@ -1620,7 +1509,6 @@ exports[`<TimePicker /> create time picker 9`] = `
               <button
                 aria-label="Decrease minutes"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -1634,7 +1522,6 @@ exports[`<TimePicker /> create time picker 9`] = `
               <button
                 aria-label="Increase seconds"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -1648,7 +1535,6 @@ exports[`<TimePicker /> create time picker 9`] = `
                 name="second"
                 onChange={[Function]}
                 placeholder="ss"
-                readOnly={false}
                 type="text"
                 value="00"
               />
@@ -1659,7 +1545,6 @@ exports[`<TimePicker /> create time picker 9`] = `
               <button
                 aria-label="Decrease seconds"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -1673,7 +1558,6 @@ exports[`<TimePicker /> create time picker 9`] = `
               <button
                 aria-label="Increase period"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -1686,7 +1570,6 @@ exports[`<TimePicker /> create time picker 9`] = `
                 maxLength="2"
                 name="meridiem"
                 onChange={[Function]}
-                readOnly={false}
                 type="text"
                 value="am"
               />
@@ -1697,7 +1580,6 @@ exports[`<TimePicker /> create time picker 9`] = `
               <button
                 aria-label="Decrease period"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -1712,7 +1594,6 @@ exports[`<TimePicker /> create time picker 9`] = `
 exports[`<TimePicker /> create time picker 10`] = `
 <div
   className="fd-time-picker"
-  id=""
 >
   <div
     className="fd-popover fd-popover--no-arrow"
@@ -1734,11 +1615,9 @@ exports[`<TimePicker /> create time picker 10`] = `
           >
             <input
               className="fd-input"
-              id="-input"
               onBlur={[Function]}
               onChange={[Function]}
               placeholder="hh:ss am/pm"
-              readOnly={false}
               type="text"
               value=""
             />
@@ -1750,8 +1629,6 @@ exports[`<TimePicker /> create time picker 10`] = `
                 aria-expanded="false"
                 aria-haspopup="true"
                 className="fd-button--light fd-button--compact sap-icon--fob-watch fd-popover__control"
-                disabled={false}
-                id="-button"
               />
             </span>
           </div>
@@ -1775,7 +1652,6 @@ exports[`<TimePicker /> create time picker 10`] = `
               <button
                 aria-label="Increase hours"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -1789,7 +1665,6 @@ exports[`<TimePicker /> create time picker 10`] = `
                 name="hour"
                 onChange={[Function]}
                 placeholder="hh"
-                readOnly={false}
                 type="text"
                 value="12"
               />
@@ -1800,7 +1675,6 @@ exports[`<TimePicker /> create time picker 10`] = `
               <button
                 aria-label="Decrease hours"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -1815,7 +1689,6 @@ exports[`<TimePicker /> create time picker 10`] = `
               <button
                 aria-label="Increase seconds"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -1829,7 +1702,6 @@ exports[`<TimePicker /> create time picker 10`] = `
                 name="second"
                 onChange={[Function]}
                 placeholder="ss"
-                readOnly={false}
                 type="text"
                 value="00"
               />
@@ -1840,7 +1712,6 @@ exports[`<TimePicker /> create time picker 10`] = `
               <button
                 aria-label="Decrease seconds"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -1854,7 +1725,6 @@ exports[`<TimePicker /> create time picker 10`] = `
               <button
                 aria-label="Increase period"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-up-arrow "
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
@@ -1867,7 +1737,6 @@ exports[`<TimePicker /> create time picker 10`] = `
                 maxLength="2"
                 name="meridiem"
                 onChange={[Function]}
-                readOnly={false}
                 type="text"
                 value="am"
               />
@@ -1878,7 +1747,6 @@ exports[`<TimePicker /> create time picker 10`] = `
               <button
                 aria-label="Decrease period"
                 className=" fd-button--light fd-button--xs sap-icon--navigation-down-arrow"
-                disabled={false}
                 onClick={[Function]}
               />
             </div>
diff --git a/src/Toggle/Toggle.js b/src/Toggle/Toggle.js
index 3671d0109..9ca8ecf6c 100644
--- a/src/Toggle/Toggle.js
+++ b/src/Toggle/Toggle.js
@@ -6,7 +6,7 @@ import {TOGGLE_SIZES} from '../utils/constants';
 export class Toggle extends React.Component {
     constructor(props) {
         super(props);
-        this.state = { checked: props.checked ? props.checked : false };
+        this.state = { checked: !!props.checked };
     }
 
     handleChange = (e) => {
diff --git a/src/utils/constants.js b/src/utils/constants.js
index 304244c9b..f2aea8fa1 100644
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -10,6 +10,12 @@ export const BADGE_TYPES = [
     'warning',
     'error'
 ];
+
+export const BADGE_MODIFIERS = [
+    'pill',
+    'filled'
+];
+
 export const LABEL_TYPES = [
     'success',
     'warning',