diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 7ae2dc4f3d..e783b11d3b 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -4711,7 +4711,7 @@ declare global {
   namespace StencilComponents {
     interface IonPopover {
       /**
-       * The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
+       * The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
        */
       'color': Color;
       /**
@@ -4749,7 +4749,7 @@ declare global {
        */
       'leaveAnimation': AnimationBuilder;
       /**
-       * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+       * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
        */
       'mode': Mode;
       /**
@@ -4800,7 +4800,7 @@ declare global {
   namespace JSXElements {
     export interface IonPopoverAttributes extends HTMLAttributes {
       /**
-       * The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
+       * The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
        */
       'color'?: Color;
       /**
@@ -4834,7 +4834,7 @@ declare global {
        */
       'leaveAnimation'?: AnimationBuilder;
       /**
-       * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+       * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
        */
       'mode'?: Mode;
       /**
@@ -5471,6 +5471,9 @@ declare global {
 
   namespace StencilComponents {
     interface IonRippleEffect {
+      /**
+       * Adds the ripple effect to the parent elment
+       */
       'addRipple': (pageX: number, pageY: number) => void;
       'tapClick': boolean;
     }
@@ -5619,7 +5622,13 @@ declare global {
       'animationBuilder': AnimationBuilder;
       'commit': (enteringEl: HTMLElement, leavingEl: HTMLElement | undefined, opts?: RouterOutletOptions | undefined) => Promise<boolean>;
       'delegate': FrameworkDelegate;
+      /**
+       * Returns the ID for the current route 
+       */
       'getRouteId': () => RouteID | undefined;
+      /**
+       * Set the root component for the given navigation stack
+       */
       'setRoot': (component: ComponentRef, params?: ComponentProps | undefined, opts?: RouterOutletOptions | undefined) => Promise<boolean>;
       'setRouteId': (id: string, params: any, direction: number) => Promise<RouteWrite>;
     }
@@ -5661,9 +5670,12 @@ declare global {
     interface IonRouter {
       'navChanged': (intent: RouterIntent) => Promise<boolean>;
       'printDebug': () => void;
+      /**
+       * Navigate to the specified URL 
+       */
       'push': (url: string, direction?: RouterDirection) => Promise<boolean>;
       /**
-       * By default `ion-router` will match the routes at the root path ("/"). That can be changed when  T
+       * By default `ion-router` will match the routes at the root path ("/"). That can be changed when
        */
       'root': string;
       /**
@@ -5692,10 +5704,16 @@ declare global {
   }
   namespace JSXElements {
     export interface IonRouterAttributes extends HTMLAttributes {
+      /**
+       * Emitted when the route had changed
+       */
       'onIonRouteDidChange'?: (event: CustomEvent<RouterEventDetail>) => void;
+      /**
+       * Event emitted when the route is about to change
+       */
       'onIonRouteWillChange'?: (event: CustomEvent<RouterEventDetail>) => void;
       /**
-       * By default `ion-router` will match the routes at the root path ("/"). That can be changed when  T
+       * By default `ion-router` will match the routes at the root path ("/"). That can be changed when
        */
       'root'?: string;
       /**
@@ -5748,11 +5766,29 @@ declare global {
        * If true and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionScroll, nothing will change. Note, the does not disable the system bounce on iOS. That is an OS level setting.
        */
       'forceOverscroll': boolean;
+      /**
+       * The mode for component. 
+       */
       'mode': Mode;
+      /**
+       * Scroll by a specified X/Y distance in the component 
+       */
       'scrollByPoint': (x: number, y: number, duration: number, done?: Function | undefined) => Promise<any>;
+      /**
+       * If true, the component will emit scroll events 
+       */
       'scrollEvents': boolean;
+      /**
+       * Scroll to the bottom of the component 
+       */
       'scrollToBottom': (duration: number) => Promise<void>;
+      /**
+       * Scroll to a specified X/Y location in the component 
+       */
       'scrollToPoint': (x: number, y: number, duration: number, done?: Function | undefined) => Promise<any>;
+      /**
+       * Scroll to the top of the component 
+       */
       'scrollToTop': (duration: number) => Promise<void>;
     }
   }
@@ -5780,6 +5816,9 @@ declare global {
        * If true and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionScroll, nothing will change. Note, the does not disable the system bounce on iOS. That is an OS level setting.
        */
       'forceOverscroll'?: boolean;
+      /**
+       * The mode for component. 
+       */
       'mode'?: Mode;
       /**
        * Emitted while scrolling. This event is disabled by default. Look at the property: `scrollEvents`
@@ -5793,6 +5832,9 @@ declare global {
        * Emitted when the scroll has started.
        */
       'onIonScrollStart'?: (event: CustomEvent<ScrollBaseDetail>) => void;
+      /**
+       * If true, the component will emit scroll events 
+       */
       'scrollEvents'?: boolean;
     }
   }
@@ -6155,9 +6197,21 @@ declare global {
 
   namespace StencilComponents {
     interface IonSelectPopover {
+      /**
+       * Header text for the popover 
+       */
       'header': string;
+      /**
+       * Text for popover body 
+       */
       'message': string;
+      /**
+       * Array of options for the popover 
+       */
       'options': SelectPopoverOption[];
+      /**
+       * Subheader text for the popover 
+       */
       'subHeader': string;
     }
   }
@@ -6181,9 +6235,21 @@ declare global {
   }
   namespace JSXElements {
     export interface IonSelectPopoverAttributes extends HTMLAttributes {
+      /**
+       * Header text for the popover 
+       */
       'header'?: string;
+      /**
+       * Text for popover body 
+       */
       'message'?: string;
+      /**
+       * Array of options for the popover 
+       */
       'options'?: SelectPopoverOption[];
+      /**
+       * Subheader text for the popover 
+       */
       'subHeader'?: string;
     }
   }
@@ -6366,6 +6432,9 @@ declare global {
 
   namespace StencilComponents {
     interface IonSkeletonText {
+      /**
+       * Width for the element to render at. Default is 100% 
+       */
       'width': string;
     }
   }
@@ -6389,6 +6458,9 @@ declare global {
   }
   namespace JSXElements {
     export interface IonSkeletonTextAttributes extends HTMLAttributes {
+      /**
+       * Width for the element to render at. Default is 100% 
+       */
       'width'?: string;
     }
   }
@@ -6588,7 +6660,7 @@ declare global {
   namespace StencilComponents {
     interface IonSpinner {
       /**
-       * The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
+       * The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
        */
       'color': Color;
       /**
@@ -6596,7 +6668,7 @@ declare global {
        */
       'duration': number;
       /**
-       * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+       * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
        */
       'mode': Mode;
       /**
@@ -6630,7 +6702,7 @@ declare global {
   namespace JSXElements {
     export interface IonSpinnerAttributes extends HTMLAttributes {
       /**
-       * The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
+       * The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
        */
       'color'?: Color;
       /**
@@ -6638,7 +6710,7 @@ declare global {
        */
       'duration'?: number;
       /**
-       * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+       * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
        */
       'mode'?: Mode;
       /**
@@ -6663,6 +6735,9 @@ declare global {
        */
       'disabled': boolean;
       'isPane': (element: HTMLElement) => boolean;
+      /**
+       * Returns if the split pane is toggled or not 
+       */
       'isVisible': () => boolean;
       /**
        * When the split-pane should be shown. Can be a CSS media query expression, or a shortcut expression. Can also be a boolean expression.
@@ -6715,6 +6790,9 @@ declare global {
 
   namespace StencilComponents {
     interface IonStatusTap {
+      /**
+       * How long the scrolling action should take. 
+       */
       'duration': number;
     }
   }
@@ -6738,6 +6816,9 @@ declare global {
   }
   namespace JSXElements {
     export interface IonStatusTapAttributes extends HTMLAttributes {
+      /**
+       * How long the scrolling action should take. 
+       */
       'duration'?: number;
     }
   }
@@ -6748,7 +6829,13 @@ declare global {
 
   namespace StencilComponents {
     interface IonTabButton {
+      /**
+       * If the tab is selected or not 
+       */
       'selected': boolean;
+      /**
+       * The tab component for the button 
+       */
       'tab': HTMLIonTabElement;
     }
   }
@@ -6772,10 +6859,25 @@ declare global {
   }
   namespace JSXElements {
     export interface IonTabButtonAttributes extends HTMLAttributes {
+      /**
+       * Emitted when the tab button is loaded 
+       */
       'onIonTabButtonDidLoad'?: (event: CustomEvent<void>) => void;
+      /**
+       * Emitted when the tab button is destroyed 
+       */
       'onIonTabButtonDidUnload'?: (event: CustomEvent<void>) => void;
+      /**
+       * Emitted when the tab bar is clicked  
+       */
       'onIonTabbarClick'?: (event: CustomEvent<HTMLIonTabElement>) => void;
+      /**
+       * If the tab is selected or not 
+       */
       'selected'?: boolean;
+      /**
+       * The tab component for the button 
+       */
       'tab'?: HTMLIonTabElement;
     }
   }
@@ -6786,6 +6888,9 @@ declare global {
 
   namespace StencilComponents {
     interface IonTab {
+      /**
+       * If the tab is active or not 
+       */
       'active': boolean;
       /**
        * The badge for the tab.
@@ -6795,6 +6900,9 @@ declare global {
        * The badge color for the tab button.
        */
       'badgeColor': Color;
+      /**
+       * hidden 
+       */
       'btnId': string;
       /**
        * The component to display inside of the tab.
@@ -6805,6 +6913,9 @@ declare global {
        * If true, the user cannot interact with the tab. Defaults to `false`.
        */
       'disabled': boolean;
+      /**
+       * Get the Id for the tab 
+       */
       'getTabId': () => string | null;
       /**
        * The URL which will be used as the `href` within this tab's `<ion-tab-button>` anchor.
@@ -6826,6 +6937,9 @@ declare global {
        * If true, the tab will be selected. Defaults to `false`.
        */
       'selected': boolean;
+      /**
+       * Set the active component for the tab 
+       */
       'setActive': () => Promise<void>;
       /**
        * If true, the tab button is visible within the tabbar. Defaults to `true`.
@@ -6857,6 +6971,9 @@ declare global {
   }
   namespace JSXElements {
     export interface IonTabAttributes extends HTMLAttributes {
+      /**
+       * If the tab is active or not 
+       */
       'active'?: boolean;
       /**
        * The badge for the tab.
@@ -6866,6 +6983,9 @@ declare global {
        * The badge color for the tab button.
        */
       'badgeColor'?: Color;
+      /**
+       * hidden 
+       */
       'btnId'?: string;
       /**
        * The component to display inside of the tab.
@@ -6917,11 +7037,29 @@ declare global {
 
   namespace StencilComponents {
     interface IonTabbar {
+      /**
+       * If the tabbar should include the highlight on the active tab 
+       */
       'highlight': boolean;
+      /**
+       * The layout of the title and icons 
+       */
       'layout': TabbarLayout;
+      /**
+       * The placement of the tabbar in the app 
+       */
       'placement': TabbarPlacement;
+      /**
+       * If the tabbar is scrollable or not 
+       */
       'scrollable': boolean;
+      /**
+       * The selected tab component 
+       */
       'selectedTab': HTMLIonTabElement;
+      /**
+       * The tabs to render 
+       */
       'tabs': HTMLIonTabElement[];
       /**
        * If true, the tabbar will be translucent. Defaults to `false`.
@@ -6949,11 +7087,29 @@ declare global {
   }
   namespace JSXElements {
     export interface IonTabbarAttributes extends HTMLAttributes {
+      /**
+       * If the tabbar should include the highlight on the active tab 
+       */
       'highlight'?: boolean;
+      /**
+       * The layout of the title and icons 
+       */
       'layout'?: TabbarLayout;
+      /**
+       * The placement of the tabbar in the app 
+       */
       'placement'?: TabbarPlacement;
+      /**
+       * If the tabbar is scrollable or not 
+       */
       'scrollable'?: boolean;
+      /**
+       * The selected tab component 
+       */
       'selectedTab'?: HTMLIonTabElement;
+      /**
+       * The tabs to render 
+       */
       'tabs'?: HTMLIonTabElement[];
       /**
        * If true, the tabbar will be translucent. Defaults to `false`.
@@ -6969,17 +7125,29 @@ declare global {
   namespace StencilComponents {
     interface IonTabs {
       /**
-       * The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
+       * The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
        */
       'color': Color;
       'getRouteId': () => RouteID | undefined;
+      /**
+       * Get the currently selected tab
+       */
       'getSelected': () => HTMLIonTabElement | undefined;
+      /**
+       * Get the tab at the given index 
+       */
       'getTab': (tabOrIndex: string | number | HTMLIonTabElement) => HTMLIonTabElement | undefined;
       /**
        * A unique name for the tabs
        */
       'name': string;
+      /**
+       * If the tabs should be scrollable 
+       */
       'scrollable': boolean;
+      /**
+       * Index or the Tab instance, of the tab to select.
+       */
       'select': (tabOrIndex: number | HTMLIonTabElement) => Promise<boolean>;
       'setRouteId': (id: string) => Promise<RouteWrite>;
       /**
@@ -7002,6 +7170,9 @@ declare global {
        * If true, the tabs will be translucent. Note: In order to scroll content behind the tabs, the `fullscreen` attribute needs to be set on the content. Defaults to `false`.
        */
       'translucent': boolean;
+      /**
+       * If the tabs should use the router or not. If true, `selectedTab` does nothing.
+       */
       'useRouter': boolean;
     }
   }
@@ -7026,7 +7197,7 @@ declare global {
   namespace JSXElements {
     export interface IonTabsAttributes extends HTMLAttributes {
       /**
-       * The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
+       * The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
        */
       'color'?: Color;
       /**
@@ -7040,6 +7211,9 @@ declare global {
       'onIonNavDidChange'?: (event: CustomEvent<void>) => void;
       'onIonNavWillChange'?: (event: CustomEvent<void>) => void;
       'onIonNavWillLoad'?: (event: CustomEvent<void>) => void;
+      /**
+       * If the tabs should be scrollable 
+       */
       'scrollable'?: boolean;
       /**
        * If true, the tabbar
@@ -7061,6 +7235,9 @@ declare global {
        * If true, the tabs will be translucent. Note: In order to scroll content behind the tabs, the `fullscreen` attribute needs to be set on the content. Defaults to `false`.
        */
       'translucent'?: boolean;
+      /**
+       * If the tabs should use the router or not. If true, `selectedTab` does nothing.
+       */
       'useRouter'?: boolean;
     }
   }
@@ -7105,11 +7282,11 @@ declare global {
   namespace StencilComponents {
     interface IonText {
       /**
-       * The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
+       * The color to use for the text. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
        */
       'color': Color;
       /**
-       * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+       * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
        */
       'mode': Mode;
     }
@@ -7135,11 +7312,11 @@ declare global {
   namespace JSXElements {
     export interface IonTextAttributes extends HTMLAttributes {
       /**
-       * The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
+       * The color to use for the text. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
        */
       'color'?: Color;
       /**
-       * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+       * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
        */
       'mode'?: Mode;
     }
@@ -7371,7 +7548,13 @@ declare global {
 
   namespace StencilComponents {
     interface IonTitle {
+      /**
+       * The color to use for the title. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+       */
       'color': Color;
+      /**
+       * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
+       */
       'mode': Mode;
     }
   }
@@ -7395,7 +7578,13 @@ declare global {
   }
   namespace JSXElements {
     export interface IonTitleAttributes extends HTMLAttributes {
+      /**
+       * The color to use for the title. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+       */
       'color'?: Color;
+      /**
+       * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
+       */
       'mode'?: Mode;
     }
   }
@@ -7406,8 +7595,17 @@ declare global {
 
   namespace StencilComponents {
     interface IonToastController {
+      /**
+       * Create a toast overlay with toast options.
+       */
       'create': (opts?: ToastOptions | undefined) => Promise<HTMLIonToastElement | null>;
+      /**
+       * Dismiss the open toast overlay.
+       */
       'dismiss': (data?: any, role?: string | undefined, toastId?: number) => Promise<void>;
+      /**
+       * Get the most recently opened toast overlay.
+       */
       'getTop': () => HTMLIonToastElement;
     }
   }
@@ -7692,11 +7890,11 @@ declare global {
   namespace StencilComponents {
     interface IonToolbar {
       /**
-       * The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
+       * The color to use for the background. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
        */
       'color': Color;
       /**
-       * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+       * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
        */
       'mode': Mode;
       /**
@@ -7726,11 +7924,11 @@ declare global {
   namespace JSXElements {
     export interface IonToolbarAttributes extends HTMLAttributes {
       /**
-       * The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
+       * The color to use for the background. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
        */
       'color'?: Color;
       /**
-       * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+       * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
        */
       'mode'?: Mode;
       /**
diff --git a/core/src/components/popover/popover.tsx b/core/src/components/popover/popover.tsx
index 16bd90c805..71b87b723b 100644
--- a/core/src/components/popover/popover.tsx
+++ b/core/src/components/popover/popover.tsx
@@ -39,14 +39,12 @@ export class Popover implements OverlayInterface {
   /**
    * The color to use from your Sass `$colors` map.
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-   * For more information, see [Theming your App](/docs/theming/theming-your-app).
    */
   @Prop() color?: Color;
 
   /**
    * The mode determines which platform styles to use.
    * Possible values are: `"ios"` or `"md"`.
-   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
    */
   @Prop() mode!: Mode;
 
diff --git a/core/src/components/popover/readme.md b/core/src/components/popover/readme.md
index a02b5c370e..7315b14b30 100644
--- a/core/src/components/popover/readme.md
+++ b/core/src/components/popover/readme.md
@@ -22,7 +22,6 @@ string
 
 The color to use from your Sass `$colors` map.
 Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-For more information, see [Theming your App](/docs/theming/theming-your-app).
 
 
 #### component
@@ -91,7 +90,6 @@ string
 
 The mode determines which platform styles to use.
 Possible values are: `"ios"` or `"md"`.
-For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
 
 
 #### overlayId
@@ -128,7 +126,6 @@ string
 
 The color to use from your Sass `$colors` map.
 Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-For more information, see [Theming your App](/docs/theming/theming-your-app).
 
 
 #### component
@@ -197,7 +194,6 @@ string
 
 The mode determines which platform styles to use.
 Possible values are: `"ios"` or `"md"`.
-For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
 
 
 #### overlay-id
diff --git a/core/src/components/refresher/readme.md b/core/src/components/refresher/readme.md
index e0a8331032..26ce10f33c 100644
--- a/core/src/components/refresher/readme.md
+++ b/core/src/components/refresher/readme.md
@@ -9,9 +9,6 @@ operation has completed and the refreshing should end, call `complete()` on the
 refresher.
 
 
-```html
-```
-
 
 <!-- Auto Generated Below -->
 
diff --git a/core/src/components/reorder-group/readme.md b/core/src/components/reorder-group/readme.md
index abd5d40ddf..7e71c598e2 100644
--- a/core/src/components/reorder-group/readme.md
+++ b/core/src/components/reorder-group/readme.md
@@ -1,119 +1,6 @@
 # ion-reorder-group
 
-ReorderGroup is a wrapper component for items with the Reorder element.
-
-
-
-## Grouping Items
-
-All reorderable items must be grouped in the same element. If an item
-should not be reordered, it shouldn't be included in this group. For
-example, the following code works because the items are grouped in the
-`<ion-list>`:
-
- ```html
- <ion-list reorder="true">
-   <ion-item *ngFor="let item of items">{% raw %}{{ item }}{% endraw %}</ion-item>
- </ion-list>
- ```
-
-However, the below list includes a header that shouldn't be reordered:
-
- ```html
- <ion-list reorder="true">
-   <ion-list-header>Header</ion-list-header>
-   <ion-item *ngFor="let item of items">{% raw %}{{ item }}{% endraw %}</ion-item>
- </ion-list>
- ```
-
-In order to mix different sets of items, `ion-item-group` should be used to
-group the reorderable items:
-
- ```html
- <ion-list>
-   <ion-list-header>Header</ion-list-header>
-   <ion-item-group reorder="true">
-     <ion-item *ngFor="let item of items">{% raw %}{{ item }}{% endraw %}</ion-item>
-   </ion-item-group>
- </ion-list>
- ```
-
-It's important to note that in this example, the `[reorder]` directive is applied to
-the `<ion-item-group>` instead of the `<ion-list>`. This way makes it possible to
-mix items that should and shouldn't be reordered.
-
-
-## Implementing the Reorder Function
-
-When the item is dragged and dropped into the new position, the `(ionItemReorder)` event is
-emitted. This event provides the initial index (from) and the new index (to) of the reordered
-item. For example, if the first item is dragged to the fifth position, the event will emit
-`{from: 0, to: 4}`. Note that the index starts at zero.
-
-A function should be called when the event is emitted that handles the reordering of the items.
-See usage below for some examples.
-
-
-```html
-<ion-list>
-  <ion-list-header>Header</ion-list-header>
-  <ion-item-group reorder="true" (ionItemReorder)="reorderItems($event)">
-    <ion-item *ngFor="let item of items">{% raw %}{{ item }}{% endraw %}</ion-item>
-  </ion-item-group>
-</ion-list>
-```
-
-```ts
-class MyComponent {
-  items = [];
-
-  constructor() {
-    for (let x = 0; x < 5; x++) {
-      this.items.push(x);
-    }
-  }
-
-  reorderItems(indexes) {
-    let element = this.items[indexes.from];
-    this.items.splice(indexes.from, 1);
-    this.items.splice(indexes.to, 0, element);
-  }
-}
-```
-
-Ionic also provides a helper function called `reorderArray` to
-reorder the array of items. This can be used instead:
-
-```ts
-import { reorderArray } from 'ionic-angular';
-
-class MyComponent {
-  items = [];
-
-  constructor() {
-    for (let x = 0; x < 5; x++) {
-      this.items.push(x);
-    }
-  }
-
-  reorderItems(indexes) {
-    this.items = reorderArray(this.items, indexes);
-  }
-}
-```
-
-Alternatively the helper function can be executed inside a template:
-
-```html
-<ion-list>
-  <ion-list-header>Header</ion-list-header>
-  <ion-item-group reorder="true" (ionItemReorder)="$event.applyTo(items)">
-    <ion-item *ngFor="let item of items">{% raw %}{{ item }}{% endraw %}</ion-item>
-  </ion-item-group>
-</ion-list>
-```
-
-
+ReorderGroup is a wrapper component for items with the Reorder element. For more information, see the [Reorder docs](../reorder/)
 
 <!-- Auto Generated Below -->
 
diff --git a/core/src/components/reorder/readme.md b/core/src/components/reorder/readme.md
index de4165842d..7cdb5100c2 100644
--- a/core/src/components/reorder/readme.md
+++ b/core/src/components/reorder/readme.md
@@ -1,6 +1,6 @@
 # ion-reorder
 
-Reorder adds the ability to change an item's order in a group. It can be used within an ion-list or ion-reorder-group to provide a visual drag and drop interface.
+Reorder is a component that allows an item to be dragged to change it's order. It can be used within an ion-reorder-group to provide a visual drag and drop interface.
 
 
 <!-- Auto Generated Below -->
diff --git a/core/src/components/reorder/usage/javascript.md b/core/src/components/reorder/usage/javascript.md
new file mode 100644
index 0000000000..be27939097
--- /dev/null
+++ b/core/src/components/reorder/usage/javascript.md
@@ -0,0 +1,88 @@
+```html
+<ion-content>
+  <ion-list>
+    <ion-reorder-group>
+
+      <ion-item>
+        <ion-label>
+          Item 1
+        </ion-label>
+        <ion-reorder slot="end"></ion-reorder>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>
+          Item 2
+        </ion-label>
+        <ion-reorder slot="end"></ion-reorder>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>
+          Item 3 (default ion-reorder slot="start")
+        </ion-label>
+        <ion-reorder slot="start"></ion-reorder>
+      </ion-item>
+
+      <ion-item color="secondary">
+        <ion-label>
+          Item 4 (default ion-reorder slot="start")
+        </ion-label>
+        <ion-reorder slot="start"></ion-reorder>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>
+          Item 5 (custom ion-reorder)
+        </ion-label>
+        <ion-reorder slot="end">
+          <ion-icon name="pizza"></ion-icon>
+        </ion-reorder>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>
+          Item 6 (custom ion-reorder)
+        </ion-label>
+        <ion-reorder slot="end">
+          <ion-icon name="pizza"></ion-icon>
+        </ion-reorder>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>
+          Item 7 (custom ion-reorder slot="start")
+        </ion-label>
+        <ion-reorder slot="start">
+          <ion-icon name="pizza"></ion-icon>
+        </ion-reorder>
+      </ion-item>
+
+      <ion-reorder>
+        <ion-item>
+          <ion-label>
+            Item 8 (the whole item can be dragged)
+          </ion-label>
+          </ion-item>
+      </ion-reorder>
+
+      <ion-reorder>
+        <ion-item>
+          <ion-label>
+            Item 9 (the whole item can be dragged)
+          </ion-label>
+          </ion-item>
+      </ion-reorder>
+
+      <ion-reorder>
+        <ion-item>
+          <ion-label>
+            Item 10 (the whole item can be dragged)
+          </ion-label>
+          </ion-item>
+      </ion-reorder>
+
+    </ion-reorder-group>
+  </ion-list>
+</ion-content>
+```
diff --git a/core/src/components/ripple-effect/readme.md b/core/src/components/ripple-effect/readme.md
index e14c019739..daeb7baf51 100644
--- a/core/src/components/ripple-effect/readme.md
+++ b/core/src/components/ripple-effect/readme.md
@@ -1,5 +1,7 @@
 # ion-button-effect
 
+RippleEffect is component that adds the Material Design button ripple to any element.
+
 
 
 <!-- Auto Generated Below -->
@@ -23,6 +25,8 @@ boolean
 
 #### addRipple()
 
+Adds the ripple effect to the parent elment
+
 
 
 ----------------------------------------------
diff --git a/core/src/components/ripple-effect/ripple-effect.tsx b/core/src/components/ripple-effect/ripple-effect.tsx
index 70a45a5d9c..c81a6f006e 100644
--- a/core/src/components/ripple-effect/ripple-effect.tsx
+++ b/core/src/components/ripple-effect/ripple-effect.tsx
@@ -15,6 +15,7 @@ export class RippleEffect {
   @Prop({context: 'enableListener'}) enableListener!: EventListenerEnable;
   @Prop({ context: 'document' }) doc!: Document;
 
+  /** @hidden */
   @Prop() tapClick = false;
   @Watch('tapClick')
   tapClickChanged(tapClick: boolean) {
@@ -47,6 +48,9 @@ export class RippleEffect {
     this.tapClickChanged(this.tapClick);
   }
 
+  /**
+   * Adds the ripple effect to the parent elment
+   */
   @Method()
   addRipple(pageX: number, pageY: number) {
     let x: number, y: number, size: number;
diff --git a/core/src/components/route-redirect/readme.md b/core/src/components/route-redirect/readme.md
index 48bde39c8d..f5872c9c06 100644
--- a/core/src/components/route-redirect/readme.md
+++ b/core/src/components/route-redirect/readme.md
@@ -2,6 +2,8 @@
 
 A redirect router can only be used in the scope of `ion-router` as a direct children of it.
 
+> Note: this is only meant for vanilla JavaScript project. For Angular projects, use `ion-router-outlet` and the Angular router.
+
 This route has only two configurable values:
  - `from`
  - `to`
diff --git a/core/src/components/route/readme.md b/core/src/components/route/readme.md
index 5eb5f574cb..0c924c622c 100644
--- a/core/src/components/route/readme.md
+++ b/core/src/components/route/readme.md
@@ -1,6 +1,8 @@
 # ion-route
 
+Router is a component that can take a component, and render it when the Browser URl matches the url prop
 
+> Note: this is only meant for vanilla JavaScript project. For Angular projects, use `ion-router-outlet` and the Angular router.
 
 <!-- Auto Generated Below -->
 
diff --git a/core/src/components/router-outlet/readme.md b/core/src/components/router-outlet/readme.md
index fd0deb9555..f5cea03c4c 100644
--- a/core/src/components/router-outlet/readme.md
+++ b/core/src/components/router-outlet/readme.md
@@ -1,5 +1,11 @@
 # ion-router-outlet
 
+RouterOutlet is a component used in routing within an Angular app. RouterOutlet behaves the same way as Angular's built-in RouterOutlet component, but contains the logic needed for animating views in and out.
+
+
+> Note: this is only meant for Angular projects. For vanilla JavaScript, use `ion-router` and `ion-route` instead.
+
+While RouterOutlet has methods for navigating around, it's recommended to use the navigation methods in Angular's router.
 
 
 <!-- Auto Generated Below -->
@@ -57,9 +63,13 @@ boolean
 
 #### getRouteId()
 
+Returns the ID for the current route
+
 
 #### setRoot()
 
+Set the root component for the given navigation stack
+
 
 #### setRouteId()
 
diff --git a/core/src/components/router-outlet/route-outlet.tsx b/core/src/components/router-outlet/route-outlet.tsx
index d4522345ea..4928e0fbf5 100644
--- a/core/src/components/router-outlet/route-outlet.tsx
+++ b/core/src/components/router-outlet/route-outlet.tsx
@@ -41,6 +41,9 @@ export class RouterOutlet implements NavOutlet {
     this.activeEl = this.activeComponent = undefined;
   }
 
+  /**
+   * Set the root component for the given navigation stack
+   */
   @Method()
   async setRoot(component: ComponentRef, params?: ComponentProps, opts?: RouterOutletOptions): Promise<boolean> {
     if (this.isTransitioning || this.activeComponent === component) {
@@ -62,6 +65,7 @@ export class RouterOutlet implements NavOutlet {
     return true;
   }
 
+  /** @hidden */
   @Method()
   async commit(enteringEl: HTMLElement, leavingEl: HTMLElement|undefined, opts?: RouterOutletOptions): Promise<boolean> {
     // isTransitioning acts as a lock to prevent reentering
@@ -93,6 +97,7 @@ export class RouterOutlet implements NavOutlet {
     return true;
   }
 
+  /** @hidden */
   @Method()
   async setRouteId(id: string, params: any, direction: number): Promise<RouteWrite> {
     const changed = await this.setRoot(id, params, {
@@ -105,6 +110,7 @@ export class RouterOutlet implements NavOutlet {
     };
   }
 
+  /** Returns the ID for the current route */
   @Method()
   getRouteId(): RouteID|undefined {
     const active = this.activeEl;
diff --git a/core/src/components/router/readme.md b/core/src/components/router/readme.md
index 193012dd6c..ab019dcd6f 100644
--- a/core/src/components/router/readme.md
+++ b/core/src/components/router/readme.md
@@ -1,6 +1,9 @@
 # ion-router
 
-You should have one single `ion-router` component in your project. This component controls all interactions with the browser history and it aggregates updates through an event system.
+Router is a component for handling routing inside vanilla JavaScript projects. For Angular projects, use `ion-router-outlet` and the Angular router.
+
+Apps should have a single `ion-router` component in the codebase.
+This component controls all interactions with the browser history and it aggregates updates through an event system.
 
 `ion-router` is just a URL coordinator for the navigation outlets of ionic: `ion-nav` and `ion-tabs`.
 
@@ -10,69 +13,6 @@ In order to configure this relationship between components (to load/select) and
 
 If you're using Angular, please see [ion-router-outlet](../router-outlet) instead.
 
-## Ecosystem of components
-
-### Configuration
-
-- <ion-router>
-- <ion-route>
-- <ion-router-redirect>
-
-### Outlets
-
-- <ion-nav>
-- <ion-router-outlet>
-- <ion-tab>
-
-
-## Tree of routes
-
-The way to structure navigation in an ionic app is by nesting `ion-nav`s and `ion-tabs`, for example, you have an `ion-nav` at the root, where you "push" an page that has an `ion-tabs`, then inside each tab (`ion-tab`) you might have another `ion-nav` since you might want independent navigation for each tab.
-
-Obviously this structure is app-dependent, but in any case, nesting router-outlets (ion-nav or ion-tabs) is a common pattern. This is why the routes defined in `ion-router` are not a list of routes, but an tree.
-
-Any route can have a list of nested routes:
-
-```html
-<ion-router>
-  <ion-route component="page-tabs">
-    <ion-route url="/schedule" component="tab-schedule">
-      <ion-route component="page-schedule"></ion-route>
-      <ion-route url="/session/:sessionId" component="page-session"></ion-route>
-    </ion-route>
-
-    <ion-route url="/speakers" component="tab-speaker">
-      <ion-route component="page-speaker-list"></ion-route>
-      <ion-route url="/session/:sessionId" component="page-session"></ion-route>
-      <ion-route url="/:speakerId" component="page-speaker-detail"></ion-route>
-    </ion-route>
-
-    <ion-route url="/map" component="page-map"></ion-route>
-    <ion-route url="/about" component="page-about"></ion-route>
-  </ion-route>
-
-  <ion-route url="/tutorial" component="page-tutorial"></ion-route>
-  <ion-route url="/login" component="page-login"></ion-route>
-  <ion-route url="/account" component="page-account"></ion-route>
-  <ion-route url="/signup" component="page-signup"></ion-route>
-  <ion-route url="/support" component="page-support"></ion-route>
-</ion-router>
-
-```
-
-This hierarchy of routes matches the hierarchy of how `ion-tab`s and `ion-nav`s are nested together.
-
-## Router configuration
-
-## Router guards and redirections
-
-## Navigating Statically
-
-## Navigating Dynamically
-
-## URL params and data passing
-
-## JSX reactiviness
 
 
 <!-- Auto Generated Below -->
@@ -87,8 +27,6 @@ string
 By default `ion-router` will match the routes at the root path ("/").
 That can be changed when
 
-T
-
 
 #### useHash
 
@@ -117,8 +55,6 @@ string
 By default `ion-router` will match the routes at the root path ("/").
 That can be changed when
 
-T
-
 
 #### use-hash
 
@@ -142,9 +78,13 @@ By default, this property is `true`, change to `false` to allow hash-less URLs.
 
 #### ionRouteDidChange
 
+Emitted when the route had changed
+
 
 #### ionRouteWillChange
 
+Event emitted when the route is about to change
+
 
 ## Methods
 
@@ -156,6 +96,8 @@ By default, this property is `true`, change to `false` to allow hash-less URLs.
 
 #### push()
 
+Navigate to the specified URL
+
 
 
 ----------------------------------------------
diff --git a/core/src/components/router/router.tsx b/core/src/components/router/router.tsx
index 3155db25cb..f4fdba0ce2 100644
--- a/core/src/components/router/router.tsx
+++ b/core/src/components/router/router.tsx
@@ -29,7 +29,6 @@ export class Router {
    * By default `ion-router` will match the routes at the root path ("/").
    * That can be changed when
    *
-   * T
    */
   @Prop() root = '/';
 
@@ -49,7 +48,14 @@ export class Router {
    */
   @Prop() useHash = true;
 
+  /**
+   * Event emitted when the route is about to change
+   */
   @Event() ionRouteWillChange!: EventEmitter<RouterEventDetail>;
+
+  /**
+   * Emitted when the route had changed
+   */
   @Event() ionRouteDidChange!: EventEmitter<RouterEventDetail>;
 
   async componentWillLoad() {
@@ -72,6 +78,7 @@ export class Router {
     return this.writeNavStateRoot(path, direction);
   }
 
+  /** Navigate to the specified URL */
   @Method()
   push(url: string, direction: RouterDirection = 'forward') {
     const path = parsePath(url);
@@ -82,6 +89,7 @@ export class Router {
     return this.writeNavStateRoot(path, intent);
   }
 
+  /** @hidden */
   @Method()
   printDebug() {
     console.debug('CURRENT PATH', this.getPath());
@@ -90,6 +98,7 @@ export class Router {
     printRedirects(readRedirects(this.el));
   }
 
+  /** @hidden */
   @Method()
   async navChanged(intent: RouterIntent): Promise<boolean> {
     if (this.busy) {
diff --git a/core/src/components/router/usage/javascript.md b/core/src/components/router/usage/javascript.md
new file mode 100644
index 0000000000..857de4c164
--- /dev/null
+++ b/core/src/components/router/usage/javascript.md
@@ -0,0 +1,26 @@
+```html
+<ion-router>
+  <ion-route component="page-tabs">
+    <ion-route url="/schedule" component="tab-schedule">
+      <ion-route component="page-schedule"></ion-route>
+      <ion-route url="/session/:sessionId" component="page-session"></ion-route>
+    </ion-route>
+
+    <ion-route url="/speakers" component="tab-speaker">
+      <ion-route component="page-speaker-list"></ion-route>
+      <ion-route url="/session/:sessionId" component="page-session"></ion-route>
+      <ion-route url="/:speakerId" component="page-speaker-detail"></ion-route>
+    </ion-route>
+
+    <ion-route url="/map" component="page-map"></ion-route>
+    <ion-route url="/about" component="page-about"></ion-route>
+  </ion-route>
+
+  <ion-route url="/tutorial" component="page-tutorial"></ion-route>
+  <ion-route url="/login" component="page-login"></ion-route>
+  <ion-route url="/account" component="page-account"></ion-route>
+  <ion-route url="/signup" component="page-signup"></ion-route>
+  <ion-route url="/support" component="page-support"></ion-route>
+</ion-router>
+
+```
diff --git a/core/src/components/scroll/readme.md b/core/src/components/scroll/readme.md
index 702d179116..e2ed7fcc99 100644
--- a/core/src/components/scroll/readme.md
+++ b/core/src/components/scroll/readme.md
@@ -1,5 +1,6 @@
 # ion-scroll
 
+Scroll is a low-level component for arbitrary scrolling areas. It's used internally by Content.
 
 
 <!-- Auto Generated Below -->
@@ -20,11 +21,15 @@ Note, the does not disable the system bounce on iOS. That is an OS level setting
 
 string
 
+The mode for component.
+
 
 #### scrollEvents
 
 boolean
 
+If true, the component will emit scroll events
+
 
 ## Attributes
 
@@ -41,11 +46,15 @@ Note, the does not disable the system bounce on iOS. That is an OS level setting
 
 string
 
+The mode for component.
+
 
 #### scroll-events
 
 boolean
 
+If true, the component will emit scroll events
+
 
 ## Events
 
@@ -69,15 +78,23 @@ Emitted when the scroll has started.
 
 #### scrollByPoint()
 
+Scroll by a specified X/Y distance in the component
+
 
 #### scrollToBottom()
 
+Scroll to the bottom of the component
+
 
 #### scrollToPoint()
 
+Scroll to a specified X/Y location in the component
+
 
 #### scrollToTop()
 
+Scroll to the top of the component
+
 
 
 ----------------------------------------------
diff --git a/core/src/components/scroll/scroll.tsx b/core/src/components/scroll/scroll.tsx
index aef779fb13..843cdfefff 100644
--- a/core/src/components/scroll/scroll.tsx
+++ b/core/src/components/scroll/scroll.tsx
@@ -25,6 +25,7 @@ export class Scroll {
   @Prop({ context: 'queue' }) queue!: QueueController;
   @Prop({ context: 'window' }) win!: Window;
 
+  /** The mode for component. */
   @Prop() mode!: Mode;
 
 
@@ -35,6 +36,7 @@ export class Scroll {
    */
   @Prop({ mutable: true }) forceOverscroll?: boolean;
 
+  /** If true, the component will emit scroll events */
   @Prop() scrollEvents = false;
 
   /**
@@ -109,11 +111,13 @@ export class Scroll {
     }
   }
 
+  /** Scroll to the top of the component */
   @Method()
   scrollToTop(duration: number): Promise<void> {
     return this.scrollToPoint(0, 0, duration);
   }
 
+  /** Scroll to the bottom of the component */
   @Method()
   scrollToBottom(duration: number): Promise<void> {
     const y = (this.el)
@@ -123,11 +127,13 @@ export class Scroll {
     return this.scrollToPoint(0, y, duration);
   }
 
+  /** Scroll by a specified X/Y distance in the component */
   @Method()
   scrollByPoint(x: number, y: number, duration: number, done?: Function): Promise<any> {
     return this.scrollToPoint(x + this.el.scrollLeft, y + this.el.scrollTop, duration, done);
   }
 
+  /** Scroll to a specified X/Y location in the component */
   @Method()
   scrollToPoint(x: number, y: number, duration: number, done?: Function): Promise<any> {
     // scroll animation loop w/ easing
diff --git a/core/src/components/searchbar/readme.md b/core/src/components/searchbar/readme.md
index 8db6cca9cf..3eae56422f 100644
--- a/core/src/components/searchbar/readme.md
+++ b/core/src/components/searchbar/readme.md
@@ -2,39 +2,9 @@
 
 Searchbars represent a text field that can be used to search through a collection. They can be displayed inside of a toolbar or the main content.
 
-A searchbar should be used instead of an input to search lists. A clear button is displayed on input in the searchbar's text field. Clicking on the clear button will erase the text field and remain focused in the input. A cancel button can be enabled which will clear the input and remove focus.
+A Searchbar should be used instead of an input to search lists. A clear button is displayed on input in the searchbar's text field. Clicking on the clear button will erase the text field and the input focused. A cancel button can be enabled which will clear the input and remove focus.
 
 
-```html
-<!-- Default Searchbar -->
-<ion-searchbar></ion-searchbar>
-
-<!-- Searchbar with danger color -->
-<ion-searchbar color="danger"></ion-searchbar>
-
-<!-- Searchbar with value -->
-<ion-searchbar value="Ionic"></ion-searchbar>
-
-<!-- Searchbar with telephone type -->
-<ion-searchbar type="tel"></ion-searchbar>
-
-<!-- Searchbar with a cancel button and custom cancel button text -->
-<ion-searchbar show-cancel-button cancel-button-text="Custom Cancel"></ion-searchbar>
-
-<!-- Searchbar with a custom debounce -->
-<ion-searchbar debounce="500"></ion-searchbar>
-
-<!-- Animated Searchbar -->
-<ion-searchbar animated></ion-searchbar>
-
-<!-- Searchbar with a placeholder -->
-<ion-searchbar placeholder="Filter Schedules"></ion-searchbar>
-
-<!-- Searchbar in a Toolbar -->
-<ion-toolbar>
-  <ion-searchbar></ion-searchbar>
-</ion-toolbar>
-```
 
 <!-- Auto Generated Below -->
 
diff --git a/core/src/components/searchbar/usage/javascript.md b/core/src/components/searchbar/usage/javascript.md
new file mode 100644
index 0000000000..4a1f947e40
--- /dev/null
+++ b/core/src/components/searchbar/usage/javascript.md
@@ -0,0 +1,30 @@
+```html
+<!-- Default Searchbar -->
+<ion-searchbar></ion-searchbar>
+
+<!-- Searchbar with danger color -->
+<ion-searchbar color="danger"></ion-searchbar>
+
+<!-- Searchbar with value -->
+<ion-searchbar value="Ionic"></ion-searchbar>
+
+<!-- Searchbar with telephone type -->
+<ion-searchbar type="tel"></ion-searchbar>
+
+<!-- Searchbar with a cancel button and custom cancel button text -->
+<ion-searchbar show-cancel-button cancel-button-text="Custom Cancel"></ion-searchbar>
+
+<!-- Searchbar with a custom debounce -->
+<ion-searchbar debounce="500"></ion-searchbar>
+
+<!-- Animated Searchbar -->
+<ion-searchbar animated></ion-searchbar>
+
+<!-- Searchbar with a placeholder -->
+<ion-searchbar placeholder="Filter Schedules"></ion-searchbar>
+
+<!-- Searchbar in a Toolbar -->
+<ion-toolbar>
+  <ion-searchbar></ion-searchbar>
+</ion-toolbar>
+```
diff --git a/core/src/components/segment-button/usage/angular.md b/core/src/components/segment-button/usage/angular.md
index 0a6b99638a..ba97fa2edd 100644
--- a/core/src/components/segment-button/usage/angular.md
+++ b/core/src/components/segment-button/usage/angular.md
@@ -1,4 +1,3 @@
-
 ```html
 <!-- Segment buttons with text and click listeners -->
 <ion-segment>
diff --git a/core/src/components/segment-button/usage/javascript.md b/core/src/components/segment-button/usage/javascript.md
index 3212936c5f..72407c28df 100644
--- a/core/src/components/segment-button/usage/javascript.md
+++ b/core/src/components/segment-button/usage/javascript.md
@@ -1,4 +1,3 @@
-
 ```html
 <!-- Segment buttons with text -->
 <ion-segment>
diff --git a/core/src/components/select-option/readme.md b/core/src/components/select-option/readme.md
index 0f5579938a..8227963c88 100644
--- a/core/src/components/select-option/readme.md
+++ b/core/src/components/select-option/readme.md
@@ -1,5 +1,6 @@
 # ion-select-option
 
+SelectOption is a component that is a child element of Select. For more information, see the [Select docs](../select).
 
 
 <!-- Auto Generated Below -->
diff --git a/core/src/components/select-popover/readme.md b/core/src/components/select-popover/readme.md
index f2e34d7f2a..ef325290cf 100644
--- a/core/src/components/select-popover/readme.md
+++ b/core/src/components/select-popover/readme.md
@@ -1,5 +1,6 @@
 # ion-select-popover
 
+SelectPopover is an internal component that is used for create the popover interface, from a Select component.
 
 
 <!-- Auto Generated Below -->
@@ -11,21 +12,29 @@
 
 string
 
+Header text for the popover
+
 
 #### message
 
 string
 
+Text for popover body
+
 
 #### options
 
 SelectPopoverOption[]
 
+Array of options for the popover
+
 
 #### subHeader
 
 string
 
+Subheader text for the popover
+
 
 ## Attributes
 
@@ -33,21 +42,29 @@ string
 
 string
 
+Header text for the popover
+
 
 #### message
 
 string
 
+Text for popover body
+
 
 #### options
 
 
 
+Array of options for the popover
+
 
 #### sub-header
 
 string
 
+Subheader text for the popover
+
 
 
 ----------------------------------------------
diff --git a/core/src/components/select-popover/select-popover.tsx b/core/src/components/select-popover/select-popover.tsx
index 4bb9855e80..6b7bd5ba1f 100644
--- a/core/src/components/select-popover/select-popover.tsx
+++ b/core/src/components/select-popover/select-popover.tsx
@@ -11,12 +11,16 @@ import { Mode, SelectPopoverOption } from '../../interface';
 export class SelectPopover {
   mode!: Mode;
 
+  /** Header text for the popover */
   @Prop() header?: string;
 
+  /** Subheader text for the popover */
   @Prop() subHeader?: string;
 
+  /** Text for popover body */
   @Prop() message?: string;
 
+  /** Array of options for the popover */
   @Prop() options: SelectPopoverOption[] = [];
 
   @Listen('ionSelect')
diff --git a/core/src/components/skeleton-text/readme.md b/core/src/components/skeleton-text/readme.md
index 4df3d084d9..4fb8aad18c 100644
--- a/core/src/components/skeleton-text/readme.md
+++ b/core/src/components/skeleton-text/readme.md
@@ -1,5 +1,6 @@
 # ion-skeleton-text
 
+Skeleton Text is a component for rendering placeholder content. The element will render a gray block at the specified width.
 
 
 <!-- Auto Generated Below -->
@@ -11,6 +12,8 @@
 
 string
 
+Width for the element to render at. Default is 100%
+
 
 ## Attributes
 
@@ -18,6 +21,8 @@ string
 
 string
 
+Width for the element to render at. Default is 100%
+
 
 
 ----------------------------------------------
diff --git a/core/src/components/skeleton-text/skeleton-text.tsx b/core/src/components/skeleton-text/skeleton-text.tsx
index eea5acfca8..9163a28082 100644
--- a/core/src/components/skeleton-text/skeleton-text.tsx
+++ b/core/src/components/skeleton-text/skeleton-text.tsx
@@ -1,6 +1,5 @@
 import { Component, Prop } from '@stencil/core';
 
-
 @Component({
   tag: 'ion-skeleton-text',
   styleUrls: {
@@ -12,9 +11,11 @@ import { Component, Prop } from '@stencil/core';
   }
 })
 export class SkeletonText {
+
+  /** Width for the element to render at. Default is 100% */
   @Prop() width = '100%';
 
-  render () {
-    return <span style={{width: this.width}}>&nbsp;</span>;
+  render() {
+    return <span style={{ width: this.width }}>&nbsp;</span>;
   }
 }
diff --git a/core/src/components/skeleton-text/usage/javascript.md b/core/src/components/skeleton-text/usage/javascript.md
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/core/src/components/slides/readme.md b/core/src/components/slides/readme.md
index 01a2327e40..4df66643f2 100644
--- a/core/src/components/slides/readme.md
+++ b/core/src/components/slides/readme.md
@@ -4,10 +4,8 @@ The Slides component is a multi-section container. Each section can be swiped
 or dragged between. It contains any number of [Slide](../Slide) components.
 
 
-```
 Adopted from Swiper.js:
-The most modern mobile touch slider and framework with
-hardware accelerated transitions.
+The most modern mobile touch slider and framework with hardware accelerated transitions.
 
 http://www.idangero.us/swiper/
 
@@ -16,7 +14,6 @@ The iDangero.us
 http://www.idangero.us/
 
 Licensed under MIT
-```
 
 
 <!-- Auto Generated Below -->
diff --git a/core/src/components/slides/slides.tsx b/core/src/components/slides/slides.tsx
index 09c137188f..f984f7e76e 100644
--- a/core/src/components/slides/slides.tsx
+++ b/core/src/components/slides/slides.tsx
@@ -1,12 +1,4 @@
-import {
-  Component,
-  Element,
-  Event,
-  EventEmitter,
-  Method,
-  Prop,
-  Watch
-} from '@stencil/core';
+import { Component, Element, Event, EventEmitter, Method, Prop, Watch } from '@stencil/core';
 import { Swiper }  from './vendor/swiper.js';
 @Component({
   tag: 'ion-slides',
diff --git a/core/src/components/slides/usage/angular.md b/core/src/components/slides/usage/angular.md
new file mode 100644
index 0000000000..55b037d549
--- /dev/null
+++ b/core/src/components/slides/usage/angular.md
@@ -0,0 +1,26 @@
+```typescript
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'slides-example',
+  template: `
+    <ion-slides pager="true" [options]="slideOpts">
+      <ion-slide>
+        <h1>Slide 1</h1>
+      </ion-slide>
+      <ion-slide>
+        <h1>Slide 2</h1>
+      </ion-slide>
+      <ion-slide>
+        <h1>Slide 3</h1>
+      </ion-slide>
+    </ion-slides>
+  `
+})
+export class SlideExample {
+  slideOpts = {
+    effect: 'flip'
+  };
+  constructor() {}
+}
+```
diff --git a/core/src/components/slides/usage/javascript.md b/core/src/components/slides/usage/javascript.md
new file mode 100644
index 0000000000..d62f079d94
--- /dev/null
+++ b/core/src/components/slides/usage/javascript.md
@@ -0,0 +1,23 @@
+```html
+  <ion-slides pager="true">
+
+    <ion-slide>
+      <h1>Slide 1</h1>
+    </ion-slide>
+
+    <ion-slide>
+      <h1>Slide 2</h1>
+    </ion-slide>
+
+    <ion-slide>
+      <h1>Slide 3</h1>
+    </ion-slide>
+  </ion-slides>
+```
+
+```javascript
+var slides = document.querySelector('ion-slides');
+slides.options = {
+  effect: 'flip'
+}
+```
diff --git a/core/src/components/spinner/readme.md b/core/src/components/spinner/readme.md
index 2893f5a0e6..9b9e85f294 100644
--- a/core/src/components/spinner/readme.md
+++ b/core/src/components/spinner/readme.md
@@ -4,31 +4,6 @@ The Spinner component provides a variety of animated SVG spinners. Spinners are
 
 The default spinner to use is based on the platform. The default spinner for `ios` is `"lines"`, and the default for `android` is `"crescent"`. If the platform is not `ios` or `android`, the spinner will default to `crescent`. If the `name` property is set, then that spinner will be used instead of the platform specific spinner.
 
-```html
-<!-- Default Spinner -->
-<ion-spinner></ion-spinner>
-
-<!-- Lines -->
-<ion-spinner name="lines"></ion-spinner>
-
-<!-- Lines Small -->
-<ion-spinner name="lines-small"></ion-spinner>
-
-<!-- Dots -->
-<ion-spinner name="dots"></ion-spinner>
-
-<!-- Bubbles -->
-<ion-spinner name="bubbles"></ion-spinner>
-
-<!-- Circles -->
-<ion-spinner name="circles"></ion-spinner>
-
-<!-- Crescent -->
-<ion-spinner name="crescent"></ion-spinner>
-
-<!-- Paused Default Spinner -->
-<ion-spinner paused></ion-spinner>
-```
 
 
 <!-- Auto Generated Below -->
@@ -42,7 +17,6 @@ string
 
 The color to use from your Sass `$colors` map.
 Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-For more information, see [Theming your App](/docs/theming/theming-your-app).
 
 
 #### duration
@@ -58,7 +32,6 @@ string
 
 The mode determines which platform styles to use.
 Possible values are: `"ios"` or `"md"`.
-For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
 
 
 #### name
@@ -85,7 +58,6 @@ string
 
 The color to use from your Sass `$colors` map.
 Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-For more information, see [Theming your App](/docs/theming/theming-your-app).
 
 
 #### duration
@@ -101,7 +73,6 @@ string
 
 The mode determines which platform styles to use.
 Possible values are: `"ios"` or `"md"`.
-For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
 
 
 #### name
diff --git a/core/src/components/spinner/spinner.tsx b/core/src/components/spinner/spinner.tsx
index ef826cf98c..2ab9bcc1fd 100644
--- a/core/src/components/spinner/spinner.tsx
+++ b/core/src/components/spinner/spinner.tsx
@@ -20,14 +20,12 @@ export class Spinner {
   /**
    * The color to use from your Sass `$colors` map.
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-   * For more information, see [Theming your App](/docs/theming/theming-your-app).
    */
   @Prop() color?: Color;
 
   /**
    * The mode determines which platform styles to use.
    * Possible values are: `"ios"` or `"md"`.
-   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
    */
   @Prop() mode!: Mode;
 
diff --git a/core/src/components/spinner/usage/javascript.md b/core/src/components/spinner/usage/javascript.md
new file mode 100644
index 0000000000..058ba97b54
--- /dev/null
+++ b/core/src/components/spinner/usage/javascript.md
@@ -0,0 +1,25 @@
+```html
+<!-- Default Spinner -->
+<ion-spinner></ion-spinner>
+
+<!-- Lines -->
+<ion-spinner name="lines"></ion-spinner>
+
+<!-- Lines Small -->
+<ion-spinner name="lines-small"></ion-spinner>
+
+<!-- Dots -->
+<ion-spinner name="dots"></ion-spinner>
+
+<!-- Bubbles -->
+<ion-spinner name="bubbles"></ion-spinner>
+
+<!-- Circles -->
+<ion-spinner name="circles"></ion-spinner>
+
+<!-- Crescent -->
+<ion-spinner name="crescent"></ion-spinner>
+
+<!-- Paused Default Spinner -->
+<ion-spinner paused></ion-spinner>
+```
diff --git a/core/src/components/split-pane/readme.md b/core/src/components/split-pane/readme.md
index 5fe9dd9164..629b32082a 100644
--- a/core/src/components/split-pane/readme.md
+++ b/core/src/components/split-pane/readme.md
@@ -9,30 +9,6 @@ collapse and the menu will become hidden again. This is especially useful when
 creating an app that will be served over a browser or deployed through the app
 store to phones and tablets.
 
-To use SplitPane, simply add the component around your root component.
-In this example, we'll be using a sidemenu layout, similar to what is
-provided from the sidemenu starter template.
-
-```html
-<ion-split-pane>
-  <!--  our side menu  -->
-  <ion-menu>
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Menu</ion-title>
-      </ion-toolbar>
-    </ion-header>
-  </ion-menu>
-
-  <!-- the main content -->
-  <ion-nav [root]="root" main></ion-nav>
-</ion-split-pane>
-```
-
-Here, SplitPane will look for the element with the `main` attribute and make
-that the central component on larger screens. The `main` component can be any
-Ionic component (`ion-nav` or `ion-tabs`) except `ion-menu`.
-
 
 ### Setting breakpoints
 
@@ -40,26 +16,12 @@ By default, SplitPane will expand when the screen is larger than 768px.
 If you want to customize this, use the `when` input. The `when` input can
 accept any valid media query, as it uses `matchMedia()` underneath.
 
-```
-<ion-split-pane when="(min-width: 475px)">
-
-  <!--  our side menu  -->
-  <ion-menu>
-  ....
-  </ion-menu>
-
-  <!-- the main content -->
-  <ion-nav [root]="root" main></ion-nav>
-</ion-split-pane>
-```
 
 SplitPane also provides some predefined media queries that can be used.
 
 ```html
 <!-- could be "xs", "sm", "md", "lg", or "xl" -->
-<ion-split-pane when="lg">
-...
-</ion-split-pane>
+<ion-split-pane when="lg"></ion-split-pane>
 ```
 
 
@@ -75,41 +37,6 @@ SplitPane also provides some predefined media queries that can be used.
  or expression evaluates to true.
 
 
- ```html
- <ion-split-pane [when]="isLarge">
- ...
- </ion-split-pane>
- ```
-
- ```ts
- class MyClass {
-   public isLarge = false;
-   constructor(){}
- }
- ```
-
- Or
-
- ```html
- <ion-split-pane [when]="shouldShow()">
- ...
- </ion-split-pane>
- ```
-
- ```ts
- class MyClass {
-   constructor(){}
-   shouldShow(){
-     if(conditionA){
-       return true
-     } else {
-       return false
-     }
-   }
- }
- ```
-
-
 <!-- Auto Generated Below -->
 
 
@@ -168,6 +95,8 @@ Expression to be called when the split-pane visibility has changed
 
 #### isVisible()
 
+Returns if the split pane is toggled or not
+
 
 
 ----------------------------------------------
diff --git a/core/src/components/split-pane/split-pane.tsx b/core/src/components/split-pane/split-pane.tsx
index 3ca6cc6987..337ba5b413 100644
--- a/core/src/components/split-pane/split-pane.tsx
+++ b/core/src/components/split-pane/split-pane.tsx
@@ -112,11 +112,13 @@ export class SplitPane {
     this.visible = mediaList.matches;
   }
 
+  /** Returns if the split pane is toggled or not */
   @Method()
   isVisible(): boolean {
     return this.visible;
   }
 
+  /** @hidden */
   @Method()
   isPane(element: HTMLElement): boolean {
     if (!this.visible) {
diff --git a/core/src/components/split-pane/usage/angular.md b/core/src/components/split-pane/usage/angular.md
new file mode 100644
index 0000000000..45aedf4078
--- /dev/null
+++ b/core/src/components/split-pane/usage/angular.md
@@ -0,0 +1,15 @@
+```html
+<ion-split-pane>
+  <!--  our side menu  -->
+  <ion-menu>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Menu</ion-title>
+      </ion-toolbar>
+    </ion-header>
+  </ion-menu>
+
+  <!-- the main content -->
+  <ion-router-outlet main></ion-router-outlet>
+</ion-split-pane>
+```
diff --git a/core/src/components/split-pane/usage/javascript.md b/core/src/components/split-pane/usage/javascript.md
new file mode 100644
index 0000000000..910369b89f
--- /dev/null
+++ b/core/src/components/split-pane/usage/javascript.md
@@ -0,0 +1,17 @@
+```html
+<ion-split-pane>
+  <!--  our side menu  -->
+  <ion-menu>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Menu</ion-title>
+      </ion-toolbar>
+    </ion-header>
+  </ion-menu>
+
+  <!-- the main content -->
+  <ion-content main>
+    <h1>Hello</h1>
+  </ion-content>
+</ion-split-pane>
+```
diff --git a/core/src/components/status-tap/readme.md b/core/src/components/status-tap/readme.md
index 14680f1812..f1285fc3a0 100644
--- a/core/src/components/status-tap/readme.md
+++ b/core/src/components/status-tap/readme.md
@@ -11,6 +11,8 @@
 
 number
 
+How long the scrolling action should take.
+
 
 ## Attributes
 
@@ -18,6 +20,8 @@ number
 
 number
 
+How long the scrolling action should take.
+
 
 
 ----------------------------------------------
diff --git a/core/src/components/status-tap/status-tap.tsx b/core/src/components/status-tap/status-tap.tsx
index 52f3f15b9a..60a7136325 100644
--- a/core/src/components/status-tap/status-tap.tsx
+++ b/core/src/components/status-tap/status-tap.tsx
@@ -9,6 +9,7 @@ export class StatusTap {
   @Prop({ context: 'queue' }) queue!: QueueController;
   @Prop({ context: 'window' }) win!: Window;
 
+  /** How long the scrolling action should take. */
   @Prop() duration = 300;
 
   @Listen('window:statusTap')
diff --git a/core/src/components/tab-button/readme.md b/core/src/components/tab-button/readme.md
index 88671a81d8..40bc09ffe6 100644
--- a/core/src/components/tab-button/readme.md
+++ b/core/src/components/tab-button/readme.md
@@ -1,5 +1,6 @@
 # ion-tab-button
 
+TabButton is an internal component for tabs. Please see the [Tab docs](../tab) for more details.
 
 
 <!-- Auto Generated Below -->
@@ -11,11 +12,15 @@
 
 boolean
 
+If the tab is selected or not
+
 
 #### tab
 
 HTMLIonTabElement
 
+The tab component for the button
+
 
 ## Attributes
 
@@ -23,22 +28,32 @@ HTMLIonTabElement
 
 boolean
 
+If the tab is selected or not
+
 
 #### tab
 
 
 
+The tab component for the button
+
 
 ## Events
 
 #### ionTabButtonDidLoad
 
+Emitted when the tab button is loaded
+
 
 #### ionTabButtonDidUnload
 
+Emitted when the tab button is destroyed
+
 
 #### ionTabbarClick
 
+Emitted when the tab bar is clicked
+
 
 
 ----------------------------------------------
diff --git a/core/src/components/tab-button/tab-button.tsx b/core/src/components/tab-button/tab-button.tsx
index a041fccacf..425c854306 100644
--- a/core/src/components/tab-button/tab-button.tsx
+++ b/core/src/components/tab-button/tab-button.tsx
@@ -17,11 +17,19 @@ export class TabButton {
 
   @State() keyFocus = false;
 
+  /** If the tab is selected or not */
   @Prop() selected = false;
+
+  /** The tab component for the button */
   @Prop() tab!: HTMLIonTabElement;
 
+  /** Emitted when the tab bar is clicked  */
   @Event() ionTabbarClick!: EventEmitter<HTMLIonTabElement>;
+
+  /** Emitted when the tab button is loaded */
   @Event() ionTabButtonDidLoad!: EventEmitter<void>;
+
+  /** Emitted when the tab button is destroyed */
   @Event() ionTabButtonDidUnload!: EventEmitter<void>;
 
   componentDidLoad() {
diff --git a/core/src/components/tab/readme.md b/core/src/components/tab/readme.md
index f6e04cbd74..4e66af3712 100644
--- a/core/src/components/tab/readme.md
+++ b/core/src/components/tab/readme.md
@@ -1,49 +1,11 @@
 # ion-tab
 
-The Tab component, written `<ion-tab>`, is styled based on the mode and should
-be used in conjunction with the [Tabs](../Tabs/) component.
-
-Each `ion-tab` is a declarative component for a [NavController](../../../navigation/NavController/).
-Basically, each tab is a `NavController`. For more information on using
-navigation controllers take a look at the [NavController API Docs](../../../navigation/NavController/).
+The Tab component is a child component of the [Tabs](../Tabs/) component.
+Each Tab is meant to be a top level navigation stack for an app.
+Meaning that an app can have many tabs, all wit their own independent navigation.
 
 See the [Tabs API Docs](../Tabs/) for more details on configuring Tabs.
 
-To add a basic tab, you can use the following markup where the `root` property
-is the page you want to load for that tab, `label` is the optional text to
-display on the tab, and `icon` is the optional [icon](../../icon/Icon/).
-
-```html
-<ion-tabs>
- <ion-tab [root]="chatRoot" label="Chat" icon="chat"></ion-tab>
-</ion-tabs>
-```
-
-
-Sometimes you may want to call a method instead of navigating to a new
-page. You can use the `(ionSelect)` event to call a method on your class when
-the tab is selected. Below is an example of presenting a modal from one of
-the tabs.
-
-```html
-<ion-tabs>
-  <ion-tab (ionSelect)="chat()" label="Show Modal"></ion-tab>
-</ion-tabs>pop
-```
-
-```ts
-export class Tabs {
-  constructor(public modalCtrl: ModalController) {
-
-  }
-
-  chat() {
-    let modal = this.modalCtrl.create(ChatPage);
-    modal.present();
-  }
-}
-```
-
 
 <!-- Auto Generated Below -->
 
@@ -54,6 +16,8 @@ export class Tabs {
 
 boolean
 
+If the tab is active or not
+
 
 #### badge
 
@@ -73,6 +37,8 @@ The badge color for the tab button.
 
 string
 
+hidden
+
 
 #### component
 
@@ -148,6 +114,8 @@ If true, hide the tabs on child pages.
 
 boolean
 
+If the tab is active or not
+
 
 #### badge
 
@@ -167,6 +135,8 @@ The badge color for the tab button.
 
 string
 
+hidden
+
 
 #### component
 
@@ -247,9 +217,13 @@ Emitted when the current tab is selected.
 
 #### getTabId()
 
+Get the Id for the tab
+
 
 #### setActive()
 
+Set the active component for the tab
+
 
 
 ----------------------------------------------
diff --git a/core/src/components/tab/tab.tsx b/core/src/components/tab/tab.tsx
index e1c18644ef..85315d3886 100644
--- a/core/src/components/tab/tab.tsx
+++ b/core/src/components/tab/tab.tsx
@@ -10,9 +10,13 @@ export class Tab {
   private loaded = false;
   @Element() el!: HTMLIonTabElement;
 
+  /** If the tab is active or not */
   @Prop({ mutable: true }) active = false;
 
+  /** hidden */
   @Prop() btnId?: string;
+
+  /** @hidden */
   @Prop() delegate?: FrameworkDelegate;
 
   /**
@@ -94,6 +98,7 @@ export class Tab {
     }
   }
 
+  /** Get the Id for the tab */
   @Method()
   getTabId(): string|null {
     if (this.name) {
@@ -105,6 +110,7 @@ export class Tab {
     return null;
   }
 
+  /** Set the active component for the tab */
   @Method()
   async setActive(): Promise<void> {
     await this.prepareLazyLoaded();
diff --git a/core/src/components/tabbar/readme.md b/core/src/components/tabbar/readme.md
index 677d89fdfe..340abad695 100644
--- a/core/src/components/tabbar/readme.md
+++ b/core/src/components/tabbar/readme.md
@@ -1,5 +1,6 @@
 # ion-tabbar
 
+Tabbar is an internal component for Tabs. Please see the [Tabs documentation](../tabs).
 
 
 <!-- Auto Generated Below -->
@@ -11,31 +12,43 @@
 
 boolean
 
+If the tabbar should include the highlight on the active tab
+
 
 #### layout
 
 string
 
+The layout of the title and icons
+
 
 #### placement
 
 string
 
+The placement of the tabbar in the app
+
 
 #### scrollable
 
 boolean
 
+If the tabbar is scrollable or not
+
 
 #### selectedTab
 
 HTMLIonTabElement
 
+The selected tab component
+
 
 #### tabs
 
 HTMLIonTabElement[]
 
+The tabs to render
+
 
 #### translucent
 
@@ -50,31 +63,43 @@ If true, the tabbar will be translucent. Defaults to `false`.
 
 boolean
 
+If the tabbar should include the highlight on the active tab
+
 
 #### layout
 
 string
 
+The layout of the title and icons
+
 
 #### placement
 
 string
 
+The placement of the tabbar in the app
+
 
 #### scrollable
 
 boolean
 
+If the tabbar is scrollable or not
+
 
 #### selected-tab
 
 
 
+The selected tab component
+
 
 #### tabs
 
 
 
+The tabs to render
+
 
 #### translucent
 
diff --git a/core/src/components/tabbar/tabbar.tsx b/core/src/components/tabbar/tabbar.tsx
index 7742ce2cfe..d69e143969 100644
--- a/core/src/components/tabbar/tabbar.tsx
+++ b/core/src/components/tabbar/tabbar.tsx
@@ -31,10 +31,19 @@ export class Tabbar {
   @State() canScrollRight = false;
   @State() hidden = false;
 
+  /** The layout of the title and icons */
   @Prop() layout: TabbarLayout = 'icon-top';
+
+  /** The placement of the tabbar in the app */
   @Prop() placement: TabbarPlacement = 'bottom';
+
+  /** The selected tab component */
   @Prop() selectedTab?: HTMLIonTabElement;
+
+  /** If the tabbar is scrollable or not */
   @Prop() scrollable = false;
+
+  /** The tabs to render */
   @Prop() tabs: HTMLIonTabElement[] = [];
 
   @Watch('selectedTab')
@@ -43,6 +52,8 @@ export class Tabbar {
     this.highlight && this.updateHighlight();
   }
 
+
+  /** If the tabbar should include the highlight on the active tab */
   @Prop() highlight = false;
 
   /**
diff --git a/core/src/components/tabs/readme.md b/core/src/components/tabs/readme.md
index eb7dc2f6be..e785d6f28e 100644
--- a/core/src/components/tabs/readme.md
+++ b/core/src/components/tabs/readme.md
@@ -1,88 +1,7 @@
 # ion-tabs
 
-Tabs make it easy to navigate between different pages or functional
-aspects of an app. The Tabs component, written as `<ion-tabs>`, is
-a container of individual [Tab](../Tab/) components. Each individual `ion-tab`
-is a declarative component for a [NavController](../../../navigation/NavController/)
-
-For more information on using nav controllers like Tab or [Nav](../../nav/Nav/),
-take a look at the [NavController API Docs](../../../navigation/NavController/).
-
-
-### Placement
-
-The position of the tabs relative to the content varies based on
-the mode. The tabs are placed at the bottom of the screen
-for iOS and Android, and at the top for Windows by default. The position can
-be configured using the `tabsPlacement` attribute on the `<ion-tabs>` component,
-or in an app's [config](../../config/Config/).
-See the [Input Properties](#input-properties) below for the available
-values of `tabsPlacement`.
-
-
-### Layout
-
-The layout for all of the tabs can be defined using the `tabsLayout`
-property. If the individual tab has a title and icon, the icons will
-show on top of the title by default. All tabs can be changed by setting
-the value of `tabsLayout` on the `<ion-tabs>` element, or in your
-app's [config](../../config/Config/). For example, this is useful if
-you want to show tabs with a title only on Android, but show icons
-and a title for iOS. See the [Input Properties](#input-properties)
-below for the available values of `tabsLayout`.
-
-
-### Selecting a Tab
-
-There are different ways you can select a specific tab from the tabs
-component. You can use the `selectedIndex` property to set the index
-on the `<ion-tabs>` element, or you can call `select()` from the `Tabs`
-instance after creation. See [usage](#usage) below for more information.
-
-
-You can add a basic tabs template to a `@Component` using the following
-template:
-
-```html
-<ion-tabs>
-  <ion-tab [root]="tab1Root"></ion-tab>
-  <ion-tab [root]="tab2Root"></ion-tab>
-  <ion-tab [root]="tab3Root"></ion-tab>
-</ion-tabs>
-```
-
-Where `tab1Root`, `tab2Root`, and `tab3Root` are each a page:
-
-
-By default, the first tab will be selected upon navigation to the
-Tabs page. We can change the selected tab by using `selectedIndex`
-on the `<ion-tabs>` element:
-
-```html
-<ion-tabs selectedIndex="2">
-  <ion-tab [root]="tab1Root"></ion-tab>
-  <ion-tab [root]="tab2Root"></ion-tab>
-  <ion-tab [root]="tab3Root"></ion-tab>
-</ion-tabs>
-```
-
-```html
-<ion-tabs #myTabs>
-  <ion-tab [root]="tab1Root"></ion-tab>
-  <ion-tab [root]="tab2Root"></ion-tab>
-  <ion-tab [root]="tab3Root"></ion-tab>
-</ion-tabs>
-```
-
-Then in your class you can grab the `Tabs` instance and call `select()`,
-passing the index of the tab as the argument. Here we're grabbing the tabs
-by using ViewChild.
-
-You can also switch tabs from a child component by calling `select()` on the
-parent view using the `NavController` instance. For example, assuming you have
-a `TabsPage` component, you could call the following from any of the child
-components to switch to `TabsRoot3`:
-
+Tabs are a top level navigation component for created multiple stacked navs.
+The component is a container of individual [Tab](../Tab/) components.
 
 
 <!-- Auto Generated Below -->
@@ -96,7 +15,6 @@ string
 
 The color to use from your Sass `$colors` map.
 Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-For more information, see [Theming your App](/docs/theming/theming-your-app).
 
 
 #### name
@@ -110,6 +28,8 @@ A unique name for the tabs
 
 boolean
 
+If the tabs should be scrollable
+
 
 #### tabbarHidden
 
@@ -153,6 +73,9 @@ Defaults to `false`.
 
 boolean
 
+If the tabs should use the router or not.
+If true, `selectedTab` does nothing.
+
 
 ## Attributes
 
@@ -162,7 +85,6 @@ string
 
 The color to use from your Sass `$colors` map.
 Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-For more information, see [Theming your App](/docs/theming/theming-your-app).
 
 
 #### name
@@ -176,6 +98,8 @@ A unique name for the tabs
 
 boolean
 
+If the tabs should be scrollable
+
 
 #### tabbar-hidden
 
@@ -219,6 +143,9 @@ Defaults to `false`.
 
 boolean
 
+If the tabs should use the router or not.
+If true, `selectedTab` does nothing.
+
 
 ## Events
 
@@ -243,12 +170,18 @@ Emitted when the tab changes.
 
 #### getSelected()
 
+Get the currently selected tab
+
 
 #### getTab()
 
+Get the tab at the given index
+
 
 #### select()
 
+Index or the Tab instance, of the tab to select.
+
 
 #### setRouteId()
 
diff --git a/core/src/components/tabs/tabs.tsx b/core/src/components/tabs/tabs.tsx
index 8f864b5e0b..e73e09b6e2 100644
--- a/core/src/components/tabs/tabs.tsx
+++ b/core/src/components/tabs/tabs.tsx
@@ -25,7 +25,6 @@ export class Tabs implements NavOutlet {
   /**
    * The color to use from your Sass `$colors` map.
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-   * For more information, see [Theming your App](/docs/theming/theming-your-app).
    */
   @Prop() color?: Color;
 
@@ -62,8 +61,13 @@ export class Tabs implements NavOutlet {
    */
   @Prop() translucent = false;
 
+  /** If the tabs should be scrollable */
   @Prop() scrollable = false;
 
+  /**
+   * If the tabs should use the router or not.
+   * If true, `selectedTab` does nothing.
+   */
   @Prop({ mutable: true }) useRouter = false;
 
   /**
@@ -110,7 +114,7 @@ export class Tabs implements NavOutlet {
   }
 
   /**
-   * @param {number|Tab} tabOrIndex Index, or the Tab instance, of the tab to select.
+   * Index or the Tab instance, of the tab to select.
    */
   @Method()
   async select(tabOrIndex: number | HTMLIonTabElement): Promise<boolean> {
@@ -125,6 +129,7 @@ export class Tabs implements NavOutlet {
     return true;
   }
 
+  /** @hidden */
   @Method()
   async setRouteId(id: string): Promise<RouteWrite> {
     const selectedTab = this.getTab(id);
@@ -140,12 +145,14 @@ export class Tabs implements NavOutlet {
     };
   }
 
+  /** @hidden */
   @Method()
   getRouteId(): RouteID|undefined {
     const id = this.selectedTab && this.selectedTab.getTabId();
     return id ? {id, element: this.selectedTab} : undefined;
   }
 
+  /** Get the tab at the given index */
   @Method()
   getTab(tabOrIndex: string | number | HTMLIonTabElement): HTMLIonTabElement|undefined {
     if (typeof tabOrIndex === 'string') {
@@ -158,7 +165,7 @@ export class Tabs implements NavOutlet {
   }
 
   /**
-   * @return {HTMLIonTabElement} Returns the currently selected tab
+   * Get the currently selected tab
    */
   @Method()
   getSelected(): HTMLIonTabElement | undefined {
diff --git a/core/src/components/tabs/usage/angular.md b/core/src/components/tabs/usage/angular.md
new file mode 100644
index 0000000000..56fae51dfd
--- /dev/null
+++ b/core/src/components/tabs/usage/angular.md
@@ -0,0 +1,16 @@
+```html
+<ion-tabs>
+  <ion-tab label="Schedule" icon="calendar" href="/app/tabs/(schedule:schedule)">
+    <ion-router-outlet stack name="schedule"></ion-router-outlet>
+  </ion-tab>
+  <ion-tab label="Speakers" icon="contacts" href="/app/tabs/(speakers:speakers)">
+    <ion-router-outlet stack name="speakers"></ion-router-outlet>
+  </ion-tab>
+  <ion-tab label="Map" icon="map" href="/app/tabs/(map:map)">
+    <ion-router-outlet stack name="map"></ion-router-outlet>
+  </ion-tab>
+  <ion-tab label="About" icon="information-circle" href="/app/tabs/(about:about)">
+    <ion-router-outlet stack name="about"></ion-router-outlet>
+  </ion-tab>
+</ion-tabs>
+```
diff --git a/core/src/components/tabs/usage/javascript.md b/core/src/components/tabs/usage/javascript.md
new file mode 100644
index 0000000000..721f6a57ea
--- /dev/null
+++ b/core/src/components/tabs/usage/javascript.md
@@ -0,0 +1,12 @@
+```html
+<ion-tabs>
+  <ion-tab label="schedule" icon="calendar" name="tab-schedule">
+    <ion-nav></ion-nav>
+  </ion-tab>
+  <ion-tab label="speakers" icon="contacts" name="tab-speaker">
+    <ion-nav></ion-nav>
+  </ion-tab>
+  <ion-tab label="map" icon="map" component="page-map"></ion-tab>
+  <ion-tab label="about" icon="information-circle" component="page-about"></ion-tab>
+</ion-tabs>
+```
diff --git a/core/src/components/tap-click/readme.md b/core/src/components/tap-click/readme.md
index 8be0c908fa..80f32a1292 100644
--- a/core/src/components/tap-click/readme.md
+++ b/core/src/components/tap-click/readme.md
@@ -1,5 +1,6 @@
 # ion-tap-click
 
+TabClick is an internal component with no public API.
 
 
 <!-- Auto Generated Below -->
diff --git a/core/src/components/text/readme.md b/core/src/components/text/readme.md
index 37e316f6a9..94fbf0e124 100644
--- a/core/src/components/text/readme.md
+++ b/core/src/components/text/readme.md
@@ -12,9 +12,8 @@ The text component is a simple component that can be used to style the text colo
 
 string
 
-The color to use from your Sass `$colors` map.
+The color to use for the text.
 Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-For more information, see [Theming your App](/docs/theming/theming-your-app).
 
 
 #### mode
@@ -23,7 +22,6 @@ string
 
 The mode determines which platform styles to use.
 Possible values are: `"ios"` or `"md"`.
-For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
 
 
 ## Attributes
@@ -32,9 +30,8 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl
 
 string
 
-The color to use from your Sass `$colors` map.
+The color to use for the text.
 Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-For more information, see [Theming your App](/docs/theming/theming-your-app).
 
 
 #### mode
@@ -43,7 +40,6 @@ string
 
 The mode determines which platform styles to use.
 Possible values are: `"ios"` or `"md"`.
-For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
 
 
 
diff --git a/core/src/components/text/text.tsx b/core/src/components/text/text.tsx
index 602c5f12c9..7a7c429179 100644
--- a/core/src/components/text/text.tsx
+++ b/core/src/components/text/text.tsx
@@ -15,16 +15,14 @@ import { Color, Mode } from '../../interface';
 export class Text {
 
   /**
-   * The color to use from your Sass `$colors` map.
+   * The color to use for the text.
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-   * For more information, see [Theming your App](/docs/theming/theming-your-app).
    */
   @Prop() color?: Color;
 
   /**
    * The mode determines which platform styles to use.
    * Possible values are: `"ios"` or `"md"`.
-   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
    */
   @Prop() mode!: Mode;
 
diff --git a/core/src/components/text/usage/angular.md b/core/src/components/text/usage/angular.md
deleted file mode 100644
index e2cfc519cf..0000000000
--- a/core/src/components/text/usage/angular.md
+++ /dev/null
@@ -1,29 +0,0 @@
-```html
-<ion-text color="secondary">
-  <h1>H1: The quick brown fox jumps over the lazy dog</h1>
-</ion-text>
-
-<ion-text color="primary">
-  <h2>H2: The quick brown fox jumps over the lazy dog</h2>
-</ion-text>
-
-<ion-text color="light">
-  <h3>H3: The quick brown fox jumps over the lazy dog</h3>
-</ion-text>
-
-<ion-text color="danger">
-  <h4 >H4: The quick brown fox jumps over the lazy dog</h4>
-</ion-text>
-
-<ion-text color="dark">
-  <h5>H5: The quick brown fox jumps over the lazy dog</h5>
-</ion-text>
-
-<p>
-  I saw a werewolf with a Chinese menu in his hand.
-  Walking through the <ion-text color="danger"><sub>streets</sub></ion-text> of Soho in the rain.
-  He <ion-text color="primary"><i>was</i></ion-text> looking for a place called Lee Ho Fook's.
-  Gonna get a <ion-text color="secondary"><a>big dish of beef chow mein.</a></ion-text>
-  <ion-text color="danger"><ion-icon name="cut"></ion-icon></ion-text>
-</p>
-```
\ No newline at end of file
diff --git a/core/src/components/textarea/readme.md b/core/src/components/textarea/readme.md
index 3030c5c5cd..939362b970 100644
--- a/core/src/components/textarea/readme.md
+++ b/core/src/components/textarea/readme.md
@@ -6,43 +6,6 @@ Unlike the native textarea element, the Ionic textarea does not support loading
 
 The textarea component accepts the [native textarea attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) in addition to the Ionic properties.
 
-```html
-<!-- Default textarea -->
-<ion-textarea></ion-textarea>
-
-<!-- Textarea in an item with a placeholder -->
-<ion-item>
-  <ion-textarea placeholder="Enter more information here..."></ion-textarea>
-</ion-item>
-
-<!-- Textarea in an item with a floating label -->
-<ion-item>
-  <ion-label position="floating">Description</ion-label>
-  <ion-textarea></ion-textarea>
-</ion-item>
-
-<!-- Disabled and readonly textarea in an item with a stacked label -->
-<ion-item>
-  <ion-label position="stacked">Summary</ion-label>
-  <ion-textarea
-    disabled
-    readonly
-    value="Ionic enables developers to build performant, high-quality mobile apps.">
-  </ion-textarea>
-</ion-item>
-
-<!-- Textarea that clears the value on edit -->
-<ion-item>
-  <ion-label>Comment</ion-label>
-  <ion-textarea clear-on-edit="true"></ion-textarea>
-</ion-item>
-
-<!-- Textarea with custom number of rows and cols -->
-<ion-item>
-  <ion-label>Notes</ion-label>
-  <ion-textarea rows="6" cols="20" placeholder="Enter any notes here..."></ion-textarea>
-</ion-item>
-```
 
 
 <!-- Auto Generated Below -->
diff --git a/core/src/components/textarea/usage/javascript.md b/core/src/components/textarea/usage/javascript.md
new file mode 100644
index 0000000000..1018c3aedd
--- /dev/null
+++ b/core/src/components/textarea/usage/javascript.md
@@ -0,0 +1,37 @@
+```html
+<!-- Default textarea -->
+<ion-textarea></ion-textarea>
+
+<!-- Textarea in an item with a placeholder -->
+<ion-item>
+  <ion-textarea placeholder="Enter more information here..."></ion-textarea>
+</ion-item>
+
+<!-- Textarea in an item with a floating label -->
+<ion-item>
+  <ion-label position="floating">Description</ion-label>
+  <ion-textarea></ion-textarea>
+</ion-item>
+
+<!-- Disabled and readonly textarea in an item with a stacked label -->
+<ion-item>
+  <ion-label position="stacked">Summary</ion-label>
+  <ion-textarea
+    disabled
+    readonly
+    value="Ionic enables developers to build performant, high-quality mobile apps.">
+  </ion-textarea>
+</ion-item>
+
+<!-- Textarea that clears the value on edit -->
+<ion-item>
+  <ion-label>Comment</ion-label>
+  <ion-textarea clear-on-edit="true"></ion-textarea>
+</ion-item>
+
+<!-- Textarea with custom number of rows and cols -->
+<ion-item>
+  <ion-label>Notes</ion-label>
+  <ion-textarea rows="6" cols="20" placeholder="Enter any notes here..."></ion-textarea>
+</ion-item>
+```
diff --git a/core/src/components/thumbnail/usage/angular.md b/core/src/components/thumbnail/usage/angular.md
deleted file mode 100644
index 5dca313b70..0000000000
--- a/core/src/components/thumbnail/usage/angular.md
+++ /dev/null
@@ -1,12 +0,0 @@
-```html
-<ion-thumbnail>
-  <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-</ion-thumbnail>
-
-<ion-item>
-  <ion-thumbnail slot="start">
-    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-  </ion-thumbnail>
-  <ion-label>Item Thumbnail</ion-label>
-</ion-item>
-```
\ No newline at end of file
diff --git a/core/src/components/title/readme.md b/core/src/components/title/readme.md
index ea1be60fe1..be527687b5 100644
--- a/core/src/components/title/readme.md
+++ b/core/src/components/title/readme.md
@@ -2,15 +2,6 @@
 
 `ion-title` is a component that sets the title of the `Toolbar`.
 
-```html
-<ion-header>
-
-  <ion-toolbar>
-    <ion-title>Settings</ion-title>
-  </ion-toolbar>
-
-</ion-header>
-```
 
 
 <!-- Auto Generated Below -->
@@ -22,11 +13,17 @@
 
 string
 
+The color to use for the title.
+Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+
 
 #### mode
 
 string
 
+The mode determines which platform styles to use.
+Possible values are: `"ios"` or `"md"`.
+
 
 ## Attributes
 
@@ -34,11 +31,17 @@ string
 
 string
 
+The color to use for the title.
+Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+
 
 #### mode
 
 string
 
+The mode determines which platform styles to use.
+Possible values are: `"ios"` or `"md"`.
+
 
 
 ----------------------------------------------
diff --git a/core/src/components/title/title.tsx b/core/src/components/title/title.tsx
index 0be27573d3..5fbd419d9f 100644
--- a/core/src/components/title/title.tsx
+++ b/core/src/components/title/title.tsx
@@ -15,7 +15,16 @@ import { createThemedClasses } from '../../utils/theme';
 })
 export class ToolbarTitle {
 
+  /**
+   * The mode determines which platform styles to use.
+   * Possible values are: `"ios"` or `"md"`.
+   */
   @Prop() mode!: Mode;
+
+  /**
+   * The color to use for the title.
+   * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+   */
   @Prop() color?: Color;
 
   render() {
diff --git a/core/src/components/title/usage/javascript.md b/core/src/components/title/usage/javascript.md
new file mode 100644
index 0000000000..8ccf8f286f
--- /dev/null
+++ b/core/src/components/title/usage/javascript.md
@@ -0,0 +1,9 @@
+```html
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Settings</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+```
diff --git a/core/src/components/toast-controller/readme.md b/core/src/components/toast-controller/readme.md
index 3df1d4c00e..3e22975303 100644
--- a/core/src/components/toast-controller/readme.md
+++ b/core/src/components/toast-controller/readme.md
@@ -1,5 +1,6 @@
 # ion-toast-controller
 
+ToastController is a component use to create Toast components. Please see the docs for [Toast](../toast).
 
 
 <!-- Auto Generated Below -->
@@ -9,12 +10,18 @@
 
 #### create()
 
+Create a toast overlay with toast options.
+
 
 #### dismiss()
 
+Dismiss the open toast overlay.
+
 
 #### getTop()
 
+Get the most recently opened toast overlay.
+
 
 
 ----------------------------------------------
diff --git a/core/src/components/toast-controller/toast-controller.tsx b/core/src/components/toast-controller/toast-controller.tsx
index b36e01555d..219ba7010a 100644
--- a/core/src/components/toast-controller/toast-controller.tsx
+++ b/core/src/components/toast-controller/toast-controller.tsx
@@ -28,7 +28,7 @@ export class ToastController implements OverlayController {
     removeLastOverlay(this.toasts);
   }
 
-  /*
+  /**
    * Create a toast overlay with toast options.
    */
   @Method()
@@ -36,7 +36,7 @@ export class ToastController implements OverlayController {
     return createOverlay(this.doc.createElement('ion-toast'), opts);
   }
 
-  /*
+  /**
    * Dismiss the open toast overlay.
    */
   @Method()
@@ -44,7 +44,7 @@ export class ToastController implements OverlayController {
     return dismissOverlay(data, role, this.toasts, toastId);
   }
 
-  /*
+  /**
    * Get the most recently opened toast overlay.
    */
   @Method()
diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx
index 8af7e7f7e1..7188ba0ae4 100644
--- a/core/src/components/toast/toast.tsx
+++ b/core/src/components/toast/toast.tsx
@@ -34,7 +34,11 @@ export class Toast implements OverlayInterface {
 
   @Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement;
   @Prop({ context: 'config' }) config!: Config;
+
+  /** @hidden */
   @Prop() overlayId!: number;
+
+  /** @hidden */
   @Prop() keyboardClose = false;
 
   /**
diff --git a/core/src/components/toolbar/readme.md b/core/src/components/toolbar/readme.md
index cd74f8bb02..1b9efe33ad 100644
--- a/core/src/components/toolbar/readme.md
+++ b/core/src/components/toolbar/readme.md
@@ -30,9 +30,8 @@ In `md` mode, the `<ion-header>` will receive a box-shadow on the bottom, and th
 
 string
 
-The color to use from your Sass `$colors` map.
+The color to use for the background.
 Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-For more information, see [Theming your App](/docs/theming/theming-your-app).
 
 
 #### mode
@@ -41,7 +40,6 @@ string
 
 The mode determines which platform styles to use.
 Possible values are: `"ios"` or `"md"`.
-For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
 
 
 #### translucent
@@ -60,9 +58,8 @@ Defaults to `false`.
 
 string
 
-The color to use from your Sass `$colors` map.
+The color to use for the background.
 Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-For more information, see [Theming your App](/docs/theming/theming-your-app).
 
 
 #### mode
@@ -71,7 +68,6 @@ string
 
 The mode determines which platform styles to use.
 Possible values are: `"ios"` or `"md"`.
-For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
 
 
 #### translucent
diff --git a/core/src/components/toolbar/toolbar.tsx b/core/src/components/toolbar/toolbar.tsx
index ba68b489e4..4156039bc1 100644
--- a/core/src/components/toolbar/toolbar.tsx
+++ b/core/src/components/toolbar/toolbar.tsx
@@ -18,16 +18,14 @@ export class Toolbar {
   @Prop({ context: 'config' }) config!: Config;
 
   /**
-   * The color to use from your Sass `$colors` map.
+   * The color to use for the background.
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-   * For more information, see [Theming your App](/docs/theming/theming-your-app).
    */
   @Prop() color?: Color;
 
   /**
    * The mode determines which platform styles to use.
    * Possible values are: `"ios"` or `"md"`.
-   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
    */
   @Prop() mode!: Mode;