diff --git a/packages/react/src/components/Button/Button.mdx b/packages/react/src/components/Button/Button.mdx
index f8f0e668b247..987ca19ac875 100644
--- a/packages/react/src/components/Button/Button.mdx
+++ b/packages/react/src/components/Button/Button.mdx
@@ -10,11 +10,24 @@ import { Add16, Delete16 } from '@carbon/icons-react';
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
-## Table of Contents
 
 - [Overview](#overview)
+- [Icon-only Buttons](#icon-only-buttons)
+- [Set of Buttons](#set-of-buttons)
 - [Skeleton state](#skeleton-state)
 - [Component API](#component-api)
+  - [Button `as`](#button-as)
+  - [Button `className`](#button-classname)
+  - [Button `hasIconOnly`](#button-hasicononly)
+  - [Button `href`](#button-href)
+  - [Button `iconDescription`](#button-icondescription)
+  - [Button `kind`](#button-kind)
+  - [Button `renderIcon`](#button-rendericon)
+  - [Button `role`](#button-role)
+  - [Button `size`](#button-size)
+  - [Button `tooltipAlignment`](#button-tooltipalignment)
+  - [Button `tooltipPosition`](#button-tooltipposition)
+  - [ButtonSet `stacked`](#buttonset-stacked)
 - [References](#references)
 - [Feedback](#feedback)
 
@@ -71,7 +84,7 @@ content is being loaded.
 
 ## Component API
 
-<Props sort="asc" />
+<Props />
 
 Additional props passed into `Button` will be forwarded along to the underlying
 button element.
@@ -294,15 +307,13 @@ By passing in `stacked` to the `ButtonSet` component, you can arrange your two
 
 ## References
 
-- [MDN: ARIA button role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role)
-- [W3: Role attribute](https://www.w3.org/WAI/PF/HTML/wiki/RoleAttribute)
-- [W3: ARIA button role example](https://www.w3.org/TR/2016/WD-wai-aria-practices-1.1-20160317/examples/button/button.html)
+[MDN: ARIA button role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role)
+
+[W3: Role attribute](https://www.w3.org/WAI/PF/HTML/wiki/RoleAttribute)
+
+[W3: ARIA button role example](https://www.w3.org/TR/2016/WD-wai-aria-practices-1.1-20160317/examples/button/button.html)
 
 ## Feedback
 
 Help us improve these docs by
 [editing this file on GitHub](https://github.com/carbon-design-system/carbon/edit/master/packages/react/src/components/Accordion/Accordion.stories.mdx)
-
-```
-
-```
diff --git a/packages/react/src/components/ContentSwitcher/ContentSwitcher-story.js b/packages/react/src/components/ContentSwitcher/ContentSwitcher-story.js
index a85365d2a2a0..a7fc1f01b49c 100644
--- a/packages/react/src/components/ContentSwitcher/ContentSwitcher-story.js
+++ b/packages/react/src/components/ContentSwitcher/ContentSwitcher-story.js
@@ -10,6 +10,7 @@ import { action } from '@storybook/addon-actions';
 import { withKnobs, boolean, select } from '@storybook/addon-knobs';
 import ContentSwitcher from '../ContentSwitcher';
 import Switch from '../Switch';
+import mdx from './ContentSwitcher.mdx';
 
 const selectionModes = {
   'Change selection automatically upon focus (automatic)': 'automatic',
@@ -19,6 +20,7 @@ const selectionModes = {
 const props = {
   contentSwitcher: () => ({
     light: boolean('Light variant (light)', false),
+    selectedIndex: select('Selected index (selectedIndex)', [0, 1, 2], 0),
     selectionMode: select(
       'Selection mode (selectionMode)',
       selectionModes,
@@ -42,44 +44,29 @@ export default {
     subcomponents: {
       Switch,
     },
+    docs: {
+      page: mdx,
+    },
   },
 };
 
-export const Default = () => {
-  const switchProps = props.switch();
-  return (
-    <ContentSwitcher {...props.contentSwitcher()}>
-      <Switch name="one" text="First section" {...switchProps} />
-      <Switch name="two" text="Second section" {...switchProps} />
-      <Switch name="three" text="Third section" {...switchProps} />
-    </ContentSwitcher>
-  );
-};
+export const Default = () => (
+  <ContentSwitcher onChange={() => {}}>
+    <Switch name="one" text="First section" />
+    <Switch name="two" text="Second section" />
+    <Switch name="three" text="Third section" />
+  </ContentSwitcher>
+);
 
-Default.parameters = {
-  info: {
-    text: `
-        The Content Switcher component manipulates the content shown following an exclusive or “either/or” pattern.
-        Create Switch components for each section in the content switcher.
-      `,
-  },
-};
+Default.story = { name: 'Content Switcher' };
 
-export const Selected = () => {
+export const ContentSwitcherPlayground = () => {
   const switchProps = props.switch();
   return (
-    <ContentSwitcher {...props.contentSwitcher()} selectedIndex={1}>
+    <ContentSwitcher {...props.contentSwitcher()}>
       <Switch name="one" text="First section" {...switchProps} />
       <Switch name="two" text="Second section" {...switchProps} />
       <Switch name="three" text="Third section" {...switchProps} />
     </ContentSwitcher>
   );
 };
-
-Selected.parameters = {
-  info: {
-    text: `
-         Render the Content Switcher with a different section automatically selected
-       `,
-  },
-};
diff --git a/packages/react/src/components/ContentSwitcher/ContentSwitcher.mdx b/packages/react/src/components/ContentSwitcher/ContentSwitcher.mdx
new file mode 100644
index 000000000000..476eb0e907c4
--- /dev/null
+++ b/packages/react/src/components/ContentSwitcher/ContentSwitcher.mdx
@@ -0,0 +1,203 @@
+import { Story, Props, Source, Preview } from '@storybook/addon-docs/blocks';
+import ContentSwitcher from '../ContentSwitcher';
+import Switch from '../Switch';
+
+# Content Switcher
+
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+
+
+- [Overview](#overview)
+- [Component API](#component-api)
+  - [ContentSwitcher `className`](#contentswitcher-classname)
+  - [ContentSwitcher `light`](#contentswitcher-light)
+  - [ContentSwitcher `onChange`](#contentswitcher-onchange)
+  - [ContentSwitcher `selectedIndex`](#contentswitcher-selectedindex)
+  - [ContentSwitcher `selectionMode`](#contentswitcher-selectionmode)
+  - [Switch `className`](#switch-classname)
+  - [Switch `disabled`](#switch-disabled)
+  - [Switch `index`, `name` and `text`](#switch-index-name-and-text)
+- [References](#references)
+  - [Accessibility concerns](#accessibility-concerns)
+- [Feedback](#feedback)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+## Overview
+
+Content switchers allow users to toggle between two or more content sections
+within the same space on screen. Only one content section is shown at a time.
+Create Switch components for each section in the content switcher.
+
+<Preview>
+  <Story id="contentswitcher--default" />
+</Preview>
+
+## Component API
+
+<Props />
+
+### ContentSwitcher `className`
+
+The className prop passed into `ContentSwitcher` will be forwarded along to the
+underlying wrapper `div.bx--content-switcher` element. This is useful for
+specifying a custom class name for layout.
+
+```jsx
+<ContentSwitcher className="some-class">...</ContentSwitcher>
+```
+
+### ContentSwitcher `light`
+
+In certain circumstances, a `ContentSwitcher` will exist on a container element
+with the same background color. To improve contrast, you can use the `light`
+property to toggle the light variant of the `ContentSwitcher`.
+
+```jsx
+<ContentSwitcher light>...</ContentSwitcher>
+```
+
+### ContentSwitcher `onChange`
+
+This is a required prop. You will need to specify a function to run when the
+selection of the `ContentSwitcher` is changed.
+
+```jsx
+<ContentSwitcher
+  onChange={() => {
+    /* Code to run on change */
+  }}>
+  ...
+</ContentSwitcher>
+```
+
+### ContentSwitcher `selectedIndex`
+
+This prop allows you to specify which `ContentSwitcher` index you would like to
+be selected on initial render. This number defaults to `0`.
+
+<ContentSwitcher selectedIndex={2} onChange={() => {}}>
+  <Switch name="one" text="First section" />
+  <Switch name="two" text="Second section" />
+  <Switch name="three" text="Third section" />
+</ContentSwitcher>
+
+```jsx
+<ContentSwitcher selectedIndex={2} onChange={() => {}}>
+  <Switch name="one" text="First section" />
+  <Switch name="two" text="Second section" />
+  <Switch name="three" text="Third section" />
+</ContentSwitcher>
+```
+
+### ContentSwitcher `selectionMode`
+
+By default, when a `ContentSwitcher` is focused and an arrow key is pressed, the
+selection is updated immediately and the `onChange` is fired. However, sometimes
+you may want to only change the `selectedIndex` once a selection has been made.
+To do this, you can set the `selectionMode` to `manual`, and the `onChange` will
+only fire when a selection is made.
+
+<ContentSwitcher
+  selectionMode="manual"
+  onChange={() => {
+    console.log('change');
+  }}>
+  <Switch name="one" text="First section" />
+  <Switch name="two" text="Second section" />
+  <Switch name="three" text="Third section" />
+</ContentSwitcher>
+
+```jsx
+<ContentSwitcher
+  selectionMode="manual"
+  onChange={() => {
+    console.log('change');
+  }}>
+  <Switch name="one" text="First section" />
+  <Switch name="two" text="Second section" />
+  <Switch name="three" text="Third section" />
+</ContentSwitcher>
+```
+
+### Switch `className`
+
+The className prop passed into `Switch` will be forwarded along to the
+underlying wrapper `button` element.
+
+```jsx
+<ContentSwitcher>
+  <Switch className="switch-one" />
+  <Switch className="switch-two " />
+</ContentSwitcher>
+```
+
+### Switch `disabled`
+
+You can disable the `ContentSwitcher` by passing in `disabled` to the `Switch`
+elements directly.
+
+<ContentSwitcher>
+  <Switch disabled name="one" text="First section" />
+  <Switch disabled name="two" text="Second section" />
+  <Switch disabled name="three" text="Third section" />
+</ContentSwitcher>
+
+```jsx
+<ContentSwitcher>
+  <Switch disabled name="one" text="First section" />
+  <Switch disabled name="two" text="Second section" />
+  <Switch disabled name="three" text="Third section" />
+</ContentSwitcher>
+```
+
+### Switch `index`, `name` and `text`
+
+These are the values that will be returned in the `onChange` call.
+
+<ContentSwitcher
+  onChange={(obj) => {
+    const { index, name, text } = obj;
+    alert(`index: ${index} ||  name: ${name} || text: ${text}`);
+  }}>
+  <Switch name="one" text="First section" />
+  <Switch name="two" text="Second section" />
+  <Switch name="three" text="Third section" />
+</ContentSwitcher>
+
+```jsx
+<ContentSwitcher
+  onChange={(obj) => {
+    let { index, name, text } = obj;
+    alert(`index: ${index} ||  name: ${name} || text: ${text}`);
+  }}>
+  <Switch name="one" text="First section" />
+  <Switch name="two" text="Second section" />
+  <Switch name="three" text="Third section" />
+</ContentSwitcher>
+```
+
+## References
+
+### Accessibility concerns
+
+Each content switcher tab must have a unique title that clearly describes the
+content panel. This is particularly helpful for users of assistive technologies
+so they have the necessary information to efficiently navigate the content.
+
+Content authors need to ensure the content that is added to the tab panel is
+accessible. For example, if you add an image to the panel you need to include
+alternative text to pass accessibility testing.
+
+[W3C WAI-ARIA Tab Design Pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel)
+covers the usage of ARIA names, state and roles, as well as the expected
+keyboard interactions.
+
+[Carbon Usage Guidelines](https://www.carbondesignsystem.com/components/content-switcher/usage/)
+
+## Feedback
+
+Help us improve this component by providing feedback, asking questions, and
+leaving any other comments on
+[GitHub](https://github.com/carbon-design-system/carbon/edit/master/packages/react/src/components/ContentSwitcher/ContentSwitcher.mdx).