diff --git a/packages/core/src/components/badge/badge.tsx b/packages/core/src/components/badge/badge.tsx
index 1da079730b..eeae61d964 100644
--- a/packages/core/src/components/badge/badge.tsx
+++ b/packages/core/src/components/badge/badge.tsx
@@ -1,4 +1,4 @@
-import { Component } from '@stencil/core';
+import { Component, Prop } from '@stencil/core';
 
 /**
   * @name Badge
@@ -39,6 +39,21 @@ import { Component } from '@stencil/core';
   }
 })
 export class Badge {
+
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
   protected render() {
     return <slot></slot>;
   }
diff --git a/packages/core/src/components/button/button.tsx b/packages/core/src/components/button/button.tsx
index da290f817e..58c5771af6 100644
--- a/packages/core/src/components/button/button.tsx
+++ b/packages/core/src/components/button/button.tsx
@@ -75,94 +75,98 @@ export class Button {
 
   @Prop() itemButton: boolean = false;
 
+  /**
+   * @input {string} Contains a URL or a URL fragment that the hyperlink points to.
+   * If this property is set, an anchor tag will be rendered.
+   */
   @Prop() href: string;
 
   /**
-   * @Prop {string} The type of button.
+   * @input {string} The type of button.
    * Possible values are: `"button"`, `"bar-button"`.
    */
   @Prop() buttonType: string = 'button';
 
   /**
-   * @Prop {boolean} If true, activates the large button size.
+   * @input {boolean} If true, activates the large button size.
    * Type: size
    */
   @Prop() large: boolean = false;
 
   /**
-   * @Prop {boolean} If true, activates the small button size.
+   * @input {boolean} If true, activates the small button size.
    * Type: size
    */
   @Prop() small: boolean = false;
 
   /**
-   * @Prop {boolean} If true, activates the default button size. Normally the default, useful for buttons in an item.
+   * @input {boolean} If true, activates the default button size. Normally the default, useful for buttons in an item.
    * Type: size
    */
   @Prop() default: boolean = false;
 
   /**
-   * @Prop {boolean} If true, sets the button into a disabled state.
+   * @input {boolean} If true, sets the button into a disabled state.
    */
   @Prop() disabled: boolean = false;
 
   /**
-   * @Prop {boolean} If true, activates a transparent button style with a border.
+   * @input {boolean} If true, activates a transparent button style with a border.
    * Type: style
    */
   @Prop() outline: boolean = false;
 
   /**
-   * @Prop {boolean} If true, activates a transparent button style without a border.
+   * @input {boolean} If true, activates a transparent button style without a border.
    * Type: style
    */
   @Prop() clear: boolean = false;
 
   /**
-   * @Prop {boolean} If true, activates a solid button style. Normally the default, useful for buttons in a toolbar.
+   * @input {boolean} If true, activates a solid button style. Normally the default, useful for buttons in a toolbar.
    * Type: style
    */
   @Prop() solid: boolean = false;
 
   /**
-   * @Prop {boolean} If true, activates a button with rounded corners.
+   * @input {boolean} If true, activates a button with rounded corners.
    * Type: shape
    */
   @Prop() round: boolean = false;
 
   /**
-   * @Prop {boolean} If true, activates a button style that fills the available width.
+   * @input {boolean} If true, activates a button style that fills the available width.
    * Type: display
    */
   @Prop() block: boolean = false;
 
   /**
-   * @Prop {boolean} If true, activates a button style that fills the available width without
+   * @input {boolean} If true, activates a button style that fills the available width without
    * a left and right border.
    * Type: display
    */
   @Prop() full: boolean = false;
 
   /**
-   * @Prop {boolean} If true, activates a button with a heavier font weight.
+   * @input {boolean} If true, activates a button with a heavier font weight.
    * Type: decorator
    */
   @Prop() strong: boolean = false;
 
   /**
-   * @Prop {string} The mode determines which platform styles to use.
-   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
-   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
-   */
-  @Prop() mode: 'ios' | 'md' | 'wp';
-
-  /**
-   * @Prop {string} The color to use from your Sass `$colors` map.
+   * @input {string} The color to use from your Sass `$colors` map.
    * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
    * For more information, see [Theming your App](/docs/theming/theming-your-app).
    */
   @Prop() color: string;
 
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
   protected render() {
     const buttonType = this.buttonType;
     const mode = this.mode;
diff --git a/packages/core/src/components/card-content/card-content.tsx b/packages/core/src/components/card-content/card-content.tsx
index 61d78fd82c..45ce4e1846 100644
--- a/packages/core/src/components/card-content/card-content.tsx
+++ b/packages/core/src/components/card-content/card-content.tsx
@@ -1,4 +1,4 @@
-import { Component } from '@stencil/core';
+import { Component, Prop } from '@stencil/core';
 
 @Component({
   tag: 'ion-card-content',
@@ -12,6 +12,20 @@ import { Component } from '@stencil/core';
   }
 })
 export class CardContent {
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
   protected render() {
     return <slot></slot>;
   }
diff --git a/packages/core/src/components/card-header/card-header.tsx b/packages/core/src/components/card-header/card-header.tsx
index 58132e8766..af012c2581 100644
--- a/packages/core/src/components/card-header/card-header.tsx
+++ b/packages/core/src/components/card-header/card-header.tsx
@@ -1,4 +1,4 @@
-import { Component } from '@stencil/core';
+import { Component, Prop } from '@stencil/core';
 
 
 @Component({
@@ -13,6 +13,20 @@ import { Component } from '@stencil/core';
   }
 })
 export class CardHeader {
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
   protected render() {
     return <slot></slot>;
   }
diff --git a/packages/core/src/components/card-title/card-title.tsx b/packages/core/src/components/card-title/card-title.tsx
index 1ba2f162f7..5e62123e37 100644
--- a/packages/core/src/components/card-title/card-title.tsx
+++ b/packages/core/src/components/card-title/card-title.tsx
@@ -1,4 +1,4 @@
-import { Component } from '@stencil/core';
+import { Component, Prop} from '@stencil/core';
 
 
 @Component({
@@ -13,6 +13,20 @@ import { Component } from '@stencil/core';
   }
 })
 export class CardTitle {
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
   protected render() {
     return <slot></slot>;
   }
diff --git a/packages/core/src/components/card/card.tsx b/packages/core/src/components/card/card.tsx
index 254e2ab92a..5d9ea83999 100644
--- a/packages/core/src/components/card/card.tsx
+++ b/packages/core/src/components/card/card.tsx
@@ -1,4 +1,4 @@
-import { Component } from '@stencil/core';
+import { Component, Prop } from '@stencil/core';
 
 @Component({
   tag: 'ion-card',
@@ -12,6 +12,20 @@ import { Component } from '@stencil/core';
   }
 })
 export class Card {
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
   protected render() {
     return <slot></slot>;
   }
diff --git a/packages/core/src/components/checkbox/checkbox.tsx b/packages/core/src/components/checkbox/checkbox.tsx
index b857dc88bf..10ef921af8 100644
--- a/packages/core/src/components/checkbox/checkbox.tsx
+++ b/packages/core/src/components/checkbox/checkbox.tsx
@@ -92,6 +92,20 @@ export class Checkbox {
    */
   @Event() ionStyle: EventEmitter;
 
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
   /**
    * @input {boolean} If true, the checkbox is selected. Defaults to `false`.
    */
diff --git a/packages/core/src/components/chip-button/chip-button.tsx b/packages/core/src/components/chip-button/chip-button.tsx
index 9c89fed9a8..cc87f848d9 100644
--- a/packages/core/src/components/chip-button/chip-button.tsx
+++ b/packages/core/src/components/chip-button/chip-button.tsx
@@ -12,18 +12,34 @@ import { getElementClassObject } from '../../utils/theme';
 })
 export class ChipButton {
   @Element() private el: HTMLElement;
-  private mode: string;
-  private color: string;
 
+  /**
+   * @input {string} Contains a URL or a URL fragment that the hyperlink points to.
+   * If this property is set, an anchor tag will be rendered.
+   */
   @Prop() href: string;
 
   /**
-   * @Prop {boolean} If true, activates a transparent button style.
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
+  /**
+   * @input {boolean} If true, activates a transparent button style.
    */
   @Prop() clear: boolean = false;
 
   /**
-   * @Prop {boolean} If true, sets the button into a disabled state.
+   * @input {boolean} If true, sets the button into a disabled state.
    */
   @Prop() disabled: boolean = false;
 
diff --git a/packages/core/src/components/chip/chip.tsx b/packages/core/src/components/chip/chip.tsx
index 0db97b3e45..325017bf2d 100644
--- a/packages/core/src/components/chip/chip.tsx
+++ b/packages/core/src/components/chip/chip.tsx
@@ -1,4 +1,4 @@
-import { Component } from '@stencil/core';
+import { Component, Prop } from '@stencil/core';
 
 /**
   * @name Chip
@@ -99,6 +99,20 @@ import { Component } from '@stencil/core';
   }
 })
 export class Chip {
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
   protected render() {
     return <slot></slot>;
   }
diff --git a/packages/core/src/components/fab/fab.tsx b/packages/core/src/components/fab/fab.tsx
index c1174ccc91..2600bb6706 100755
--- a/packages/core/src/components/fab/fab.tsx
+++ b/packages/core/src/components/fab/fab.tsx
@@ -57,10 +57,27 @@ import { createThemedClasses, getElementClassObject } from '../../utils/theme';
 })
 export class FabButton {
   @Element() private el: HTMLElement;
-  private mode: string;
-  private color: string;
 
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
+  /**
+   * @input {string} Contains a URL or a URL fragment that the hyperlink points to.
+   * If this property is set, an anchor tag will be rendered.
+   */
   @Prop() href: string;
+
   @Prop() activated: boolean = false;
   @Prop() toggleActive: Function = () => {};
 
@@ -70,7 +87,7 @@ export class FabButton {
   @State() private inList: boolean = false;
 
   /**
-   * @Prop {boolean} If true, sets the button into a disabled state.
+   * @input {boolean} If true, sets the button into a disabled state.
    */
   @Prop() disabled: boolean = false;
 
diff --git a/packages/core/src/components/input/textarea.tsx b/packages/core/src/components/input/textarea.tsx
index dcfefcc1c7..9082bf8056 100644
--- a/packages/core/src/components/input/textarea.tsx
+++ b/packages/core/src/components/input/textarea.tsx
@@ -166,7 +166,7 @@ export class Textarea implements TextareaComponent {
   @Prop() wrap: string;
 
   /**
-   * @input {string} The value of the textare.
+   * @input {string} The value of the textarea.
    */
   @Prop({ mutable: true }) value: string;
 
diff --git a/packages/core/src/components/item-divider/item-divider.tsx b/packages/core/src/components/item-divider/item-divider.tsx
index 5530e18507..4357f281be 100644
--- a/packages/core/src/components/item-divider/item-divider.tsx
+++ b/packages/core/src/components/item-divider/item-divider.tsx
@@ -1,4 +1,4 @@
-import { Component } from '@stencil/core';
+import { Component, Prop } from '@stencil/core';
 
 
 @Component({
@@ -13,6 +13,21 @@ import { Component } from '@stencil/core';
   }
 })
 export class ItemDivider {
+
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
   protected render() {
     return [
       <slot name='start'></slot>,
diff --git a/packages/core/src/components/item-sliding/item-option.tsx b/packages/core/src/components/item-sliding/item-option.tsx
index ac905902e3..e15942f890 100644
--- a/packages/core/src/components/item-sliding/item-option.tsx
+++ b/packages/core/src/components/item-sliding/item-option.tsx
@@ -14,13 +14,28 @@ import { Component, Prop } from '@stencil/core';
   }
 })
 export class ItemOption {
-  mode: string;
-  color: string;
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
 
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
+  /**
+   * @input {string} Contains a URL or a URL fragment that the hyperlink points to.
+   * If this property is set, an anchor tag will be rendered.
+   */
   @Prop() href: string;
 
   /**
-   * @Prop {boolean} If true, sets the button into a disabled state.
+   * @input {boolean} If true, sets the button into a disabled state.
    */
   @Prop() disabled: boolean = false;
 
diff --git a/packages/core/src/components/item/item.tsx b/packages/core/src/components/item/item.tsx
index 6b865055b0..909a6ba460 100644
--- a/packages/core/src/components/item/item.tsx
+++ b/packages/core/src/components/item/item.tsx
@@ -22,8 +22,24 @@ export class Item {
 
   @Element() private el: HTMLElement;
 
-  @Prop() mode: string;
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
   @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
+  /**
+   * @input {string} Contains a URL or a URL fragment that the hyperlink points to.
+   * If this property is set, an anchor tag will be rendered.
+   */
   @Prop() href: string;
 
   @Listen('ionStyle')
diff --git a/packages/core/src/components/label/label.tsx b/packages/core/src/components/label/label.tsx
index 121bccbb94..18657df6af 100644
--- a/packages/core/src/components/label/label.tsx
+++ b/packages/core/src/components/label/label.tsx
@@ -22,6 +22,20 @@ export class Label {
    */
   @Event() ionStyle: EventEmitter;
 
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
   /**
    * @output {Event} If true, the label will sit alongside an input. Defaults to `false`.
    */
diff --git a/packages/core/src/components/list-header/list-header.tsx b/packages/core/src/components/list-header/list-header.tsx
index e9cff6a22c..d675852bba 100644
--- a/packages/core/src/components/list-header/list-header.tsx
+++ b/packages/core/src/components/list-header/list-header.tsx
@@ -1,4 +1,4 @@
-import { Component } from '@stencil/core';
+import { Component, Prop } from '@stencil/core';
 
 
 @Component({
@@ -13,6 +13,21 @@ import { Component } from '@stencil/core';
   }
 })
 export class ListHeader {
+
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
   protected render() {
     return <slot></slot>;
   }
diff --git a/packages/core/src/components/note/note.tsx b/packages/core/src/components/note/note.tsx
index b234ea6937..089e3e9eff 100644
--- a/packages/core/src/components/note/note.tsx
+++ b/packages/core/src/components/note/note.tsx
@@ -1,4 +1,4 @@
-import { Component } from '@stencil/core';
+import { Component, Prop } from '@stencil/core';
 
 
 /**
@@ -40,6 +40,21 @@ import { Component } from '@stencil/core';
   }
 })
 export class Note {
+
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
   protected render() {
     return <slot></slot>;
   }
diff --git a/packages/core/src/components/radio/radio.tsx b/packages/core/src/components/radio/radio.tsx
index 389aa59ca0..ec6da34952 100644
--- a/packages/core/src/components/radio/radio.tsx
+++ b/packages/core/src/components/radio/radio.tsx
@@ -50,8 +50,6 @@ import { createThemedClasses } from '../../utils/theme';
   }
 })
 export class Radio {
-  mode: string;
-  color: string;
   labelId: string;
   styleTmr: any;
 
@@ -89,6 +87,20 @@ export class Radio {
    */
   @Event() ionSelect: EventEmitter;
 
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
   /**
    * @input {boolean} If true, the radio is selected. Defaults to `false`.
    */
diff --git a/packages/core/src/components/range/range.tsx b/packages/core/src/components/range/range.tsx
index a78f6f1c3d..c708679a55 100644
--- a/packages/core/src/components/range/range.tsx
+++ b/packages/core/src/components/range/range.tsx
@@ -59,6 +59,20 @@ export class Range implements BaseInputComponent {
    */
   @Event() ionBlur: EventEmitter;
 
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
   /**
    * @input {number} How long, in milliseconds, to wait to trigger the
    * `ionChange` event after each change in the range value. Default `0`.
diff --git a/packages/core/src/components/searchbar/searchbar.tsx b/packages/core/src/components/searchbar/searchbar.tsx
index cbaa9921c9..1dae974a06 100644
--- a/packages/core/src/components/searchbar/searchbar.tsx
+++ b/packages/core/src/components/searchbar/searchbar.tsx
@@ -38,10 +38,6 @@ export class Searchbar {
 
   @Element() private el: HTMLElement;
 
-  @Prop() mode: string;
-
-  @Prop() color: string;
-
   @State() activated: boolean = false;
 
   @State() focused: boolean = false;
@@ -72,6 +68,19 @@ export class Searchbar {
    */
   @Event() ionFocus: EventEmitter;
 
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
 
   /**
    * @input {boolean} If true, enable searchbar animation. Default `false`.
diff --git a/packages/core/src/components/segment-button/segment-button.tsx b/packages/core/src/components/segment-button/segment-button.tsx
index ac84576276..5da1f37466 100644
--- a/packages/core/src/components/segment-button/segment-button.tsx
+++ b/packages/core/src/components/segment-button/segment-button.tsx
@@ -46,9 +46,6 @@ import { createThemedClasses, getElementClassObject } from '../../utils/theme';
 export class SegmentButton {
   styleTmr: any;
 
-  mode: string;
-  color: string;
-
   @Element() private el: HTMLElement;
 
   /**
@@ -58,6 +55,20 @@ export class SegmentButton {
 
   @State() activated: boolean = false;
 
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
   /**
    * @input {boolean} If true, the segment button is selected. Defaults to `false`.
    */
diff --git a/packages/core/src/components/segment/segment.tsx b/packages/core/src/components/segment/segment.tsx
index a0f4aa2fd9..ade2e8f673 100644
--- a/packages/core/src/components/segment/segment.tsx
+++ b/packages/core/src/components/segment/segment.tsx
@@ -81,6 +81,20 @@ export class Segment {
    */
   @Event() ionChange: EventEmitter;
 
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
   /*
    * @input {boolean} If true, the user cannot interact with the segment. Default false.
    */
diff --git a/packages/core/src/components/spinner/spinner.tsx b/packages/core/src/components/spinner/spinner.tsx
index f8e776cc32..855ac5bf10 100644
--- a/packages/core/src/components/spinner/spinner.tsx
+++ b/packages/core/src/components/spinner/spinner.tsx
@@ -109,11 +109,22 @@ import { SPINNERS, SpinnerConfig } from './spinner-configs';
   }
 })
 export class Spinner {
-  mode: string;
-  color: string;
-
   @Prop({ context: 'config' }) config: Config;
 
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
   /**
    * @input {string} How long it takes it to do one loop.
    */
diff --git a/packages/core/src/components/tabs/tab-bar.tsx b/packages/core/src/components/tabs/tab-bar.tsx
index adfeff37b3..8f20941031 100644
--- a/packages/core/src/components/tabs/tab-bar.tsx
+++ b/packages/core/src/components/tabs/tab-bar.tsx
@@ -9,6 +9,21 @@ import { Component, Prop } from '@stencil/core';
   }
 })
 export class TabBar {
+
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
   @Prop() tabs: any;
 
   @Prop() onTabSelected: Function;
@@ -16,7 +31,7 @@ export class TabBar {
   @Prop() selectedIndex: number = 0;
 
   /**
-   * @prop {string} Set the tabbar layout: `icon-top`, `icon-start`, `icon-end`, `icon-bottom`, `icon-hide`, `title-hide`.
+   * @input {string} Set the tabbar layout: `icon-top`, `icon-start`, `icon-end`, `icon-bottom`, `icon-hide`, `title-hide`.
    */
   @Prop() tabsLayout: string = 'icon-top';
   /*
diff --git a/packages/core/src/components/tabs/tab.tsx b/packages/core/src/components/tabs/tab.tsx
index 2940622845..c337fc372a 100644
--- a/packages/core/src/components/tabs/tab.tsx
+++ b/packages/core/src/components/tabs/tab.tsx
@@ -10,61 +10,61 @@ import { Component, Event, EventEmitter, Prop, State } from '@stencil/core';
 export class Tab {
 
   /**
-   * @prop {Page} Set the root component for this tab.
+   * @input {Page} Set the root component for this tab.
    */
   @Prop() root: string;
 
   /**
-   * @prop {object} Any nav-params to pass to the root componentof this tab.
+   * @input {object} Any nav-params to pass to the root componentof this tab.
    */
   @Prop() rootParams: any;
 
   /**
-   * @prop {boolean} If true, the tab is selected
+   * @input {boolean} If true, the tab is selected
    */
   @State() isSelected: Boolean = false;
 
   /**
-   * @prop {string} The title of the tab button.
+   * @input {string} The title of the tab button.
    */
   @Prop() tabTitle: string;
 
   /**
-   * @prop {string} The icon for the tab button.
+   * @input {string} The icon for the tab button.
    */
   @Prop() tabIcon: string;
 
   /**
-   * @prop {string} The badge for the tab button.
+   * @input {string} The badge for the tab button.
    */
   @Prop() tabBadge: string;
 
   /**
-   * @prop {string} The badge color for the tab button.
+   * @input {string} The badge color for the tab button.
    */
   @Prop() tabBadgeStyle: string;
 
   /**
    * TODO why isn't this disabled like other components?
-   * @prop {boolean} If true, enable the tab. If false,
+   * @input {boolean} If true, enable the tab. If false,
    * the user cannot interact with the tab.
    * Default: `true`.
    */
   @Prop() enabled: boolean = true;
 
   /**
-   * @prop {boolean} If true, the tab button is visible within the
+   * @input {boolean} If true, the tab button is visible within the
    * tabbar. Default: `true`.
    */
   @Prop() shown: boolean = true;
 
   /**
-   * @prop {boolean} If true, hide the tabs on child pages.
+   * @input {boolean} If true, hide the tabs on child pages.
    */
   @Prop() tabsHideOnSubPages: boolean = false;
 
   /**
-   * @prop {Tab} Emitted when the current tab is selected.
+   * @input {Tab} Emitted when the current tab is selected.
    */
   @Prop() onSelected: Function;
 
diff --git a/packages/core/src/components/tabs/tabs.tsx b/packages/core/src/components/tabs/tabs.tsx
index 37d63e8def..30122e28b2 100644
--- a/packages/core/src/components/tabs/tabs.tsx
+++ b/packages/core/src/components/tabs/tabs.tsx
@@ -28,17 +28,17 @@ export class Tabs {
   @State() selectedIndex: number = 0;
 
   /**
-   * @prop {string} Set the tabbar layout: `icon-top`, `icon-start`, `icon-end`, `icon-bottom`, `icon-hide`, `title-hide`.
+   * @input {string} Set the tabbar layout: `icon-top`, `icon-start`, `icon-end`, `icon-bottom`, `icon-hide`, `title-hide`.
    */
   @Prop() tabsLayout: string = 'icon-top';
 
   /**
-   * @prop {string} Set position of the tabbar: `top`, `bottom`.
+   * @input {string} Set position of the tabbar: `top`, `bottom`.
    */
   @Prop() tabsPlacement: string = 'bottom';
 
   /**
-   * @prop {boolean} If true, show the tab highlight bar under the selected tab.
+   * @input {boolean} If true, show the tab highlight bar under the selected tab.
    */
   @Prop() tabsHighlight: boolean = false;
 
diff --git a/packages/core/src/components/toggle/toggle.tsx b/packages/core/src/components/toggle/toggle.tsx
index 7a0fdda2e3..718d482c9d 100644
--- a/packages/core/src/components/toggle/toggle.tsx
+++ b/packages/core/src/components/toggle/toggle.tsx
@@ -15,7 +15,6 @@ import { hapticSelection } from '../../utils/haptic';
   }
 })
 export class Toggle implements BooleanInputComponent {
-
   private toggleId: string;
   private labelId: string;
   private styleTmr: any;
@@ -45,6 +44,20 @@ export class Toggle implements BooleanInputComponent {
    */
   @Event() ionBlur: EventEmitter;
 
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
+
   /**
    * @input {boolean} If true, the toggle is selected. Defaults to `false`.
    */
diff --git a/packages/core/src/components/toolbar/toolbar.tsx b/packages/core/src/components/toolbar/toolbar.tsx
index bf066502ea..852e0125d6 100644
--- a/packages/core/src/components/toolbar/toolbar.tsx
+++ b/packages/core/src/components/toolbar/toolbar.tsx
@@ -103,9 +103,22 @@ import { Config } from '../../index';
 })
 export class Toolbar {
   @Element() private el: HTMLElement;
+
   @Prop({ context: 'config' }) config: Config;
-  mode: string;
-  color: string;
+
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md' | 'wp';
 
   protected ionViewDidLoad() {
     const buttons = this.el.querySelectorAll('ion-button') as any;