diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index d912b269c735..f823f3823373 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -102,6 +102,8 @@ Map {
       "kind": "primary",
       "size": "default",
       "tabIndex": 0,
+      "tooltipAlignment": "center",
+      "tooltipPosition": "top",
       "type": "button",
     },
     "displayName": "Button",
diff --git a/packages/react/src/components/Button/Button-story.js b/packages/react/src/components/Button/Button-story.js
index 1f29feb8279a..b32c2cadae02 100644
--- a/packages/react/src/components/Button/Button-story.js
+++ b/packages/react/src/components/Button/Button-story.js
@@ -6,7 +6,6 @@
  */
 
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
 import { iconAddSolid, iconSearch } from 'carbon-icons';
@@ -14,6 +13,7 @@ import { Add16, AddFilled16, Search16 } from '@carbon/icons-react';
 import Button from '../Button';
 import ButtonSkeleton from '../Button/Button.Skeleton';
 import ButtonSet from '../ButtonSet';
+import mdx from './Button.mdx';
 
 const icons = {
   None: 'None',
@@ -62,7 +62,13 @@ const props = {
     };
   },
   iconOnly: () => {
-    const iconToUse = iconMap[select('Icon (icon)', icons, 'Add16')];
+    let iconToUse;
+
+    if (iconMap[select('Icon (icon)', icons, 'Add16')] == undefined) {
+      iconToUse = Add16;
+    } else {
+      iconToUse = iconMap[select('Icon (icon)', icons, 'Add16')];
+    }
     return {
       className: 'some-class',
       kind: select(
@@ -114,90 +120,65 @@ const props = {
   },
 };
 
-Button.displayName = 'Button';
-
-const CustomLink = ({ children, href, ...other }) => (
-  <a href={href} {...other}>
-    {children}
-  </a>
-);
-
-storiesOf('Button', module)
-  .addParameters({
+export default {
+  title: 'Button',
+  decorators: [withKnobs],
+  parameters: {
     component: Button,
     subcomponents: {
+      ButtonSet,
       ButtonSkeleton,
     },
-  })
-  .addDecorator(withKnobs)
-  .add(
-    'Default',
-    () => {
-      const regularProps = props.regular();
-      return (
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            flexWrap: 'wrap',
-          }}>
-          <Button {...regularProps} className="some-class">
-            Button
-          </Button>
-          &nbsp;
-          <Button {...regularProps} href="#" className="some-class">
-            Link
-          </Button>
-          &nbsp;
-          <Button {...regularProps} as="p" href="#" className="some-class">
-            Element
-          </Button>
-          &nbsp;
-          <Button
-            {...regularProps}
-            as={CustomLink}
-            href="#"
-            className="some-class">
-            Custom component
-          </Button>
-        </div>
-      );
+    docs: {
+      page: mdx,
     },
-    {
-      info: {
-        text: `
-          Buttons are used to initialize an action, either in the background or
-          foreground of an experience.
-
-          There are several kinds of buttons.
+  },
+};
 
-          Primary buttons should be used for the principle call to action
-          on the page.
+export const _Default = () => {
+  return <Button>Button</Button>;
+};
 
-          Secondary buttons should be used for secondary actions on each page.
+_Default.story = {
+  name: 'Button',
+};
 
-          Danger buttons should be used for a negative action (such as Delete) on the page.
+export const Secondary = () => {
+  return <Button kind="secondary">Button</Button>;
+};
 
-          Modify the behavior of the button by changing its event properties.
+export const Tertiary = () => {
+  return <Button kind="tertiary">Button</Button>;
+};
 
-          Field buttons may be use directly next to an input element, to visually align their heights.
+export const Danger = () => {
+  return <Button kind="danger">Button</Button>;
+};
 
-          Small buttons may be used when there is not enough space for a
-          regular sized button. This issue is most found in tables. Small button should have three words
-          or less.
+export const Ghost = () => {
+  return <Button kind="ghost">Button</Button>;
+};
 
-          When words are not enough, icons can be used in buttons to better communicate what the button does. Icons are
-          always paired with text.
-        `,
-      },
-    }
-  )
-  .add('Icon-only buttons', () => <Button {...props.iconOnly()} hasIconOnly />)
-  .add(
-    'Sets of Buttons',
-    () => {
-      const { stacked, ...buttonProps } = props.set();
-      return (
+export const Playground = () => {
+  const regularProps = props.regular();
+  const iconOnly = props.iconOnly();
+  const { stacked, ...buttonProps } = props.set();
+  return (
+    <>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          flexWrap: 'wrap',
+        }}>
+        <Button {...regularProps}>Button</Button>
+        &nbsp;
+        <Button hasIconOnly {...iconOnly}></Button>
+      </div>
+      <div
+        style={{
+          marginTop: '1rem',
+        }}>
         <ButtonSet stacked={stacked}>
           <Button kind="secondary" {...buttonProps}>
             Secondary button
@@ -206,32 +187,30 @@ storiesOf('Button', module)
             Primary button
           </Button>
         </ButtonSet>
-      );
-    },
-    {
-      info: {
-        text: `
-          When an action required by the user has more than one option, always use a negative action button (secondary) paired with a positive action button (primary) in that order. Negative action buttons will be on the left. Positive action buttons should be on the right. When these two types buttons are paired in the correct order, they will automatically space themselves apart.
-        `,
-      },
-    }
-  )
-  .add(
-    'skeleton',
-    () => (
-      <div>
-        <ButtonSkeleton />
-        &nbsp;
-        <ButtonSkeleton href="#" />
-        &nbsp;
-        <ButtonSkeleton size="small" />
       </div>
-    ),
-    {
-      info: {
-        text: `
-          Placeholder skeleton state to use when content is loading.
-        `,
-      },
-    }
+    </>
   );
+};
+
+export const IconButton = () => <Button {...props.iconOnly()} hasIconOnly />;
+
+IconButton.story = {
+  name: 'Icon Button',
+};
+
+export const SetOfButtons = () => {
+  return (
+    <ButtonSet>
+      <Button kind="secondary">Secondary button</Button>
+      <Button kind="primary">Primary button</Button>
+    </ButtonSet>
+  );
+};
+
+export const Skeleton = () => (
+  <div>
+    <ButtonSkeleton />
+    &nbsp;
+    <ButtonSkeleton small />
+  </div>
+);
diff --git a/packages/react/src/components/Button/Button.js b/packages/react/src/components/Button/Button.js
index 8d13c0dfd335..c5b5baf7c5e9 100644
--- a/packages/react/src/components/Button/Button.js
+++ b/packages/react/src/components/Button/Button.js
@@ -206,6 +206,8 @@ Button.defaultProps = {
   disabled: false,
   kind: 'primary',
   size: 'default',
+  tooltipAlignment: 'center',
+  tooltipPosition: 'top',
 };
 
 export default Button;
diff --git a/packages/react/src/components/Button/Button.mdx b/packages/react/src/components/Button/Button.mdx
new file mode 100644
index 000000000000..f8f0e668b247
--- /dev/null
+++ b/packages/react/src/components/Button/Button.mdx
@@ -0,0 +1,308 @@
+import { Story, Props, Source, Preview } from '@storybook/addon-docs/blocks';
+import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
+import * as stories from './Button-story.js';
+import Button from '../Button';
+import ButtonSet from '../ButtonSet';
+import { Add16, Delete16 } from '@carbon/icons-react';
+
+# Button
+
+<!-- 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)
+- [Skeleton state](#skeleton-state)
+- [Component API](#component-api)
+- [References](#references)
+- [Feedback](#feedback)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+## Overview
+
+Buttons are clickable elements that are used to trigger actions. They
+communicate calls to action to the user and allow users to interact with pages
+in a variety of ways. `Button` labels express what action will occur when the
+user interacts with it.
+
+<Preview>
+  <Story id="button--default" />
+  <Story id="button--secondary" />
+  <Story id="button--tertiary" />
+  <Story id="button--danger" />
+  <Story id="button--ghost" />
+</Preview>
+
+## Icon-only Buttons
+
+Icon buttons allow users to take actions, and make choices, with a single tap.
+Icon buttons can take the form of any of the five types (Primary, Secondary,
+Tertiary, Danger and Ghost) but most commonly will be styled as primary or ghost
+buttons.
+
+<Preview>
+  <Story id="button--icon-button" />
+</Preview>
+
+## Set of Buttons
+
+You can wrap two `Button` elements in a `ButtonSet` when an action required by
+the user has more than one option. Always use a negative action button
+(secondary) paired with a positive action button (primary) in that order.
+Negative action buttons will be on the left. Positive action buttons should be
+on the right. When these two types buttons are paired in the correct order, they
+will automatically space themselves apart.
+
+<Preview>
+  <Story id="button--set-of-buttons" />
+</Preview>
+
+## Skeleton state
+
+You can use the `ButtonSkeleton` component to render a skeleton variant of a
+button. This is useful to display on initial page load to indicate to users that
+content is being loaded.
+
+<Preview>
+  <Story id="button--skeleton" />
+</Preview>
+
+## Component API
+
+<Props sort="asc" />
+
+Additional props passed into `Button` will be forwarded along to the underlying
+button element.
+
+### Button `as`
+
+This prop allows you to specify a different element to be rendered as a
+`Button`. You may also need to add a [role](#button-role) for accessibility if
+an element other than a `button` is rendered.
+
+```jsx
+<Button as="div" role="button">
+  I'm a div tag
+</Button>
+```
+
+### Button `className`
+
+The className prop passed into `Button` will be forwarded along to the
+underlying `Button` element. This is useful for specifying a custom class name
+for layout.
+
+```jsx
+<Button className="custom-class">Submit</Button>
+```
+
+### Button `hasIconOnly`
+
+Use this prop to render the icon-only variant of `Button`. First you'll pass in
+the `renderIcon` prop to tell the `Button` which icon to render. Next, you'll
+need to specify the `iconDescription` ([read more](#button-icondescription)),
+which is used to populate the tooltip that is shown when the icon button is
+interacted with, as well as internal `aria-label` for screen-readers. Lastly,
+you can configure both the `tooltipAlignment`
+([read more](#button-tooltipalignment)) and `tooltipPosition`
+([read more](#button-tooltipposition)) props to tell the `Button` where your
+tooltip should be rendered. These props default to `center` and `bottom`,
+respectively.
+
+<Button hasIconOnly renderIcon={Add16} iconDescription="Add" />
+
+```jsx
+<Button hasIconOnly renderIcon={Add16} iconDescription="Add" />
+```
+
+### Button `href`
+
+This prop allows you to specify an address to navigate to on click. This will
+change the underlying `Button` element to be rendered as an `a` anchor element.
+
+<Button href="https://www.carbondesignsystem.com">Navigate</Button>
+
+```jsx
+<Button href="https://www.carbondesignsystem.com">Navigate</Button>
+```
+
+### Button `iconDescription`
+
+If using the `hasIconOnly` prop, `iconDescription` becomes a required prop for
+accessibility reasons. The text provided here populates the internal
+`aria-label` tag on the icon, as well as provides text to be shown when the icon
+button is interacted with.
+
+```jsx
+<Button hasIconOnly renderIcon={Add16} iconDescription="Add" />
+```
+
+### Button `kind`
+
+Carbon has five types of buttons, `primary`, `secondary`, `tertiary`, `ghost`,
+and `danger`. If no `kind` is specified, a `primary` button will be rendered.
+For more information on when to use each variant, check out the
+[design documentation](https://www.carbondesignsystem.com/components/button/usage#overview)
+
+<Button>Primary</Button> <Button kind="secondary">Secondary</Button> <Button kind="tertiary">
+  Tertiary{' '}
+</Button> <Button kind="danger">Danger</Button> <Button kind="ghost">
+  Ghost
+</Button>
+
+```jsx
+<Button>Primary</Button>
+<Button kind="secondary">Secondary</Button>
+<Button kind="tertiary">Tertiary</Button>
+<Button kind="danger">Danger</Button>
+<Button kind="ghost">Ghost</Button>
+```
+
+### Button `renderIcon`
+
+This prop is used to tell `Button` which icon should be rendered inside the
+button. Before you pass in the icon, you'll need to import the icon(s) you would
+like to render, like so:
+
+```js
+import { Add16, Delete16 } from '@carbon/icons-react';
+```
+
+Once the icons are imported, you can pass them directly in to the `Button`
+component. Keep in mind, you will also need to add an `iconDescription` to help
+with screen-reader support if you use the `renderIcon` prop. If you are trying
+to render icon-only buttons, please refer to the section on the
+[hasIconOnly](#button-hasicononly) prop
+
+<Button renderIcon={Add16} iconDescription="Add">
+  Add
+</Button> <Button renderIcon={Delete16} kind="danger" iconDescription="Delete">
+  Delete
+</Button>
+
+```jsx
+<Button renderIcon={Add16} iconDescription="Add">Add</Button>
+<Button renderIcon={Delete16} kind="danger"  iconDescription="Delete">Delete</Button>
+```
+
+### Button `role`
+
+If you use the [as](#button-as) prop to render a non-button as a button, you may
+need to add a `role` for accessibility reasons. Adding `role="button"` will make
+an element appear as a button control to a screen reader. Check out the
+[References](#references) section for more information.
+
+<Button as="div" role="button">
+  a11y Button
+</Button>
+
+```jsx
+<Button as="div" role="button">
+  a11y Button
+</Button>
+```
+
+### Button `size`
+
+This prop specifies which size the `Button` should be rendered at. Valid values
+are `field`, `small`, and `default`. If no `size` is specified, it renders as
+`default`.
+
+<Button>Submit</Button> <Button size="field">Submit</Button> <Button size="small">
+  Submit
+</Button>
+
+```jsx
+<Button>Submit</Button>
+<Button size="field">Submit</Button>
+<Button size="small">Submit</Button>
+```
+
+### Button `tooltipAlignment`
+
+The `tooltipAlignment` prop is used to change where the tooltip text and caret
+is rendered in relation to the `Button`. Accepted options are `start`, `center`,
+and `end`. The default alignment is `center`.
+
+<Button
+  hasIconOnly
+  renderIcon={Add16}
+  iconDescription="Add to selection"
+  tooltipAlignment="start"
+/> <Button hasIconOnly renderIcon={Add16} iconDescription="Add to selection" /> <Button
+  hasIconOnly
+  renderIcon={Add16}
+  iconDescription="Add to selection"
+  tooltipAlignment="end"
+/>
+
+```jsx
+<Button hasIconOnly renderIcon={Add16} iconDescription="Add to selection" tooltipAlignment="start" />
+<Button hasIconOnly renderIcon={Add16} iconDescription="Add to selection" />
+<Button hasIconOnly renderIcon={Add16} iconDescription="Add to selection" tooltipAlignment="end"/>
+```
+
+### Button `tooltipPosition`
+
+When using an icon-only button, you may be in a situation where you need to
+change where the tooltip is positioned on the screen. `tooltipPosition` takes in
+a position and will render the tooltip accordingly. Accepted options are `top`,
+`bottom`, `left`, and `right`. The default is position is `top`.
+
+<Button hasIconOnly renderIcon={Add16} iconDescription="Add" /> <Button
+  hasIconOnly
+  renderIcon={Add16}
+  iconDescription="Add"
+  tooltipPosition="right"
+/> <Button
+  hasIconOnly
+  renderIcon={Add16}
+  iconDescription="Add"
+  tooltipPosition="bottom"
+/> <Button
+  hasIconOnly
+  renderIcon={Add16}
+  iconDescription="Add"
+  tooltipPosition="left"
+/>
+
+```jsx
+<Button hasIconOnly renderIcon={Add16} iconDescription="Add" />
+<Button hasIconOnly renderIcon={Add16} iconDescription="Add" tooltipPosition="right"/>
+<Button hasIconOnly renderIcon={Add16} iconDescription="Add" tooltipPosition="bottom"/>
+<Button hasIconOnly renderIcon={Add16} iconDescription="Add" tooltipPosition="left" />
+```
+
+### ButtonSet `stacked`
+
+By passing in `stacked` to the `ButtonSet` component, you can arrange your two
+`Button` elements vertically
+
+<ButtonSet stacked>
+  <Button kind="secondary">Secondary button</Button>
+  <Button kind="primary">Primary button</Button>
+</ButtonSet>
+
+```jsx
+<ButtonSet stacked>
+  <Button kind="secondary">Secondary button</Button>
+  <Button kind="primary">Primary button</Button>
+</ButtonSet>
+```
+
+## 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)
+
+## 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/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
index e4b9f7388dff..d72b44f0bdef 100644
--- a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
+++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
@@ -1891,6 +1891,8 @@ exports[`DataTable should render 1`] = `
                   onClick={[MockFunction]}
                   size="small"
                   tabIndex={0}
+                  tooltipAlignment="center"
+                  tooltipPosition="top"
                   type="button"
                 >
                   Add new
@@ -2053,6 +2055,8 @@ exports[`DataTable should render 1`] = `
                       }
                       size="default"
                       tabIndex={0}
+                      tooltipAlignment="center"
+                      tooltipPosition="top"
                       type="button"
                     >
                       <button
@@ -2123,6 +2127,8 @@ exports[`DataTable should render 1`] = `
                       }
                       size="default"
                       tabIndex={0}
+                      tooltipAlignment="center"
+                      tooltipPosition="top"
                       type="button"
                     >
                       <button
@@ -2193,6 +2199,8 @@ exports[`DataTable should render 1`] = `
                       }
                       size="default"
                       tabIndex={0}
+                      tooltipAlignment="center"
+                      tooltipPosition="top"
                       type="button"
                     >
                       <button
@@ -2249,6 +2257,8 @@ exports[`DataTable should render 1`] = `
                     onClick={[Function]}
                     size="default"
                     tabIndex={-1}
+                    tooltipAlignment="center"
+                    tooltipPosition="top"
                     type="button"
                   >
                     <button
@@ -2505,6 +2515,8 @@ exports[`DataTable should render 1`] = `
                 onClick={[MockFunction]}
                 size="small"
                 tabIndex={0}
+                tooltipAlignment="center"
+                tooltipPosition="top"
                 type="button"
               >
                 <button
@@ -2887,6 +2899,8 @@ exports[`DataTable sticky header should render 1`] = `
                   onClick={[MockFunction]}
                   size="small"
                   tabIndex={0}
+                  tooltipAlignment="center"
+                  tooltipPosition="top"
                   type="button"
                 >
                   Add new
@@ -3052,6 +3066,8 @@ exports[`DataTable sticky header should render 1`] = `
                       }
                       size="default"
                       tabIndex={0}
+                      tooltipAlignment="center"
+                      tooltipPosition="top"
                       type="button"
                     >
                       <button
@@ -3122,6 +3138,8 @@ exports[`DataTable sticky header should render 1`] = `
                       }
                       size="default"
                       tabIndex={0}
+                      tooltipAlignment="center"
+                      tooltipPosition="top"
                       type="button"
                     >
                       <button
@@ -3192,6 +3210,8 @@ exports[`DataTable sticky header should render 1`] = `
                       }
                       size="default"
                       tabIndex={0}
+                      tooltipAlignment="center"
+                      tooltipPosition="top"
                       type="button"
                     >
                       <button
@@ -3248,6 +3268,8 @@ exports[`DataTable sticky header should render 1`] = `
                     onClick={[Function]}
                     size="default"
                     tabIndex={-1}
+                    tooltipAlignment="center"
+                    tooltipPosition="top"
                     type="button"
                   >
                     <button
@@ -3504,6 +3526,8 @@ exports[`DataTable sticky header should render 1`] = `
                 onClick={[MockFunction]}
                 size="small"
                 tabIndex={0}
+                tooltipAlignment="center"
+                tooltipPosition="top"
                 type="button"
               >
                 <button
diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap
index 1bb1e74de4af..ecfb9147d0f6 100644
--- a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap
+++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap
@@ -24,6 +24,8 @@ exports[`DataTable.TableBatchAction should render 1`] = `
     }
     size="default"
     tabIndex={0}
+    tooltipAlignment="center"
+    tooltipPosition="top"
     type="button"
   >
     <button
diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchActions-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchActions-test.js.snap
index c696254e99cf..7b8c8a88b2a1 100644
--- a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchActions-test.js.snap
+++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchActions-test.js.snap
@@ -33,6 +33,8 @@ exports[`DataTable.TableBatchActions should render 1`] = `
           onClick={[MockFunction]}
           size="default"
           tabIndex={-1}
+          tooltipAlignment="center"
+          tooltipPosition="top"
           type="button"
         >
           <button
@@ -84,6 +86,8 @@ exports[`DataTable.TableBatchActions should render 2`] = `
           onClick={[MockFunction]}
           size="default"
           tabIndex={0}
+          tooltipAlignment="center"
+          tooltipPosition="top"
           type="button"
         >
           <button
diff --git a/packages/react/src/components/ModalWrapper/__snapshots__/ModalWrapper-test.js.snap b/packages/react/src/components/ModalWrapper/__snapshots__/ModalWrapper-test.js.snap
index 3aece0432c3e..973533a32473 100644
--- a/packages/react/src/components/ModalWrapper/__snapshots__/ModalWrapper-test.js.snap
+++ b/packages/react/src/components/ModalWrapper/__snapshots__/ModalWrapper-test.js.snap
@@ -30,6 +30,8 @@ exports[`ModalWrapper should render 1`] = `
       onClick={[Function]}
       size="default"
       tabIndex={0}
+      tooltipAlignment="center"
+      tooltipPosition="top"
       type="button"
     >
       <button
@@ -161,6 +163,8 @@ exports[`ModalWrapper should render 1`] = `
                 onClick={[Function]}
                 size="default"
                 tabIndex={0}
+                tooltipAlignment="center"
+                tooltipPosition="top"
                 type="button"
               >
                 <button
@@ -179,6 +183,8 @@ exports[`ModalWrapper should render 1`] = `
                 onClick={[Function]}
                 size="default"
                 tabIndex={0}
+                tooltipAlignment="center"
+                tooltipPosition="top"
                 type="button"
               >
                 <button