diff --git a/cypress/integration/Button.spec.ts b/cypress/integration/Button.spec.ts
index 2dae24ec00..d33179542d 100644
--- a/cypress/integration/Button.spec.ts
+++ b/cypress/integration/Button.spec.ts
@@ -7,7 +7,7 @@ describe('Button', () => {
 
   context('given primary buttons are rendered', () => {
     beforeEach(() => {
-      h.stories.load('Components|Buttons/Button/React', 'Primary');
+      h.stories.load('Components|Buttons/Button/React/Standard', 'Primary');
     });
 
     it('should not have any axe errors', () => {
diff --git a/eslintrc.js b/eslintrc.js
index ac148570bc..4d5079b04f 100644
--- a/eslintrc.js
+++ b/eslintrc.js
@@ -75,7 +75,7 @@ module.exports = {
     'no-param-reassign': 'error',
     'no-undef-init': 'error',
     'no-unused-labels': 'error',
-    'no-use-before-define': 'warn', // Decide on this
+    'no-use-before-define': ['warn', {functions: false, classes: true}],
     'no-var': 'error',
     'prefer-const': 'error',
     'quote-props': 'off',
diff --git a/modules/_labs/pagination/react/lib/Pages.tsx b/modules/_labs/pagination/react/lib/Pages.tsx
index 377c3e110d..6dae2fdd56 100644
--- a/modules/_labs/pagination/react/lib/Pages.tsx
+++ b/modules/_labs/pagination/react/lib/Pages.tsx
@@ -19,17 +19,21 @@ const noPointerEvents = css({
   pointerEvents: 'none',
 });
 
+const autoWidth = css({
+  width: 'auto',
+});
+
 const ellipsisStyle = css(noPointerEvents, {
   width: canvas.spacing.l,
   textAlign: 'center',
   display: 'inline-block',
 });
 
-const noTransitions = css({
+const noTransitions = css(autoWidth, {
   '&:not(:hover)': {transition: 'none !important'},
 });
 
-const activeStyling = css(noPointerEvents, noTransitions, {
+const activeStyling = css(noPointerEvents, noTransitions, autoWidth, {
   color: canvas.colors.frenchVanilla100,
 });
 
diff --git a/modules/button/react/README.md b/modules/button/react/README.md
index e43fe5fcd4..3d6b36efaf 100644
--- a/modules/button/react/README.md
+++ b/modules/button/react/README.md
@@ -22,15 +22,13 @@ yarn add @workday/canvas-kit-react-button
 > primary, and accompanying secondary, and delete). These are still avialable, but will be removed
 > in the first major release after they are available for all Workday customers. The biggest change
 > is with regards to colors and styling, but the behavior should remain the same.
-
-### New Button
-
-Anywhere you were using `Button`, you will automatically get the updated styling (previously
-`beta_Button`). This will be a visual breaking change (padding and colors have changed). Note, we
-are still supporting the import for `beta_Button` as well. However, if you are using
-`import {beta_Button as Button}...` you can remove it now too since this too will be removed in a
-future release. The new buttons include: blue primary button, and accompanying secondary, delete,
-outline, and dropdown buttons. The import and usage is documented below.
+>
+> ### New Button
+>
+> Anywhere you were using `Button`, you will automatically get the updated styling (previously
+> `beta_Button`). This will be a visual breaking change (padding and colors have changed). The new
+> buttons include: blue primary button, and accompanying secondary, delete, outline, highlight, and
+> dropdown buttons. The import and usage is documented below.
 
 ### Deprecated Buttons
 
@@ -51,7 +49,19 @@ able to compile your code.
 
 ---
 
-## Button
+## Table of Contents
+
+- [Button](#button)
+- [DeleteButton](#deletebutton)
+- [DropdownButton](#dropdownbutton)
+- [HighlightButton](#highlightbutton)
+- [OutlineButton](#outlinebutton)
+- [TextButton](#textbutton)
+- [Icon Button](#icon-button)
+
+---
+
+# Button
 
 ```tsx
 import * as React from 'react';
@@ -62,7 +72,7 @@ import {Button} from '@workday/canvas-kit-react-button';
 
 ## Static Properties
 
-#### `Sizes: ButtonSize`
+#### `Size: 'small' | 'medium' | 'large'`
 
 ```tsx
 <Button size={Button.Size.Small}>Small Button</Button>
@@ -70,7 +80,7 @@ import {Button} from '@workday/canvas-kit-react-button';
 
 ---
 
-#### `Types: ButtonVariant`
+#### `Variant: ButtonVariant`
 
 ```tsx
 <Button variant={Button.Variant.Primary}>Primary Button</Button>
@@ -96,21 +106,220 @@ Default: `ButtonVariant.Secondary`
 | ----------- | ------------------------------- |
 | `Primary`   | Blue background, white text     |
 | `Secondary` | Gray background, dark gray text |
-| `Delete`    | Red background, dark text       |
 
 ---
 
-#### `size: ButtonSize`
+#### `size: 'small' | 'medium' | 'large'`
+
+> The size of the button
+
+Default: `'medium'`
+
+| Theme    | Description                            |
+| -------- | -------------------------------------- |
+| `small`  | 24px tall, small padding, small text   |
+| `medium` | 32px tall, medium padding, medium text |
+| `large`  | 48px tall, large padding, larger text  |
+
+---
+
+#### `grow: boolean`
+
+> If true, the button will grow to its container's width.
+
+Default: `false`
+
+---
+
+#### `buttonRef: React.Ref<HTMLButtonElement>`
+
+> Returns the ref to the rendered HTMLButtonElement.
+
+---
+
+#### `dataLabel: String`
+
+> The data label of the button (generally used for media timestamps).
+>
+> Note: not displayed at `small` size.
+
+---
+
+### `icon: CanvasSystemIcon`
+
+> The icon of the button.
+>
+> Note: not displayed at `small` size.
+
+---
+
+# DeleteButton
+
+```tsx
+import * as React from 'react';
+import {DeleteButton} from '@workday/canvas-kit-react-button';
+
+<DeleteButton>Button Label</DeleteButton>;
+```
+
+## Static Properties
+
+#### `Size: 'small' | 'medium' | 'large'`
+
+```tsx
+<DeleteButton size={DeleteButton.Size.Small}>Small Button</DeleteButton>
+```
+
+## Component Props
+
+### Required
+
+#### `children: ReactNode`
+
+> Buttons cannot be empty
+
+### Optional
+
+#### `size: 'small' | 'medium' | 'large'`
+
+> The size of the button
+
+Default: `'medium'`
+
+| Theme    | Description                            |
+| -------- | -------------------------------------- |
+| `small`  | 24px tall, small padding, small text   |
+| `medium` | 32px tall, medium padding, medium text |
+| `large`  | 48px tall, large padding, larger text  |
+
+---
+
+#### `buttonRef: React.Ref<HTMLButtonElement>`
+
+> Returns the ref to the rendered HTMLButtonElement.
+
+---
+
+#### `grow: boolean`
+
+> If true, the button will grow to its container's width.
+
+Default: `false`
+
+---
+
+# DropdownButton
+
+```tsx
+import * as React from 'react';
+import {DropdownButton} from '@workday/canvas-kit-react-button';
+
+<DropdownButton>Button Label</DropdownButton>;
+```
+
+## Static Properties
+
+#### `Size: 'medium' | 'large'`
+
+```tsx
+<DropdownButton size={DropdownButton.Size.Large}>Large Button</DropdownButton>
+```
+
+---
+
+#### `Variant: DropdownButtonVariant`
+
+```tsx
+<DropdownButton variant={DropdownButton.Variant.Primary}>Primary Button</DropdownButton>
+```
+
+## Component Props
+
+### Required
+
+#### `children: ReactNode`
+
+> Buttons cannot be empty
+
+### Optional
+
+#### `variant: ButtonVariant`
+
+> The type of the button
+
+Default: `DropdownButtonVariant.Secondary`
+
+| Theme       | Description                          |
+| ----------- | ------------------------------------ |
+| `Primary`   | Blue background, white text/icon     |
+| `Secondary` | Gray background, dark gray text/icon |
+
+---
+
+#### `size: 'medium' | 'large'`
+
+> The size of the button
+
+Default: `'medium'`
+
+| Theme    | Description                            |
+| -------- | -------------------------------------- |
+| `medium` | 32px tall, medium padding, medium text |
+| `large`  | 48px tall, large padding, larger text  |
+
+---
+
+#### `grow: boolean`
+
+> If true, the button will grow to its container's width.
+
+Default: `false`
+
+---
+
+#### `buttonRef: React.Ref<HTMLButtonElement>`
+
+> Returns the ref to the rendered HTMLButtonElement.
+
+---
+
+# HighlightButton
+
+```tsx
+import * as React from 'react';
+import {HighlightButton} from '@workday/canvas-kit-react-button';
+
+<HighlightButton>Button Label</HighlightButton>;
+```
+
+## Static Properties
+
+#### `Size: 'medium' | 'large'`
+
+```tsx
+<HighlightButton size={HighlightButton.Size.Large}>Large Button</HighlightButton>
+```
+
+## Component Props
+
+### Required
+
+#### `children: ReactNode`
+
+> Buttons cannot be empty
+
+### Optional
+
+#### `size: 'medium' | 'large'`
 
 > The size of the button
 
-Default: `ButtonSize.Large`
+Default: `'medium'`
 
 | Theme    | Description                            |
 | -------- | -------------------------------------- |
-| `Small`  | 18px tall, small padding, small text   |
-| `Medium` | 24px tall, medium padding, medium text |
-| `Large`  | 40px tall, large padding, larger text  |
+| `medium` | 32px tall, medium padding, medium text |
+| `large`  | 48px tall, large padding, larger text  |
 
 ---
 
@@ -126,6 +335,195 @@ Default: `false`
 
 > Returns the ref to the rendered HTMLButtonElement.
 
+---
+
+### `icon: CanvasSystemIcon`
+
+> The icon of the button
+
+---
+
+# OutlineButton
+
+```tsx
+import * as React from 'react';
+import {OutlineButton} from '@workday/canvas-kit-react-button';
+
+<OutlineButton>Button Label</OutlineButton>;
+```
+
+## Static Properties
+
+#### `Size: 'small' | 'medium' | 'large'`
+
+```tsx
+<OutlineButton size={OutlineButton.Size.Small}>Small Button</OutlineButton>
+```
+
+---
+
+#### `Variant: OutlineButtonVariant`
+
+```tsx
+<OutlineButton variant={OutlineButton.Variant.Primary}>Primary Button</OutlineButton>
+```
+
+## Component Props
+
+### Required
+
+#### `children: ReactNode`
+
+> Buttons cannot be empty
+
+### Optional
+
+#### `variant: ButtonVariant`
+
+> The type of the button
+
+Default: `OutlineButtonVariant.Secondary`
+
+| Theme       | Description                                   |
+| ----------- | --------------------------------------------- |
+| `Primary`   | Transparent background, blue border and text  |
+| `Secondary` | Transparent background, gray border and text  |
+| `Inverse`   | Transparent background, white border and text |
+
+---
+
+#### `size: 'small' | 'medium' | 'large'`
+
+> The size of the button
+
+Default: `'medium'`
+
+| Theme    | Description                            |
+| -------- | -------------------------------------- |
+| `small`  | 24px tall, small padding, small text   |
+| `medium` | 32px tall, medium padding, medium text |
+| `large`  | 48px tall, large padding, larger text  |
+
+---
+
+#### `grow: boolean`
+
+> If true, the button will grow to its container's width.
+
+Default: `false`
+
+---
+
+#### `buttonRef: React.Ref<HTMLButtonElement>`
+
+> Returns the ref to the rendered HTMLButtonElement.
+
+---
+
+#### `dataLabel: String`
+
+> The data label of the button (generally used for media timestamps)
+>
+> Note: not displayed at `small` size.
+
+---
+
+### `icon: CanvasSystemIcon`
+
+> The icon of the button
+>
+> Note: not displayed at `small` size.
+
+---
+
+# TextButton
+
+```tsx
+import * as React from 'react';
+import {TextButton} from '@workday/canvas-kit-react-button';
+
+<TextButton>Button Label</TextButton>;
+```
+
+## Static Properties
+
+#### `Size: 'small' | 'medium'`
+
+```tsx
+<TextButton size={TextButton.Size.Small}>Small Button</TextButton>
+```
+
+---
+
+#### `Variant: ButtonVariant`
+
+```tsx
+<TextButton variant={TextButton.Variant.Inverse}>Inverse Button</TextButton>
+```
+
+## Component Props
+
+### Required
+
+#### `children: ReactNode`
+
+> Buttons cannot be empty
+
+### Optional
+
+#### `variant: TextButtonVariant`
+
+> The type of the button
+
+Default: `TextButtonVariant.Default`
+
+| Theme     | Description |
+| --------- | ----------- |
+| `Default` | Blue text   |
+| `Inverse` | White text  |
+
+---
+
+#### `size: 'small' | 'medium' | 'large'`
+
+> The size of the button
+
+Default: `'medium'`
+
+| Theme    | Description                            |
+| -------- | -------------------------------------- |
+| `small`  | 24px tall, small padding, small text   |
+| `medium` | 32px tall, medium padding, medium text |
+| `large`  | 48px tall, large padding, larger text  |
+
+---
+
+#### `iconPosition: ButtonIconPosition`
+
+> The position of the TextButton icon.
+
+Default: `ButtonIconPosition.Left`
+
+---
+
+#### `buttonRef: React.Ref<HTMLButtonElement>`
+
+> Returns the ref to the rendered HTMLButtonElement.
+
+---
+
+### `icon: CanvasSystemIcon`
+
+> The icon of the button.
+
+---
+
+### `allCaps: boolean`
+
+> The capitialization of the text in the button.
+
+---
+
 # Icon Button
 
 > Button containing an icon. Icon may be a component from
@@ -139,16 +537,12 @@ import {IconButton} from '@workday/canvas-kit-react-button';
 import {SystemIcon} from '@workday/canvas-kit-react-icon';
 import {activityStreamIcon} from '@workday/canvas-system-icons-web';
 
-<IconButton title="Activity Stream" aria-label="Activity Stream">
-  <SystemIcon icon={activityStreamIcon} />
-</IconButton>;
-
 <IconButton icon={activityStreamIcon} title="Activity Stream" aria-label="Activity Stream" />;
 ```
 
 ## Static Properties
 
-#### `Sizes: ButtonSize`
+#### `Size: 'small' | 'medium'`
 
 ```tsx
 <IconButton size={IconButton.Size.Small} icon={xIcon} />
@@ -156,7 +550,7 @@ import {activityStreamIcon} from '@workday/canvas-system-icons-web';
 
 ---
 
-#### `Types: IconButtonVariant`
+#### `Variant: IconButtonVariant`
 
 ```tsx
 <IconButton variant={IconButton.Variant.Plain} icon={xIcon} />
@@ -196,18 +590,16 @@ Default: `IconButtonVariant.Circle`
 
 ---
 
-#### `size: ButtonSize.Small | ButtonSize.Medium`
+#### `size: 'small' | 'medium`
 
 > The size of the icon button
 
-Default: `ButtonSize.Medium`
+Default: `'medium'`
 
-| Theme                       | Description                   | Is Default |
-| --------------------------- | ----------------------------- | ---------- |
-| `Small`                     | 32px Diameter, 20px Icon Size | False      |
-| `Medium`                    | 40px Diameter, 24px Icon Size | True       |
-| `Small` (Square Icon Type)  | 32px x 32px, 24px Icon Size   | True       |
-| `Medium` (Square Icon Type) | 40px x 40px, 24px Icon Size   | False      |
+| Theme    | Description                   | Is Default |
+| -------- | ----------------------------- | ---------- |
+| `Small`  | 32px Diameter, 20px Icon Size | False      |
+| `Medium` | 40px Diameter, 24px Icon Size | True       |
 
 ---
 
@@ -231,68 +623,19 @@ Default: `undefined`
 
 ---
 
-#### `value: string`
-
-> Value of the button. Must be unique if used within an IconButtonToggleGroup.
-
-## Accessibility Notes
-
-> The content of an IconButton is not always clear to the user. In order to better convey what the
-> icon represents, the IconButton should be initialized with `title` and `aria-label` attributes.
-
-# Icon Button Toggle Group
-
-> Group of buttons containing an icon. This is a
-> [_controlled_](https://reactjs.org/docs/forms.html#controlled-components) component.
-
-## Usage
-
-```tsx
-import * as React from 'react';
-import {IconButton, IconButtonToggleGroup} from '@workday/canvas-kit-react-button';
-import {listViewIcon, worksheetsIcon} from '@workday/canvas-system-icons-web';
-
-<IconButtonToggleGroup>
-  <IconButton icon={listViewIcon} value="list-view" title="List View" aria-label="List View" />
-  <IconButton icon={worksheetsIcon} value="table-view" title="Worksheets" aria-label="Worksheets" />
-</IconButtonToggleGroup>;
-```
-
-**Note:** while managing state using a unique `value` for each `IconButton` child is encouraged, you
-can also use indexes and omit the `value` field. It is strongly recommended to not mix these two
-methods.
-
-## Static Properties
-
-> None
-
-## Component Props
-
-### Required
-
-#### `children: React.ReactElement<IconButton>[]`
-
-> Icon buttons to toggle between.
-
----
-
-### Optional
-
-#### `value: string | number`
+#### `buttonRef: React.Ref<HTMLButtonElement>`
 
-> Identify which item is selected (toggled=true). If a string is passed, the IconButton with the
-> corresponding value will be selected. If a number is passed, the IconButton with the corresponding
-> index will be selected.
+> Returns the ref to the rendered HTMLButtonElement.
 
 ---
 
-#### `isRTL: boolean`
+### `icon: CanvasSystemIcon`
 
-> Identify whether to render from right to left
+> The icon of the button. Optional because IconButton can also wrap a SystemIcon component.
 
 ---
 
-#### `onChange: (value:string | number)=> void`
+## Accessibility Notes
 
-> Callback function when a toggle button is selected. The value (if defined) or the index of the
-> button will be returned.
+> The content of an IconButton is not always clear to the user. In order to better convey what the
+> icon represents, the IconButton should be initialized with `title` and `aria-label` attributes.
diff --git a/modules/button/react/index.ts b/modules/button/react/index.ts
index 132e7b7f30..d5d3252c25 100644
--- a/modules/button/react/index.ts
+++ b/modules/button/react/index.ts
@@ -1,17 +1,10 @@
-import Button from './lib/Button';
+export {default as Button, default as beta_Button, ButtonProps} from './lib/Button';
 
-export default Button;
-export {
-  default as Button,
-  default as beta_Button,
-  deprecated_Button,
-  ButtonProps,
-} from './lib/Button';
+export {default as DeleteButton, DeleteButtonProps} from './lib/DeleteButton';
+export {default as deprecated_Button, DeprecatedButtonProps} from './lib/deprecated_Button';
+export {default as DropdownButton, DropdownButtonProps} from './lib/DropdownButton';
+export {default as HighlightButton, HighlightButtonProps} from './lib/HighlightButton';
+export {default as OutlineButton, OutlineButtonProps} from './lib/OutlineButton';
 export {default as IconButton, IconButtonProps} from './lib/IconButton';
-export {default as DropdownButton} from './lib/DropdownButton';
 export {default as TextButton, TextButtonProps} from './lib/TextButton';
-export {
-  default as IconButtonToggleGroup,
-  IconButtonToggleGroupProps,
-} from './lib/IconButtonToggleGroup';
 export * from './lib/types';
diff --git a/modules/button/react/lib/Button.tsx b/modules/button/react/lib/Button.tsx
index efa4c52a84..8d372630e4 100644
--- a/modules/button/react/lib/Button.tsx
+++ b/modules/button/react/lib/Button.tsx
@@ -1,101 +1,109 @@
-/** @jsx jsx */
-import {jsx} from '@emotion/core';
 import * as React from 'react';
-import {ButtonBaseCon, ButtonBaseLabel, ButtonLabelData, ButtonLabelIcon} from './ButtonBase';
-import {DeprecatedButtonVariant, ButtonSize, ButtonVariant} from './types';
-import {CanvasSystemIcon} from '@workday/design-assets-types';
+import {colors} from '@workday/canvas-kit-react-core';
 import {GrowthBehavior} from '@workday/canvas-kit-react-common';
-import {labelDataBaseStyles} from './ButtonStyles';
+import {CanvasSystemIcon} from '@workday/design-assets-types';
+import {ButtonVariant, ButtonColors, DropdownButtonVariant, ButtonSize} from './types';
+import {ButtonContainer, ButtonLabel, ButtonLabelData, ButtonLabelIcon} from './parts';
 
-export interface BaseButtonProps<T = ButtonVariant | DeprecatedButtonVariant>
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, GrowthBehavior {
   /**
    * The variant of the Button.
    * @default ButtonVariant.Secondary
    */
-  variant?: T;
+  variant?: ButtonVariant;
   /**
    * The size of the Button.
-   * @default ButtonSize.Medium
+   * @default 'medium'
    */
-  size?: ButtonSize;
+  size?: 'small' | 'medium' | 'large';
   /**
    * The ref to the button that the styled component renders.
    */
   buttonRef?: React.Ref<HTMLButtonElement>;
   /**
    * The data label of the Button.
+   * Note: not displayed at `small` size
    */
   dataLabel?: String;
   /**
    * The icon of the Button.
+   * Note: not displayed at `small` size
    */
   icon?: CanvasSystemIcon;
 }
 
-export interface ButtonProps<T = ButtonVariant | DeprecatedButtonVariant>
-  extends BaseButtonProps<T>,
-    GrowthBehavior {
-  /**
-   * The children of the Button (cannot be empty).
-   */
-  children: React.ReactNode;
-}
-
-export default class Button extends React.Component<ButtonProps> {
-  public static Variant = ButtonVariant;
-  public static Size = ButtonSize;
+const Button = ({
+  variant = ButtonVariant.Secondary,
+  size = 'medium',
+  buttonRef,
+  dataLabel,
+  icon,
+  children,
+  ...elemProps
+}: ButtonProps) => (
+  <ButtonContainer colors={getButtonColors(variant)} size={size} ref={buttonRef} {...elemProps}>
+    {icon && size !== 'small' && <ButtonLabelIcon size={size} icon={icon} />}
+    <ButtonLabel>{children}</ButtonLabel>
+    {dataLabel && size !== 'small' && <ButtonLabelData>{dataLabel}</ButtonLabelData>}
+  </ButtonContainer>
+);
 
-  static defaultProps = {
-    size: ButtonSize.Medium,
-    variant: ButtonVariant.Secondary,
-    grow: false,
-  };
+Button.Variant = ButtonVariant;
+Button.Size = ButtonSize;
 
-  public render() {
-    const {variant, size, buttonRef, dataLabel, icon, children, ...elemProps} = this.props;
+export default Button;
 
-    // Restrict Hightlight button to only being sized Large, Medium with an Icon
-    if (variant === ButtonVariant.Highlight && (icon === undefined || size === ButtonSize.Small)) {
-      return null;
-    }
-
-    return (
-      <ButtonBaseCon variant={variant} size={size} ref={buttonRef} {...elemProps}>
-        {icon && <ButtonLabelIcon size={size} icon={icon} />}
-        <ButtonBaseLabel size={size} variant={variant}>
-          {children}
-        </ButtonBaseLabel>
-        {dataLabel && (
-          <ButtonLabelData size={size} className={labelDataBaseStyles.classname}>
-            {dataLabel}
-          </ButtonLabelData>
-        )}
-      </ButtonBaseCon>
-    );
+export const getButtonColors = (variant: ButtonVariant | DropdownButtonVariant): ButtonColors => {
+  switch (variant) {
+    case ButtonVariant.Primary:
+    case DropdownButtonVariant.Primary:
+      return {
+        default: {
+          background: colors.blueberry400,
+          icon: colors.frenchVanilla100,
+          label: colors.frenchVanilla100,
+        },
+        hover: {
+          background: colors.blueberry500,
+        },
+        active: {
+          background: colors.blueberry600,
+        },
+        focus: {
+          background: colors.blueberry400,
+        },
+        disabled: {
+          background: colors.blueberry200,
+        },
+      };
+    case ButtonVariant.Secondary:
+    case DropdownButtonVariant.Secondary:
+    default:
+      return {
+        default: {
+          background: colors.soap200,
+          icon: colors.licorice200,
+          label: colors.blackPepper400,
+          labelData: colors.blackPepper400,
+        },
+        hover: {
+          background: colors.soap400,
+          icon: colors.licorice500,
+        },
+        active: {
+          background: colors.soap500,
+          icon: colors.licorice500,
+        },
+        focus: {
+          background: colors.soap200,
+          icon: colors.licorice500,
+        },
+        disabled: {
+          background: colors.soap100,
+          icon: colors.soap600,
+          label: colors.licorice100,
+          labelData: colors.licorice100,
+        },
+      };
   }
-}
-/**
- * @deprecated deprecated_Button in @workday/canvas-kit-react-button will be removed soon. Use Button instead.
- */
-// eslint-disable-next-line @typescript-eslint/class-name-casing
-export class deprecated_Button extends React.Component<ButtonProps<DeprecatedButtonVariant>> {
-  public static Variant = DeprecatedButtonVariant;
-  public static Size = ButtonSize;
-
-  static defaultProps = {
-    size: ButtonSize.Large,
-    variant: DeprecatedButtonVariant.Secondary,
-    grow: false,
-  };
-
-  public componentDidMount() {
-    console.warn('This component is now deprecated, consider using the new Button component');
-  }
-
-  public render() {
-    const {variant, size, buttonRef, dataLabel, icon, children, ...elemProps} = this.props;
-
-    return <Button {...this.props} {...elemProps} />;
-  }
-}
+};
diff --git a/modules/button/react/lib/ButtonBase.tsx b/modules/button/react/lib/ButtonBase.tsx
deleted file mode 100644
index ecc1b5fc9a..0000000000
--- a/modules/button/react/lib/ButtonBase.tsx
+++ /dev/null
@@ -1,162 +0,0 @@
-import * as React from 'react';
-import {styled} from '@workday/canvas-kit-labs-react-core';
-import isPropValid from '@emotion/is-prop-valid';
-import {
-  ButtonSize,
-  DeprecatedButtonVariant,
-  IconPosition,
-  AllButtonVariants,
-  TextButtonVariant,
-} from './types';
-import {ButtonProps, BaseButtonProps} from './Button';
-import {SystemIcon} from '@workday/canvas-kit-react-icon';
-import * as ButtonStyles from './ButtonStyles';
-import {getBaseButton, getButtonSize, getButtonStyle} from './utils';
-
-export const ButtonBaseCon = styled('button', {
-  shouldForwardProp: prop => isPropValid(prop) && prop !== 'size',
-})<ButtonProps>(
-  /* istanbul ignore next line for coverage */
-  ({variant, size}) => {
-    if (variant === undefined) {
-      return {};
-    }
-
-    const baseButton = getBaseButton(variant);
-    const buttonStyles = getButtonStyle(baseButton, variant);
-    const sizeStyles = size !== undefined ? getButtonSize(baseButton, size) : {};
-
-    return {
-      ...baseButton.styles,
-      ...buttonStyles,
-      ...sizeStyles,
-    };
-  },
-  ({grow}) => grow && {width: '100%', maxWidth: '100%'}
-);
-
-export const ButtonBaseLabel = styled('span', {
-  shouldForwardProp: prop => isPropValid(prop) && prop !== 'size',
-})<ButtonProps<AllButtonVariants>>(
-  ButtonStyles.labelBaseStyles.styles,
-  ({size}) => {
-    const {sizes} = ButtonStyles.labelBaseStyles.variants!;
-
-    switch (size) {
-      case ButtonSize.Large:
-      default:
-        return sizes.large;
-      case ButtonSize.Small:
-        return sizes.small;
-      case ButtonSize.Medium:
-        return sizes.medium;
-    }
-  },
-  ({variant}) => {
-    const {types} = ButtonStyles.labelBaseStyles.variants!;
-
-    switch (variant) {
-      case TextButtonVariant.Default:
-      case TextButtonVariant.Inverse:
-        return types.text;
-      case TextButtonVariant.AllCaps:
-      case TextButtonVariant.InverseAllCaps:
-        return types.textAllCaps;
-      case DeprecatedButtonVariant.Primary:
-        return types.deprecatedPrimary;
-      case DeprecatedButtonVariant.Secondary:
-        return types.deprecatedSecondary;
-      case DeprecatedButtonVariant.Delete:
-        return types.deprecatedDelete;
-      default:
-        return {};
-    }
-  }
-);
-
-export const ButtonLabelData = styled('span', {
-  shouldForwardProp: prop => isPropValid(prop) && prop !== 'size',
-})<ButtonProps>(ButtonStyles.labelDataBaseStyles.styles, ({size}) => {
-  const {sizes} = ButtonStyles.labelDataBaseStyles.variants!;
-  switch (size) {
-    case ButtonSize.Large:
-    default:
-      return sizes.large;
-    case ButtonSize.Medium:
-      return sizes.medium;
-  }
-});
-
-const ButtonLabelIconStyled = styled('span', {
-  shouldForwardProp: prop => isPropValid(prop) && prop !== 'size',
-})<ButtonLabelIconProps>(
-  ButtonStyles.labelIconBaseStyles.styles,
-  ({size, dropdown}) => {
-    if (dropdown) {
-      switch (size) {
-        case ButtonSize.Large:
-        default:
-          return {padding: '0 8px 0 0'};
-        case ButtonSize.Medium:
-          return {padding: '0 4px 0 0'};
-      }
-    }
-
-    const {sizes} = ButtonStyles.labelIconBaseStyles.variants!;
-
-    switch (size) {
-      case ButtonSize.Large:
-      default:
-        return sizes.large;
-      case ButtonSize.Medium:
-        return sizes.medium;
-    }
-  },
-  ({iconPosition}) => {
-    if (iconPosition === undefined) {
-      return {};
-    }
-
-    const {types} = ButtonStyles.labelIconBaseStyles.variants!;
-
-    switch (iconPosition) {
-      case IconPosition.Left:
-      default:
-        return types.iconPositionLeft;
-      case IconPosition.Right:
-        return types.iconPositionRight;
-    }
-  }
-);
-
-export interface ButtonLabelIconProps extends BaseButtonProps<AllButtonVariants> {
-  iconPosition?: IconPosition;
-  dropdown?: boolean;
-}
-
-export class ButtonLabelIcon extends React.Component<ButtonLabelIconProps> {
-  public render() {
-    const {icon, size, dropdown, iconPosition, ...elemProps} = this.props;
-    /* istanbul ignore next line for coverage */
-    if (icon === undefined) {
-      return {};
-    }
-
-    let iconSize = 24;
-
-    if (size === ButtonSize.Small) {
-      iconSize = 20;
-    }
-
-    return (
-      <ButtonLabelIconStyled
-        iconPosition={iconPosition}
-        dropdown={dropdown}
-        size={size}
-        {...elemProps}
-      >
-        <SystemIcon size={iconSize} icon={icon} />
-      </ButtonLabelIconStyled>
-    );
-  }
-}
diff --git a/modules/button/react/lib/ButtonColors.ts b/modules/button/react/lib/ButtonColors.ts
deleted file mode 100644
index 28de79eb10..0000000000
--- a/modules/button/react/lib/ButtonColors.ts
+++ /dev/null
@@ -1,342 +0,0 @@
-import canvas from '@workday/canvas-kit-react-core';
-import {
-  AllButtonVariants,
-  DeprecatedButtonVariant,
-  TextButtonVariant,
-  ButtonVariant,
-  IconButtonVariant,
-} from './types';
-
-export interface CanvasButtonColors
-  extends Partial<typeof canvas.buttonColors.secondary>,
-    Partial<typeof canvas.buttonColors.primary>,
-    Partial<typeof canvas.buttonColors.delete> {}
-
-export interface GenericButtonColors extends CanvasButtonColors {
-  focusRingInner?: string;
-  focusRingOuter?: string;
-  labelData?: string;
-  labelDataActive?: string;
-  labelDataDisabled?: string;
-  labelDataFocus?: string;
-  labelDataHover?: string;
-  labelIcon?: string;
-  labelIconActive?: string;
-  labelIconDisabled?: string;
-  labelIconFocus?: string;
-  labelIconHover?: string;
-  labelIconFocusHover?: string;
-  focusHover?: string;
-}
-
-export type ButtonColorCollection = {
-  [key in AllButtonVariants]: GenericButtonColors | null;
-};
-
-export const ButtonColors: ButtonColorCollection = {
-  // TODO (beta button): remove in favor of beta buttons, consider moving from design-assets too
-  [DeprecatedButtonVariant.Primary]: canvas.buttonColors.primary,
-  [DeprecatedButtonVariant.Secondary]: canvas.buttonColors.secondary,
-  [DeprecatedButtonVariant.Delete]: {
-    ...canvas.buttonColors.delete,
-    focusBorder: canvas.colors.cinnamon500,
-    activeBorder: canvas.colors.cinnamon500,
-  },
-  [ButtonVariant.Primary]: {
-    background: canvas.colors.blueberry400,
-    border: 'transparent',
-    text: canvas.colors.frenchVanilla100,
-    activeBackground: canvas.colors.blueberry600,
-    activeBorder: 'transparent',
-    activeText: canvas.colors.frenchVanilla100,
-    disabledBackground: canvas.colors.blueberry200,
-    disabledBorder: 'transparent',
-    disabledText: canvas.colors.frenchVanilla100,
-    focusBackground: canvas.colors.blueberry400,
-    focusBorder: 'transparent',
-    focusText: canvas.colors.frenchVanilla100,
-    hoverBackground: canvas.colors.blueberry500,
-    hoverBorder: 'transparent',
-    hoverText: canvas.colors.frenchVanilla100,
-    labelIcon: canvas.colors.frenchVanilla100,
-    labelIconHover: canvas.colors.frenchVanilla100,
-    labelIconActive: canvas.colors.frenchVanilla100,
-    labelIconFocus: canvas.colors.frenchVanilla100,
-    labelIconDisabled: canvas.colors.frenchVanilla100,
-  },
-  [ButtonVariant.Secondary]: {
-    background: canvas.colors.soap200,
-    border: 'transparent',
-    text: canvas.colors.blackPepper400,
-    activeBackground: canvas.colors.soap500,
-    activeBorder: 'transparent',
-    activeText: canvas.colors.blackPepper400,
-    disabledBackground: canvas.colors.soap100,
-    disabledBorder: 'transparent',
-    disabledText: canvas.colors.licorice100,
-    focusBackground: canvas.colors.soap200,
-    focusBorder: 'transparent',
-    focusText: canvas.colors.blackPepper400,
-    hoverBackground: canvas.colors.soap400,
-    hoverBorder: 'transparent',
-    hoverText: canvas.colors.blackPepper400,
-    labelIcon: canvas.colors.licorice200,
-    labelIconHover: canvas.colors.licorice500,
-    labelIconActive: canvas.colors.licorice500,
-    labelIconFocus: canvas.colors.licorice200,
-    labelIconDisabled: canvas.colors.soap600,
-    labelData: canvas.colors.blackPepper400,
-    labelDataDisabled: canvas.colors.licorice100,
-  },
-  [ButtonVariant.Delete]: {
-    background: canvas.colors.cinnamon500,
-    border: canvas.colors.cinnamon500,
-    text: canvas.colors.frenchVanilla100,
-    activeBackground: '#80160E',
-    activeBorder: 'transparent',
-    activeText: canvas.colors.frenchVanilla100,
-    disabledBackground: canvas.colors.cinnamon200,
-    disabledBorder: 'transparent',
-    disabledText: canvas.colors.frenchVanilla100,
-    focusBackground: canvas.colors.cinnamon500,
-    focusText: canvas.colors.frenchVanilla100,
-    hoverBackground: canvas.colors.cinnamon600,
-    hoverBorder: canvas.colors.cinnamon600,
-    hoverText: canvas.colors.frenchVanilla100,
-  },
-  [ButtonVariant.Highlight]: {
-    background: canvas.colors.soap200,
-    border: canvas.colors.soap200,
-    text: canvas.colors.blueberry500,
-    activeBackground: canvas.colors.soap500,
-    activeBorder: 'transparent',
-    activeText: canvas.colors.blueberry500,
-    disabledBackground: canvas.colors.soap100,
-    disabledBorder: 'transparent',
-    disabledText: canvas.colors.licorice100,
-    focusBackground: canvas.colors.soap200,
-    focusBorder: 'transparent',
-    focusText: canvas.colors.blueberry500,
-    hoverBackground: canvas.colors.soap400,
-    hoverBorder: 'transparent',
-    hoverText: canvas.colors.blueberry500,
-    labelIcon: canvas.colors.blueberry500,
-    labelIconHover: canvas.colors.blueberry500,
-    labelIconActive: canvas.colors.blueberry500,
-    labelIconFocus: canvas.colors.blueberry500,
-    labelIconDisabled: canvas.colors.soap600,
-  },
-  [ButtonVariant.OutlinePrimary]: {
-    background: 'transparent',
-    border: canvas.colors.blueberry400,
-    text: canvas.colors.blueberry400,
-    activeBackground: canvas.colors.blueberry500,
-    activeBorder: 'transparent',
-    activeText: canvas.colors.frenchVanilla100,
-    disabledBackground: canvas.colors.frenchVanilla100,
-    disabledBorder: canvas.colors.soap500,
-    disabledText: canvas.colors.licorice100,
-    focusBackground: canvas.colors.blueberry400,
-    focusBorder: 'transparent',
-    focusText: canvas.colors.frenchVanilla100,
-    hoverBackground: canvas.colors.blueberry400,
-    hoverBorder: 'transparent',
-    hoverText: canvas.colors.frenchVanilla100,
-    labelIcon: canvas.colors.blueberry400,
-    labelIconHover: canvas.colors.frenchVanilla100,
-    labelIconActive: canvas.colors.frenchVanilla100,
-    labelIconFocus: canvas.colors.frenchVanilla100,
-    labelIconDisabled: canvas.colors.soap600,
-  },
-  [ButtonVariant.OutlineSecondary]: {
-    background: 'transparent',
-    border: canvas.colors.soap500,
-    text: canvas.colors.blackPepper400,
-    activeBackground: canvas.colors.licorice600,
-    activeBorder: 'transparent',
-    activeText: canvas.colors.frenchVanilla100,
-    disabledBackground: canvas.colors.frenchVanilla100,
-    disabledBorder: canvas.colors.soap500,
-    disabledText: canvas.colors.licorice100,
-    focusBackground: canvas.colors.licorice500,
-    focusBorder: 'transparent',
-    focusText: canvas.colors.frenchVanilla100,
-    hoverBackground: canvas.colors.licorice500,
-    hoverBorder: 'transparent',
-    hoverText: canvas.colors.frenchVanilla100,
-    labelIcon: canvas.colors.licorice200,
-    labelIconHover: canvas.colors.frenchVanilla100,
-    labelIconActive: canvas.colors.frenchVanilla100,
-    labelIconFocus: canvas.colors.frenchVanilla100,
-    labelIconDisabled: canvas.colors.soap600,
-  },
-  [ButtonVariant.OutlineInverse]: {
-    background: 'transparent',
-    border: canvas.colors.frenchVanilla100,
-    text: canvas.colors.frenchVanilla100,
-    activeBackground: canvas.colors.soap300,
-    activeBorder: 'transparent',
-    activeText: canvas.colors.blackPepper400,
-    disabledBackground: 'transparent',
-    disabledBorder: 'rgba(255, 255, 255, 0.75)',
-    disabledText: 'rgba(255, 255, 255, 0.75)',
-    focusBackground: canvas.colors.frenchVanilla100,
-    focusBorder: 'transparent',
-    focusRingInner: 'currentColor',
-    focusRingOuter: canvas.colors.frenchVanilla100,
-    focusText: canvas.colors.blackPepper400,
-    hoverBackground: canvas.colors.frenchVanilla100,
-    hoverBorder: 'transparent',
-    hoverText: canvas.colors.blackPepper400,
-    labelIcon: canvas.colors.frenchVanilla100,
-    labelIconHover: canvas.colors.licorice500,
-    labelIconActive: canvas.colors.licorice500,
-    labelIconFocus: canvas.colors.licorice500,
-    labelIconDisabled: 'rgba(255, 255, 255, 0.75)',
-    labelDataHover: canvas.colors.licorice300,
-    labelDataActive: canvas.colors.licorice300,
-    labelDataFocus: canvas.colors.licorice300,
-    labelDataDisabled: 'rgba(255, 255, 255, 0.75)',
-  },
-  [TextButtonVariant.Default]: {
-    background: 'transparent',
-    border: 'transparent',
-    text: canvas.colors.blueberry400,
-    activeBackground: 'transparent',
-    activeBorder: 'transparent',
-    activeText: canvas.colors.blueberry500,
-    disabledBackground: 'transparent',
-    disabledBorder: 'transparent',
-    disabledText: 'rgba(8, 117, 225, 0.5)',
-    focusBackground: 'transparent',
-    focusText: canvas.colors.blueberry400,
-    hoverBorder: 'transparent',
-    hoverText: canvas.colors.blueberry500,
-    labelIcon: canvas.colors.blueberry400,
-    labelIconHover: canvas.colors.blueberry500,
-    labelIconActive: canvas.colors.blueberry500,
-    labelIconFocus: canvas.colors.blueberry400,
-    labelIconDisabled: 'rgba(8, 117, 225, 0.5)',
-  },
-  [TextButtonVariant.Inverse]: {
-    background: 'transparent',
-    border: 'transparent',
-    text: canvas.colors.frenchVanilla100,
-    activeBackground: 'transparent',
-    activeBorder: 'transparent',
-    activeText: canvas.colors.frenchVanilla100,
-    disabledBackground: 'transparent',
-    disabledBorder: 'transparent',
-    disabledText: 'rgba(255, 255, 255, 0.5)',
-    focusBackground: 'transparent',
-    focusText: canvas.colors.frenchVanilla100,
-    focusRingInner: 'transparent',
-    focusRingOuter: canvas.colors.frenchVanilla100,
-    hoverBorder: 'transparent',
-    labelIcon: canvas.colors.frenchVanilla100,
-    labelIconHover: 'currentColor',
-    labelIconActive: canvas.colors.frenchVanilla100,
-    labelIconFocus: canvas.colors.frenchVanilla100,
-    labelIconDisabled: 'rgba(255, 255, 255, 0.5)',
-  },
-  [TextButtonVariant.AllCaps]: null,
-  [TextButtonVariant.InverseAllCaps]: null,
-  [IconButtonVariant.Square]: {
-    background: 'transparent',
-    activeBackground: canvas.colors.soap500,
-    disabledBackground: 'transparent',
-    focusBackground: canvas.colors.soap300,
-    hoverBackground: canvas.colors.soap300,
-    labelIcon: canvas.colors.licorice200,
-    labelIconHover: canvas.colors.licorice500,
-    labelIconActive: canvas.colors.licorice500,
-    labelIconFocus: canvas.colors.licorice500,
-    labelIconFocusHover: canvas.colors.licorice500,
-    labelIconDisabled: canvas.colors.soap600,
-  },
-  [IconButtonVariant.SquareFilled]: {
-    background: canvas.colors.soap200,
-    border: canvas.colors.soap500,
-    activeBackground: canvas.colors.soap500,
-    disabledBackground: canvas.colors.soap100,
-    focusBackground: canvas.colors.soap400,
-    hoverBackground: canvas.colors.soap400,
-    labelIcon: canvas.colors.licorice200,
-    labelIconHover: canvas.colors.licorice500,
-    labelIconActive: canvas.colors.licorice500,
-    labelIconFocus: canvas.colors.licorice500,
-    labelIconDisabled: canvas.colors.soap600,
-  },
-  [IconButtonVariant.Plain]: {
-    background: 'transparent',
-    activeBackground: 'transparent',
-    activeBorder: 'transparent',
-    disabledBackground: 'transparent',
-    focusBackground: 'transparent',
-    hoverBackground: 'transparent',
-    labelIcon: canvas.colors.licorice200,
-    labelIconHover: canvas.colors.licorice500,
-    labelIconActive: canvas.colors.licorice500,
-    labelIconFocus: canvas.colors.licorice500,
-    labelIconDisabled: canvas.colors.soap600,
-  },
-  [IconButtonVariant.Circle]: {
-    background: 'transparent',
-    activeBackground: canvas.colors.soap500,
-    disabledBackground: 'transparent',
-    focusBackground: canvas.colors.soap300,
-    hoverBackground: canvas.colors.soap300,
-    labelIcon: canvas.colors.licorice200,
-    labelIconHover: canvas.colors.licorice500,
-    labelIconActive: canvas.colors.licorice500,
-    labelIconFocusHover: canvas.colors.licorice500,
-    labelIconFocus: canvas.colors.licorice500,
-    labelIconDisabled: canvas.colors.soap600,
-  },
-  [IconButtonVariant.CircleFilled]: {
-    background: canvas.colors.soap200,
-    activeBackground: canvas.colors.soap500,
-    disabledBackground: canvas.colors.soap100,
-    hoverBackground: canvas.colors.soap400,
-    focusBackground: canvas.colors.soap400,
-    labelIcon: canvas.colors.licorice200,
-    labelIconHover: canvas.colors.licorice500,
-    labelIconFocus: canvas.colors.licorice500,
-    labelIconActive: canvas.colors.licorice500,
-    labelIconDisabled: canvas.colors.soap600,
-  },
-  [IconButtonVariant.Inverse]: {
-    background: 'transparent',
-    activeBackground: 'rgba(0, 0, 0, 0.3)',
-    focusBackground: 'rgba(0, 0, 0, 0.2)',
-    disabledBackground: 'transparent',
-    hoverBackground: 'rgba(0, 0, 0, 0.2)',
-    labelIcon: canvas.colors.frenchVanilla100,
-    labelIconHover: canvas.colors.frenchVanilla100,
-    labelIconActive: canvas.colors.frenchVanilla100,
-    labelIconFocus: canvas.colors.frenchVanilla100,
-    labelIconDisabled: 'rgba(255, 255, 255, 0.75)',
-    focusRingInner: 'currentColor',
-    focusBorder: 'transparent',
-    focusRingOuter: canvas.colors.frenchVanilla100,
-    focusHover: 'rgba(0, 0, 0, 0.3)',
-  },
-  [IconButtonVariant.InverseFilled]: {
-    background: 'rgba(0, 0, 0, 0.2)',
-    activeBackground: 'rgba(0, 0, 0, 0.4)',
-    focusBackground: 'rgba(0, 0, 0, 0.2)',
-    disabledBackground: 'rgba(0, 0, 0, 0.2)',
-    hoverBackground: 'rgba(0, 0, 0, 0.3)',
-    labelIcon: canvas.colors.frenchVanilla100,
-    labelIconHover: canvas.colors.frenchVanilla100,
-    labelIconActive: canvas.colors.frenchVanilla100,
-    labelIconFocus: canvas.colors.frenchVanilla100,
-    labelIconDisabled: 'rgba(255, 255, 255, 0.75)',
-    focusRingInner: 'currentColor',
-    focusBorder: 'transparent',
-    focusRingOuter: canvas.colors.frenchVanilla100,
-    focusHover: 'rgba(0, 0, 0, 0.3)',
-  },
-};
-
-export default ButtonColors;
diff --git a/modules/button/react/lib/ButtonStyles.ts b/modules/button/react/lib/ButtonStyles.ts
deleted file mode 100644
index ecde7b591d..0000000000
--- a/modules/button/react/lib/ButtonStyles.ts
+++ /dev/null
@@ -1,362 +0,0 @@
-import {CSSObject} from '@emotion/core';
-import {GenericStyle} from '@workday/canvas-kit-react-common';
-import canvas, {borderRadius} from '@workday/canvas-kit-react-core';
-
-import {
-  AllButtonVariants,
-  ButtonSize,
-  ButtonVariant,
-  DeprecatedButtonVariant,
-  IconButtonVariant,
-  IconPosition,
-  TextButtonVariant,
-} from './types';
-import {getButtonStateStyle, getIconButtonStateStyle} from './utils';
-
-export const CANVAS_BUTTON_HEIGHT_LARGE: number = 40;
-export const CANVAS_BUTTON_HEIGHT_MEDIUM: number = 24;
-export const CANVAS_BUTTON_HEIGHT_SMALL: number = 18;
-
-export interface ButtonGenericStyle extends GenericStyle {
-  variants?: {
-    types: {[key in AllButtonVariants | IconPosition]?: CSSObject};
-    sizes: {[key in ButtonSize]?: CSSObject};
-  };
-}
-
-export const labelBaseStyles: ButtonGenericStyle = {
-  classname: 'button-label',
-  styles: {
-    position: 'relative', // Fixes an IE issue with text within button moving on click
-    ':hover:active': {
-      backgroundColor: 'transparent',
-    },
-    textOverflow: 'ellipsis',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    fontWeight: 700,
-    fontFamily: '"Roboto", "Helvetica Neue", "Helvetica", "Arial", sans-serif',
-    WebkitFontSmoothing: 'antialiased',
-    MozOsxFontSmoothing: 'grayscale',
-  },
-  variants: {
-    types: {
-      [TextButtonVariant.Default]: {
-        padding: '0',
-      },
-      [TextButtonVariant.AllCaps]: {
-        ...canvas.type.variant.caps,
-        fontSize: '14px',
-        letterSpacing: '.5px',
-        padding: '0',
-      },
-      [DeprecatedButtonVariant.Primary]: {
-        fontSize: 'inherit',
-        fontWeight: 'inherit',
-        padding: '0',
-      },
-      [DeprecatedButtonVariant.Secondary]: {
-        fontSize: 'inherit',
-        fontWeight: 'inherit',
-        padding: '0',
-      },
-      [DeprecatedButtonVariant.Delete]: {
-        fontSize: 'inherit',
-        fontWeight: 'inherit',
-        padding: '0',
-      },
-    },
-    sizes: {
-      [ButtonSize.Large]: {
-        fontSize: '16px',
-        padding: '0 12px',
-      },
-      [ButtonSize.Medium]: {
-        fontSize: '14px',
-        padding: '0 8px',
-      },
-      [ButtonSize.Small]: {
-        fontSize: '14px',
-        padding: '0',
-      },
-    },
-  },
-};
-
-export const labelDataBaseStyles: ButtonGenericStyle = {
-  classname: 'button-label-data',
-  styles: {
-    ...labelBaseStyles.styles,
-    fontWeight: 400,
-    fontSize: '16px',
-  },
-  variants: {
-    types: {},
-    sizes: {
-      [ButtonSize.Large]: {
-        paddingRight: '12px',
-      },
-      [ButtonSize.Medium]: {
-        paddingRight: '8px',
-        fontSize: '14px',
-      },
-    },
-  },
-};
-
-export const labelIconBaseStyles: ButtonGenericStyle = {
-  classname: 'button-label-icon',
-  styles: {
-    display: 'flex',
-  },
-  variants: {
-    types: {
-      [IconPosition.Left]: {
-        padding: '0 8px 0 0',
-      },
-      [IconPosition.Right]: {
-        padding: '0 0 0 8px',
-      },
-    },
-    sizes: {
-      [ButtonSize.Large]: {
-        paddingLeft: '8px',
-      },
-      [ButtonSize.Medium]: {
-        paddingLeft: '4px',
-      },
-    },
-  },
-};
-
-export const deprecatedButtonStyles: ButtonGenericStyle = {
-  classname: 'canvas-deprecated-button',
-  styles: {
-    boxSizing: 'border-box',
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    fontSize: '13px',
-    borderRadius: borderRadius.circle,
-    border: '1px solid transparent',
-    boxShadow: 'none',
-    position: 'relative',
-    cursor: 'pointer',
-    outline: 'none',
-    transition:
-      'box-shadow 120ms linear, border 120ms linear, background-color 120ms linear, color 120ms linear',
-    '&:hover:active': {transitionDuration: '40ms'}, // Makes the "down" state of the button happens faster than the hover state, so it animates in correctly.
-    '&:disabled, &:disabled:active': {cursor: 'default', boxShadow: 'none'},
-  },
-  variants: {
-    types: {
-      [DeprecatedButtonVariant.Primary]: {
-        ...getButtonStateStyle(DeprecatedButtonVariant.Primary),
-      },
-      [DeprecatedButtonVariant.Secondary]: {
-        ...getButtonStateStyle(DeprecatedButtonVariant.Secondary),
-      },
-      [DeprecatedButtonVariant.Delete]: {
-        ...getButtonStateStyle(DeprecatedButtonVariant.Delete),
-      },
-    },
-    sizes: {
-      [ButtonSize.Large]: {
-        height: `${CANVAS_BUTTON_HEIGHT_LARGE}px`,
-        padding: `0 ${canvas.spacing.l}`,
-        minWidth: '112px',
-        maxWidth: '288px',
-        fontSize: '14px',
-        fontWeight: 500,
-      },
-      [ButtonSize.Medium]: {
-        height: `${CANVAS_BUTTON_HEIGHT_MEDIUM}px`,
-        padding: `0 ${canvas.spacing.m}`,
-        minWidth: '80px',
-        maxWidth: '200px',
-        fontSize: '13px',
-        fontWeight: 500,
-      },
-      [ButtonSize.Small]: {
-        height: `${CANVAS_BUTTON_HEIGHT_SMALL}px`,
-        padding: `0 ${canvas.spacing.xxs}`,
-        minWidth: '56px',
-        maxWidth: '120px',
-        fontSize: '10px',
-        fontWeight: 500,
-      },
-    },
-  },
-};
-
-export const canvasButtonStyles: ButtonGenericStyle = {
-  classname: 'canvas-button',
-  styles: {
-    ...deprecatedButtonStyles.styles,
-    verticalAlign: 'middle',
-    border: '2px solid transparent',
-    fontSize: '14px',
-  },
-  variants: {
-    types: {
-      [ButtonVariant.Primary]: {
-        ...getButtonStateStyle(ButtonVariant.Primary),
-      },
-      [ButtonVariant.Secondary]: {
-        ...getButtonStateStyle(ButtonVariant.Secondary),
-      },
-      [ButtonVariant.Delete]: {
-        ...getButtonStateStyle(ButtonVariant.Delete),
-      },
-      [ButtonVariant.Highlight]: {
-        ...getButtonStateStyle(ButtonVariant.Highlight),
-      },
-      [ButtonVariant.OutlinePrimary]: {
-        ...getButtonStateStyle(ButtonVariant.OutlinePrimary),
-      },
-      [ButtonVariant.OutlineSecondary]: {
-        ...getButtonStateStyle(ButtonVariant.OutlineSecondary),
-      },
-      [ButtonVariant.OutlineInverse]: {
-        ...getButtonStateStyle(ButtonVariant.OutlineInverse),
-      },
-    },
-    sizes: {
-      [ButtonSize.Large]: {
-        minWidth: '112px',
-        height: '48px',
-        padding: '0 20px',
-      },
-      [ButtonSize.Medium]: {
-        minWidth: '96px',
-        height: canvas.spacing.xl,
-        padding: '0 16px',
-      },
-      [ButtonSize.Small]: {
-        minWidth: '80px',
-        height: canvas.spacing.l,
-        padding: '0 16px',
-      },
-    },
-  },
-};
-
-export const dropdownButtonStyles: ButtonGenericStyle = {
-  classname: 'dropdown-button',
-  styles: {
-    ...canvasButtonStyles.styles,
-  },
-  variants: {
-    types: {
-      [ButtonVariant.Primary]: canvasButtonStyles.variants!.types[ButtonVariant.Primary],
-      [ButtonVariant.Secondary]: canvasButtonStyles.variants!.types[ButtonVariant.Secondary],
-    },
-    sizes: {
-      [ButtonSize.Large]: canvasButtonStyles.variants!.sizes.large,
-      [ButtonSize.Medium]: canvasButtonStyles.variants!.sizes.medium,
-    },
-  },
-};
-
-export const textButtonStyles: ButtonGenericStyle = {
-  classname: 'text-button',
-  styles: {
-    ...deprecatedButtonStyles.styles,
-    borderRadius: borderRadius.m,
-    border: '0',
-    margin: '0 8px',
-    minWidth: 'auto',
-    '&:hover:not([disabled])': {textDecoration: 'underline'},
-  },
-  variants: {
-    types: {
-      [TextButtonVariant.Default]: {
-        ...getButtonStateStyle(TextButtonVariant.Default),
-      },
-      [TextButtonVariant.Inverse]: {
-        ...getButtonStateStyle(TextButtonVariant.Inverse),
-      },
-      [TextButtonVariant.AllCaps]: {
-        ...getButtonStateStyle(TextButtonVariant.Default),
-        height: canvas.spacing.l,
-      },
-      [TextButtonVariant.InverseAllCaps]: {
-        ...getButtonStateStyle(TextButtonVariant.Inverse),
-        height: canvas.spacing.l,
-      },
-    },
-    sizes: {
-      [ButtonSize.Large]: {
-        height: canvas.spacing.xl,
-        padding: '0 8px',
-      },
-      [ButtonSize.Small]: {
-        height: canvas.spacing.l,
-        padding: '0 8px',
-      },
-    },
-  },
-};
-
-export const iconButtonStyles: ButtonGenericStyle = {
-  classname: 'icon-button',
-  styles: {
-    // TODO: Support data-whatinput='input' css
-    ...deprecatedButtonStyles.styles,
-    borderWidth: '0',
-    borderRadius: borderRadius.circle,
-    ['& .wd-icon']: {
-      display: 'inline-block',
-      verticalAlign: 'middle',
-    },
-  },
-  variants: {
-    sizes: {
-      [ButtonSize.Small]: {
-        minWidth: canvas.spacing.l, // min-width is set so buttons don't collapse in IE11
-        width: 'auto',
-        height: canvas.spacing.l,
-        'span svg': {
-          width: '20px',
-          height: '20px',
-        },
-      },
-      [ButtonSize.Medium]: {
-        minWidth: canvas.spacing.xl,
-        width: canvas.spacing.xl,
-        height: canvas.spacing.xl,
-      },
-    },
-    types: {
-      [IconButtonVariant.Square]: {
-        borderRadius: borderRadius.m,
-        minWidth: canvas.spacing.l,
-        width: canvas.spacing.l,
-        height: canvas.spacing.l,
-        ...getIconButtonStateStyle(IconButtonVariant.Square),
-      },
-      [IconButtonVariant.SquareFilled]: {
-        borderRadius: borderRadius.m,
-        minWidth: canvas.spacing.l,
-        width: canvas.spacing.l,
-        height: canvas.spacing.l,
-        ...getIconButtonStateStyle(IconButtonVariant.SquareFilled),
-      },
-      [IconButtonVariant.Plain]: {
-        ...getIconButtonStateStyle(IconButtonVariant.Plain),
-      },
-      [IconButtonVariant.Circle]: {
-        ...getIconButtonStateStyle(IconButtonVariant.Circle),
-      },
-      [IconButtonVariant.CircleFilled]: {
-        ...getIconButtonStateStyle(IconButtonVariant.CircleFilled),
-      },
-      [IconButtonVariant.Inverse]: {
-        ...getIconButtonStateStyle(IconButtonVariant.Inverse),
-      },
-      [IconButtonVariant.InverseFilled]: {
-        ...getIconButtonStateStyle(IconButtonVariant.InverseFilled),
-      },
-    },
-  },
-};
diff --git a/modules/button/react/lib/DeleteButton.tsx b/modules/button/react/lib/DeleteButton.tsx
new file mode 100644
index 0000000000..96d1dbcc85
--- /dev/null
+++ b/modules/button/react/lib/DeleteButton.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react';
+import {colors} from '@workday/canvas-kit-react-core';
+import {ButtonColors, ButtonSize} from './types';
+import {ButtonContainer, ButtonLabel} from './parts';
+import {GrowthBehavior} from '@workday/canvas-kit-react-common';
+
+export interface DeleteButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    GrowthBehavior {
+  /**
+   * The size of the Button.
+   * @default 'medium'
+   */
+  size?: 'small' | 'medium' | 'large';
+  /**
+   * The ref to the button that the styled component renders.
+   */
+  buttonRef?: React.Ref<HTMLButtonElement>;
+}
+
+const getDeleteButtonColors = (): ButtonColors => ({
+  default: {
+    background: colors.cinnamon500,
+    label: colors.frenchVanilla100,
+  },
+  hover: {
+    background: colors.cinnamon600,
+  },
+  active: {
+    background: '#80160E',
+  },
+  focus: {
+    background: colors.cinnamon500,
+  },
+  disabled: {
+    background: colors.cinnamon200,
+  },
+});
+
+const DeleteButton = ({size = 'medium', buttonRef, children, ...elemProps}: DeleteButtonProps) => (
+  <ButtonContainer colors={getDeleteButtonColors()} size={size} ref={buttonRef} {...elemProps}>
+    <ButtonLabel>{children}</ButtonLabel>
+  </ButtonContainer>
+);
+
+DeleteButton.Size = ButtonSize;
+
+export default DeleteButton;
diff --git a/modules/button/react/lib/DropdownButton.tsx b/modules/button/react/lib/DropdownButton.tsx
index 4c634db73e..224e215499 100644
--- a/modules/button/react/lib/DropdownButton.tsx
+++ b/modules/button/react/lib/DropdownButton.tsx
@@ -1,40 +1,51 @@
 import * as React from 'react';
-import {ButtonBaseLabel, ButtonLabelIcon} from './ButtonBase';
-import {getButtonStyle, getButtonSize} from './utils';
-import {styled} from '@workday/canvas-kit-labs-react-core';
-import isPropValid from '@emotion/is-prop-valid';
-import {BaseButtonProps} from './Button';
-import {dropdownButtonStyles} from './ButtonStyles';
 import {caretDownIcon} from '@workday/canvas-system-icons-web';
-import {ButtonSize, ButtonVariant} from './types';
+import {GrowthBehavior} from '@workday/canvas-kit-react-common';
+import {DropdownButtonVariant, ButtonIconPosition} from './types';
+import {ButtonContainer, ButtonLabel, ButtonLabelIcon} from './parts';
+import {getButtonColors} from './Button';
 
-const DropdownButtonCon = styled('button', {
-  shouldForwardProp: prop => isPropValid(prop) && prop !== 'size',
-})<BaseButtonProps>(
-  dropdownButtonStyles.styles,
-  ({variant}) => getButtonStyle(dropdownButtonStyles, variant),
-  ({size}) => getButtonSize(dropdownButtonStyles, size)
-);
-
-export default class DropdownButton extends React.Component<BaseButtonProps> {
-  public static Variant = ButtonVariant;
-  public static Size = ButtonSize;
+export interface DropdownButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    GrowthBehavior {
+  /**
+   * The variant of the Button.
+   * @default DropdownButtonVariant.Secondary
+   */
+  variant?: DropdownButtonVariant;
+  /**
+   * The size of the Button.
+   * @default 'medium'
+   */
+  size?: 'medium' | 'large';
+  /**
+   * The ref to the button that the styled component renders.
+   */
+  buttonRef?: React.Ref<HTMLButtonElement>;
+}
 
-  static defaultProps = {
-    variant: ButtonVariant.Primary,
-    size: ButtonSize.Medium,
-  };
+const DropdownButton = ({
+  variant = DropdownButtonVariant.Secondary,
+  size = 'medium',
+  buttonRef,
+  children,
+  ...elemProps
+}: DropdownButtonProps) => (
+  <ButtonContainer colors={getButtonColors(variant)} size={size} ref={buttonRef} {...elemProps}>
+    <ButtonLabel>{children}</ButtonLabel>
+    <ButtonLabelIcon
+      size={size}
+      icon={caretDownIcon}
+      iconPosition={ButtonIconPosition.Right}
+      dropdown={true}
+    />
+  </ButtonContainer>
+);
 
-  public render() {
-    const {variant, size, buttonRef, dataLabel, icon, children, ...elemProps} = this.props;
+DropdownButton.Variant = DropdownButtonVariant;
+DropdownButton.Size = {
+  Medium: 'medium',
+  Large: 'large',
+} as const;
 
-    return (
-      <DropdownButtonCon variant={variant} size={size} ref={buttonRef} {...elemProps}>
-        <ButtonBaseLabel variant={variant} size={size}>
-          {children}
-        </ButtonBaseLabel>
-        <ButtonLabelIcon size={size} icon={caretDownIcon} dropdown={true} />
-      </DropdownButtonCon>
-    );
-  }
-}
+export default DropdownButton;
diff --git a/modules/button/react/lib/HighlightButton.tsx b/modules/button/react/lib/HighlightButton.tsx
new file mode 100644
index 0000000000..b58122eff0
--- /dev/null
+++ b/modules/button/react/lib/HighlightButton.tsx
@@ -0,0 +1,77 @@
+import * as React from 'react';
+import {colors} from '@workday/canvas-kit-react-core';
+import {GrowthBehavior} from '@workday/canvas-kit-react-common';
+import {CanvasSystemIcon} from '@workday/design-assets-types';
+import {ButtonColors} from './types';
+import {ButtonContainer, ButtonLabel, ButtonLabelIcon} from './parts';
+
+export interface HighlightButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    GrowthBehavior {
+  /**
+   * The size of the HighlightButton.
+   * @default 'medium'
+   */
+  size?: 'medium' | 'large';
+  /**
+   * The ref to the button that the styled component renders.
+   */
+  buttonRef?: React.Ref<HTMLButtonElement>;
+  /**
+   * The icon of the HighlightButton.
+   */
+  icon?: CanvasSystemIcon;
+}
+
+const getHighlightButtonColors = (): ButtonColors => ({
+  default: {
+    background: colors.soap200,
+    border: colors.soap200,
+    icon: colors.blueberry500,
+    label: colors.blueberry500,
+  },
+  hover: {
+    background: colors.soap400,
+    border: 'transparent',
+    icon: colors.blueberry500,
+    label: colors.blueberry500,
+  },
+  active: {
+    background: colors.soap500,
+    border: 'transparent',
+    icon: colors.blueberry500,
+    label: colors.blueberry500,
+  },
+  focus: {
+    background: colors.soap200,
+    border: 'transparent',
+    icon: colors.blueberry500,
+    label: colors.blueberry500,
+  },
+  disabled: {
+    background: colors.soap100,
+    border: 'transparent',
+    icon: colors.soap600,
+    label: colors.licorice100,
+  },
+});
+
+const HighlightButton = ({
+  size = 'medium',
+  buttonRef,
+  icon,
+  children,
+  ...elemProps
+}: HighlightButtonProps) => (
+  <ButtonContainer colors={getHighlightButtonColors()} size={size} ref={buttonRef} {...elemProps}>
+    {icon && <ButtonLabelIcon size={size} icon={icon} />}
+    <ButtonLabel>{children}</ButtonLabel>
+  </ButtonContainer>
+);
+
+HighlightButton.Size = {
+  Medium: 'medium',
+  Large: 'large',
+} as const;
+
+export default HighlightButton;
diff --git a/modules/button/react/lib/IconButton.tsx b/modules/button/react/lib/IconButton.tsx
index aa300ffd88..7f0e5e4287 100644
--- a/modules/button/react/lib/IconButton.tsx
+++ b/modules/button/react/lib/IconButton.tsx
@@ -1,33 +1,29 @@
 import * as React from 'react';
-import {styled} from '@workday/canvas-kit-labs-react-core';
-import isPropValid from '@emotion/is-prop-valid';
-import {IconButtonVariant, IconButtonSize} from './types';
-import {iconButtonStyles} from './ButtonStyles';
-import {getButtonStyle} from './utils';
-import {colors} from '@workday/canvas-kit-react-core';
+import {colors, spacing, borderRadius} from '@workday/canvas-kit-react-core';
+import {focusRing} from '@workday/canvas-kit-react-common';
 import {SystemIcon} from '@workday/canvas-kit-react-icon';
-import {focusRing, mouseFocusBehavior} from '@workday/canvas-kit-react-common';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
-import {ClassNames, CSSObject} from '@emotion/core';
+import {IconButtonVariant, ButtonColors} from './types';
+import {ButtonContainer} from './parts';
 
 export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  /**
-   * The type of the IconButton.
-   * @default IconButtonVariant.Circle
-   */
-  variant: IconButtonVariant;
   /**
    * The accessibility label to indicate the action triggered by clicking the IconButton.
    */
   'aria-label': string;
+  /**
+   * The type of the IconButton.
+   * @default IconButtonVariant.Circle
+   */
+  variant?: IconButtonVariant;
   /**
    * The size of the IconButton.
-   * @default IconButtonSize.Medium
+   * @default 'medium'
    */
-  size?: IconButtonSize;
+  size?: 'small' | 'medium';
   /**
-   * If true, toggle the IconButton on.
-   * @default false
+   * The toggled state of the button. If defined as a boolean, then it manages the toggled state: on (`true`) or off (`false`).
+   * @default undefined
    */
   toggled?: boolean;
   /**
@@ -44,227 +40,187 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
   onToggleChange?: (toggled: boolean | undefined) => void;
 }
 
-function getFillSelector(fillColor: string): CSSObject {
-  return {
-    '&:focus span .wd-icon-fill, &:hover span .wd-icon-fill, span .wd-icon-fill': {
-      fill: fillColor,
-    },
-  };
-}
-
-function getBackgroundSelector(fillColor: string): CSSObject {
-  return {
-    '&:hover span .wd-icon-background, span .wd-icon-background': {
-      fill: fillColor,
-    },
-  };
-}
+const IconButton = ({
+  variant = IconButtonVariant.Circle,
+  size = 'medium',
+  buttonRef,
+  onToggleChange,
+  icon,
+  toggled,
+  children,
+  ...elemProps
+}: IconButtonProps) => {
+  const isInitialMount = React.useRef(true);
 
-function getAccentSelector(fillColor: string): CSSObject {
-  return {
-    '&:focus span .wd-icon-accent, &:hover span .wd-icon-accent, span .wd-icon-accent': {
-      fill: fillColor,
-    },
-  };
-}
-
-export const iconButtonIdentifier = 'wdc-ckr-icon-button';
-
-export const IconButtonCon = styled('button', {
-  shouldForwardProp: prop => isPropValid(prop) && prop !== 'size',
-})<IconButtonProps>(
-  iconButtonStyles.styles,
-  ({variant}) => getButtonStyle(iconButtonStyles, variant),
-  ({size, variant}) => {
-    switch (size) {
-      default:
-      case IconButtonSize.Medium:
-        return {
-          margin: variant === IconButtonVariant.Plain ? '-8px' : undefined,
-          ...iconButtonStyles.variants!.sizes.medium,
-        };
-      case IconButtonSize.Small:
-        return {
-          margin: variant === IconButtonVariant.Plain ? '-6px' : undefined,
-          ...iconButtonStyles.variants!.sizes.small,
-        };
-    }
-  },
-  ({variant, toggled}) => {
-    if (!toggled) {
-      return {};
-    }
-    switch (variant) {
-      case IconButtonVariant.CircleFilled:
-      case IconButtonVariant.SquareFilled:
-      case IconButtonVariant.Circle:
-      case IconButtonVariant.Square:
-      default: {
-        return {
-          backgroundColor: colors.blueberry400,
-          ...getFillSelector(colors.frenchVanilla100),
-          ...getAccentSelector(colors.blueberry400),
-          ...getBackgroundSelector(colors.frenchVanilla100),
-          '&:focus&:hover, &:focus, &:active, &:active:hover': {
-            ...getFillSelector(colors.frenchVanilla100),
-            ...getAccentSelector(colors.blueberry400),
-            ...getBackgroundSelector(colors.frenchVanilla100),
-            backgroundColor: colors.blueberry500,
-          },
-          '&:not([disabled])': {
-            '&:focus, &:focus:active': {
-              backgroundColor: colors.blueberry500,
-              ...(toggled ? focusRing(2, 2) : {}),
-            },
-          },
-          '&:hover, &:active': {
-            ...getFillSelector(colors.frenchVanilla100),
-            ...getAccentSelector(colors.blueberry400),
-            ...getBackgroundSelector(colors.frenchVanilla100),
-            backgroundColor: colors.blueberry500,
-          },
-          '&:disabled, &:active:disabled, &:focus:disabled, &:hover:disabled': {
-            backgroundColor: colors.blueberry100,
-            ...getFillSelector(colors.blueberry300),
-            ...getAccentSelector(colors.frenchVanilla100),
-            ...getBackgroundSelector(colors.blueberry300),
-          },
-          ...mouseFocusBehavior({
-            '&:focus:active': {
-              ...getFillSelector(colors.frenchVanilla100),
-              ...getAccentSelector(colors.blueberry400),
-              ...getBackgroundSelector(colors.frenchVanilla100),
-              backgroundColor: `${colors.blueberry500} !important`,
-            },
-          }),
-        };
+  // Only call onToggleChange on update - not on first mount
+  React.useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+    } else {
+      if (toggled && typeof onToggleChange === 'function') {
+        onToggleChange(toggled);
       }
-
-      case IconButtonVariant.Plain:
-        return {
-          backgroundColor: 'transparent',
-          ...getFillSelector(colors.blueberry400),
-          ...getAccentSelector(colors.frenchVanilla100),
-          ...getBackgroundSelector(colors.blueberry400),
-          '&:focus:hover, &:focus, &:active, &:active:hover': {
-            ...getFillSelector(colors.blueberry400),
-            ...getAccentSelector(colors.frenchVanilla100),
-            ...getBackgroundSelector(colors.blueberry400),
-          },
-          '&:not([disabled]):focus': {
-            ...getFillSelector(colors.blueberry400),
-            ...getAccentSelector(colors.frenchVanilla100),
-            ...getBackgroundSelector(colors.blueberry400),
-            ...(toggled ? focusRing(2, 0) : {}),
-          },
-          '&:disabled, &:active:disabled, &:focus:disabled, &:hover:disabled': {
-            ...getFillSelector(colors.blueberry200),
-            ...getAccentSelector(colors.frenchVanilla100),
-            ...getBackgroundSelector(colors.blueberry200),
-          },
-        };
-
-      case IconButtonVariant.Inverse:
-      case IconButtonVariant.InverseFilled:
-        return {
-          ...getFillSelector(colors.blueberry400),
-          ...getAccentSelector(colors.frenchVanilla100),
-          ...getBackgroundSelector(colors.blueberry400),
-          backgroundColor: colors.frenchVanilla100,
-          '&:focus': {
-            backgroundColor: colors.frenchVanilla100,
-            ...getFillSelector(colors.blueberry400),
-            ...getAccentSelector(colors.frenchVanilla100),
-            ...getBackgroundSelector(colors.blueberry400),
-          },
-          '&:focus&:hover, &:active, &:active:hover': {
-            backgroundColor: colors.frenchVanilla100,
-            ...getFillSelector(colors.blueberry400),
-            ...getAccentSelector(colors.frenchVanilla100),
-            ...getBackgroundSelector(colors.blueberry400),
-          },
-          '&:focus:active': {
-            backgroundColor: colors.frenchVanilla100,
-          },
-
-          '&:hover': {
-            backgroundColor: colors.frenchVanilla100,
-          },
-          '&:not([disabled])': {
-            '&:focus': {
-              backgroundColor: colors.frenchVanilla100,
-              ...(toggled
-                ? focusRing(2, 2, true, false, 'currentColor', colors.frenchVanilla100)
-                : {}),
-            },
-            '&:focus:active': {
-              backgroundColor: colors.frenchVanilla100,
-            },
-          },
-          '&:disabled, &:active:disabled, &:focus:disabled, &:hover:disabled': {
-            backgroundColor: 'rgba(255,255,255,0.75)',
-            ...getFillSelector(colors.blueberry400),
-            ...getAccentSelector(colors.frenchVanilla100),
-            ...getBackgroundSelector(colors.blueberry400),
-          },
-          ...mouseFocusBehavior({
-            '&:focus:active': {
-              backgroundColor: `${colors.frenchVanilla100} !important`,
-            },
-          }),
-        };
     }
-  }
-);
+  }, [toggled, onToggleChange]);
 
-export default class IconButton extends React.Component<IconButtonProps> {
-  public static Variant = IconButtonVariant;
-  public static Size = IconButtonSize;
+  const containerStyles = {
+    padding: 0,
+    margin: variant === IconButtonVariant.Plain ? '-8px' : undefined,
+    minWidth: size === 'small' ? spacing.l : spacing.xl, // min-width is set so buttons don't collapse in IE11
+    width: size === 'small' ? spacing.l : spacing.xl,
+    height: size === 'small' ? spacing.l : spacing.xl,
+    borderRadius:
+      variant === IconButtonVariant.Square || variant === IconButtonVariant.SquareFilled
+        ? borderRadius.m
+        : borderRadius.circle,
+    ['& .wd-icon']: {
+      display: 'inline-block',
+      verticalAlign: 'middle',
+      width: size === 'small' ? '20px' : undefined,
+      height: size === 'small' ? '20px' : undefined,
+    },
+  };
 
-  static defaultProps = {
-    variant: IconButtonVariant.Circle,
-    size: IconButtonSize.Medium,
-  } as const;
+  return (
+    <ButtonContainer
+      colors={getIconButtonColors(variant, toggled)}
+      size={size}
+      ref={buttonRef}
+      fillIcon={toggled}
+      extraStyles={containerStyles}
+      aria-pressed={toggled}
+      {...elemProps}
+    >
+      {icon ? <SystemIcon icon={icon} /> : children}
+    </ButtonContainer>
+  );
+};
 
-  componentDidUpdate(prevProps: IconButtonProps) {
-    if (
-      prevProps.toggled !== this.props.toggled &&
-      typeof this.props.onToggleChange === 'function'
-    ) {
-      this.props.onToggleChange(this.props.toggled);
-    }
-  }
+IconButton.Variant = IconButtonVariant;
+IconButton.Size = {
+  Small: 'small',
+  Medium: 'medium',
+} as const;
 
-  public render() {
-    // onToggleChange will generate a warning if spread over a <button>
-    const {
-      buttonRef,
-      size,
-      variant,
-      onToggleChange,
-      icon,
-      toggled,
-      children,
-      className,
-      ...elemProps
-    } = this.props;
+export default IconButton;
 
-    return (
-      <ClassNames>
-        {({cx}) => (
-          <IconButtonCon
-            toggled={toggled}
-            ref={buttonRef}
-            variant={variant}
-            size={size}
-            aria-pressed={toggled}
-            className={cx(iconButtonIdentifier, className)}
-            {...elemProps}
-          >
-            {icon ? <SystemIcon icon={icon} /> : children}
-          </IconButtonCon>
-        )}
-      </ClassNames>
-    );
+const getIconButtonColors = (variant: IconButtonVariant, toggled?: boolean): ButtonColors => {
+  switch (variant) {
+    case IconButton.Variant.Square:
+    case IconButtonVariant.Circle:
+    default:
+      return {
+        default: {
+          background: toggled ? colors.blueberry400 : undefined,
+          icon: toggled ? colors.frenchVanilla100 : colors.licorice200,
+        },
+        hover: {
+          background: toggled ? colors.blueberry500 : colors.soap300,
+          icon: toggled ? colors.frenchVanilla100 : colors.licorice500,
+        },
+        active: {
+          background: toggled ? colors.blueberry500 : colors.soap500,
+          icon: toggled ? colors.frenchVanilla100 : colors.licorice500,
+        },
+        focus: {
+          background: toggled ? colors.blueberry500 : colors.soap300,
+          icon: toggled ? colors.frenchVanilla100 : colors.licorice500,
+        },
+        disabled: {
+          background: toggled ? colors.blueberry100 : 'transparent',
+          icon: toggled ? colors.blueberry300 : colors.soap600,
+        },
+      };
+    case IconButtonVariant.SquareFilled:
+    case IconButtonVariant.CircleFilled:
+      return {
+        default: {
+          background: toggled ? colors.blueberry400 : colors.soap200,
+          icon: toggled ? colors.frenchVanilla100 : colors.licorice200,
+        },
+        hover: {
+          background: toggled ? colors.blueberry500 : colors.soap400,
+          icon: toggled ? colors.frenchVanilla100 : colors.licorice500,
+        },
+        active: {
+          background: toggled ? colors.blueberry500 : colors.soap500,
+          icon: toggled ? colors.frenchVanilla100 : colors.licorice500,
+        },
+        focus: {
+          background: toggled ? colors.blueberry500 : colors.soap400,
+          icon: toggled ? colors.frenchVanilla100 : colors.licorice500,
+        },
+        disabled: {
+          background: toggled ? colors.blueberry100 : colors.soap100,
+          icon: toggled ? colors.blueberry300 : colors.soap600,
+        },
+      };
+    case IconButtonVariant.Plain:
+      return {
+        default: {
+          icon: toggled ? colors.blueberry400 : colors.licorice200,
+        },
+        hover: {
+          icon: toggled ? colors.blueberry400 : colors.licorice500,
+        },
+        active: {
+          icon: toggled ? colors.blueberry400 : colors.licorice500,
+        },
+        focus: {
+          icon: toggled ? colors.blueberry400 : colors.licorice500,
+          focusRing: focusRing(2, 0),
+        },
+        disabled: {
+          icon: toggled ? colors.blueberry200 : colors.soap600,
+        },
+      };
+    case IconButtonVariant.Inverse:
+      return {
+        default: {
+          background: toggled ? colors.frenchVanilla100 : undefined,
+          icon: toggled ? colors.blueberry400 : colors.frenchVanilla100,
+        },
+        hover: {
+          background: toggled ? colors.frenchVanilla100 : 'rgba(0, 0, 0, 0.2)',
+          icon: toggled ? colors.blueberry400 : colors.frenchVanilla100,
+        },
+        active: {
+          background: toggled ? colors.frenchVanilla100 : 'rgba(0, 0, 0, 0.3)',
+          icon: toggled ? colors.blueberry400 : colors.frenchVanilla100,
+        },
+        focus: {
+          background: toggled ? colors.frenchVanilla100 : 'rgba(0, 0, 0, 0.2)',
+          icon: toggled ? colors.blueberry400 : colors.frenchVanilla100,
+          focusRing: focusRing(2, 2, true, false, 'currentColor', colors.frenchVanilla100),
+        },
+        disabled: {
+          background: toggled ? 'rgba(255,255,255,0.75)' : 'transparent',
+          icon: toggled ? colors.blueberry400 : 'rgba(255, 255, 255, 0.75)',
+        },
+      };
+    case IconButtonVariant.InverseFilled:
+      return {
+        default: {
+          background: toggled ? colors.frenchVanilla100 : 'rgba(0, 0, 0, 0.2)',
+          icon: toggled ? colors.blueberry400 : colors.frenchVanilla100,
+        },
+        hover: {
+          background: toggled ? colors.frenchVanilla100 : 'rgba(0, 0, 0, 0.3)',
+          icon: toggled ? colors.blueberry400 : colors.frenchVanilla100,
+        },
+        active: {
+          background: toggled ? colors.frenchVanilla100 : 'rgba(0, 0, 0, 0.4)',
+          icon: toggled ? colors.blueberry400 : colors.frenchVanilla100,
+        },
+        focus: {
+          background: toggled ? colors.frenchVanilla100 : 'rgba(0, 0, 0, 0.2)',
+          icon: toggled ? colors.blueberry400 : colors.frenchVanilla100,
+          focusRing: focusRing(2, 2, true, false, 'currentColor', colors.frenchVanilla100),
+        },
+        disabled: {
+          background: toggled ? 'rgba(255,255,255,0.75)' : 'rgba(0, 0, 0, 0.2)',
+          icon: toggled ? colors.blueberry400 : 'rgba(255, 255, 255, 0.75)',
+        },
+      };
   }
-}
+};
diff --git a/modules/button/react/lib/IconButtonToggleGroup.tsx b/modules/button/react/lib/IconButtonToggleGroup.tsx
deleted file mode 100644
index 47e4450e25..0000000000
--- a/modules/button/react/lib/IconButtonToggleGroup.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import * as React from 'react';
-import styled from '@emotion/styled';
-import {spacing, borderRadius} from '@workday/canvas-kit-react-core';
-import IconButton, {IconButtonProps, iconButtonIdentifier} from './IconButton';
-
-export interface IconButtonToggleGroupProps {
-  /**
-   * The IconButton children of the IconButtonToggleGroup (must be at least two).
-   */
-  children: React.ReactElement<IconButtonProps>[];
-
-  /**
-   * The value or index of the IconButton that the IconButtonToggleGroup should be toggled on to. If a string is provided, the IconButton with the corresponding value will be selected. If a number is provided, the IconButton with the corresponding index will be selected.
-   * @default 0
-   */
-  value?: string | number;
-
-  /**
-   * If true, render the IconButtonToggleGroup from right to left.
-   * @default false
-   */
-  isRTL?: boolean;
-
-  /**
-   * The function called when a button in the IconButtonToggleGroup is selected. If the selected button has a value, that value will be passed to the callback function; otherwise, the index of the button will be passed.
-   */
-  onChange?: (value: string | number) => void;
-}
-
-const Container = styled('div')({
-  [`.${iconButtonIdentifier}`]: {
-    borderRadius: borderRadius.zero,
-    borderWidth: '1px',
-    marginLeft: '-1px',
-    '&:first-child': {
-      borderTopLeftRadius: spacing.xxxs,
-      borderBottomLeftRadius: spacing.xxxs,
-      marginLeft: 0,
-    },
-    '&:last-child': {
-      borderTopRightRadius: spacing.xxxs,
-      borderBottomRightRadius: spacing.xxxs,
-    },
-    '&:focus': {
-      borderRadius: spacing.xxxs,
-      zIndex: 1,
-      animation: 'none', // reset focusRing animation
-      transition: 'all 120ms, border-radius 1ms',
-    },
-  },
-});
-
-export default class IconButtonToggleGroup extends React.Component<IconButtonToggleGroupProps> {
-  static defaultProps = {
-    value: 0,
-  };
-
-  render(): React.ReactNode {
-    const children = this.props.isRTL ? [...this.props.children].reverse() : this.props.children;
-    return <Container>{React.Children.map(children, this.renderChild)}</Container>;
-  }
-
-  private renderChild = (
-    child: React.ReactElement<IconButtonProps>,
-    index: number
-  ): React.ReactNode => {
-    if (typeof child.type === typeof IconButton) {
-      const childProps = child.props;
-      const toggled =
-        typeof this.props.value === 'number'
-          ? index === this.props.value
-          : childProps.value === this.props.value;
-
-      return React.cloneElement(child, {
-        toggled,
-        variant: IconButton.Variant.SquareFilled,
-        onClick: this.onButtonClick.bind(this, childProps.onClick, index),
-      });
-    }
-
-    return child;
-  };
-
-  private onButtonClick = (
-    existingOnClick: (e: React.SyntheticEvent) => void | undefined,
-    index: number,
-    event: React.MouseEvent<HTMLButtonElement>
-  ): void => {
-    if (existingOnClick) {
-      existingOnClick(event);
-    }
-
-    const target = event.currentTarget;
-    if (target && this.props.onChange) {
-      if (target.value) {
-        this.props.onChange(target.value);
-      } else {
-        this.props.onChange(index);
-      }
-    }
-  };
-}
diff --git a/modules/button/react/lib/OutlineButton.tsx b/modules/button/react/lib/OutlineButton.tsx
new file mode 100644
index 0000000000..f14f27b3f9
--- /dev/null
+++ b/modules/button/react/lib/OutlineButton.tsx
@@ -0,0 +1,164 @@
+import * as React from 'react';
+import {colors} from '@workday/canvas-kit-react-core';
+import {focusRing, GrowthBehavior} from '@workday/canvas-kit-react-common';
+import {CanvasSystemIcon} from '@workday/design-assets-types';
+import {OutlineButtonVariant, ButtonColors, ButtonSize} from './types';
+import {ButtonContainer, ButtonLabel, ButtonLabelData, ButtonLabelIcon} from './parts';
+
+export interface OutlineButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    GrowthBehavior {
+  /**
+   * The variant of the Button.
+   * @default OutlineButtonVariant.Secondary
+   */
+  variant?: OutlineButtonVariant;
+  /**
+   * The size of the Button.
+   * @default 'medium'
+   */
+  size?: 'small' | 'medium' | 'large';
+  /**
+   * The ref to the button that the styled component renders.
+   */
+  buttonRef?: React.Ref<HTMLButtonElement>;
+  /**
+   * The data label of the Button.
+   * Note: not displayed at `small` size
+   */
+  dataLabel?: String;
+  /**
+   * The icon of the Button.
+   * Note: not displayed at `small` size
+   */
+  icon?: CanvasSystemIcon;
+}
+
+const OutlineButton = ({
+  variant = OutlineButtonVariant.Secondary,
+  size = 'medium',
+  buttonRef,
+  dataLabel,
+  icon,
+  children,
+  ...elemProps
+}: OutlineButtonProps) => (
+  <ButtonContainer
+    colors={getOutlineButtonColors(variant)}
+    size={size}
+    ref={buttonRef}
+    {...elemProps}
+  >
+    {icon && size !== 'small' && <ButtonLabelIcon size={size} icon={icon} />}
+    <ButtonLabel>{children}</ButtonLabel>
+    {dataLabel && size !== 'small' && <ButtonLabelData>{dataLabel}</ButtonLabelData>}
+  </ButtonContainer>
+);
+
+OutlineButton.Variant = OutlineButtonVariant;
+OutlineButton.Size = ButtonSize;
+
+export default OutlineButton;
+
+export const getOutlineButtonColors = (variant: OutlineButtonVariant): ButtonColors => {
+  switch (variant) {
+    case OutlineButtonVariant.Primary:
+      return {
+        default: {
+          border: colors.blueberry400,
+          icon: colors.blueberry400,
+          label: colors.blueberry400,
+        },
+        hover: {
+          background: colors.blueberry400,
+          icon: colors.frenchVanilla100,
+          label: colors.frenchVanilla100,
+        },
+        active: {
+          background: colors.blueberry500,
+          border: colors.blueberry500,
+          icon: colors.frenchVanilla100,
+          label: colors.frenchVanilla100,
+        },
+        focus: {
+          background: colors.blueberry400,
+          icon: colors.frenchVanilla100,
+          label: colors.frenchVanilla100,
+        },
+        disabled: {
+          background: colors.frenchVanilla100,
+          border: colors.soap500,
+          icon: colors.soap600,
+          label: colors.licorice100,
+        },
+      };
+    case OutlineButtonVariant.Secondary:
+    default:
+      return {
+        default: {
+          border: colors.soap500,
+          icon: colors.licorice200,
+          label: colors.blackPepper400,
+        },
+        hover: {
+          background: colors.licorice500,
+          border: colors.licorice500,
+          icon: colors.frenchVanilla100,
+          label: colors.frenchVanilla100,
+        },
+        active: {
+          background: colors.licorice600,
+          border: colors.licorice600,
+          icon: colors.frenchVanilla100,
+          label: colors.frenchVanilla100,
+        },
+        focus: {
+          background: colors.licorice500,
+          border: colors.licorice500,
+          icon: colors.frenchVanilla100,
+          label: colors.frenchVanilla100,
+        },
+        disabled: {
+          background: colors.frenchVanilla100,
+          border: colors.soap500,
+          icon: colors.soap600,
+          label: colors.licorice100,
+        },
+      };
+    case OutlineButtonVariant.Inverse:
+      return {
+        default: {
+          border: colors.frenchVanilla100,
+          icon: colors.frenchVanilla100,
+          label: colors.frenchVanilla100,
+        },
+        hover: {
+          background: colors.frenchVanilla100,
+          icon: colors.licorice500,
+          label: colors.blackPepper400,
+          labelData: colors.licorice300,
+        },
+        active: {
+          background: colors.soap300,
+          border: colors.soap300,
+          icon: colors.licorice500,
+          label: colors.blackPepper400,
+          labelData: colors.licorice300,
+        },
+        focus: {
+          background: colors.frenchVanilla100,
+          icon: colors.licorice500,
+          label: colors.blackPepper400,
+          labelData: colors.licorice300,
+          focusRing: focusRing(2, 2, true, false, 'currentColor', colors.frenchVanilla100),
+        },
+        disabled: {
+          background: 'transparent',
+          border: 'rgba(255, 255, 255, 0.75)',
+          icon: 'rgba(255, 255, 255, 0.75)',
+          label: 'rgba(255, 255, 255, 0.75)',
+          labelData: 'rgba(255, 255, 255, 0.75)',
+        },
+      };
+  }
+};
diff --git a/modules/button/react/lib/TextButton.tsx b/modules/button/react/lib/TextButton.tsx
index f5c5376926..4e601d791d 100644
--- a/modules/button/react/lib/TextButton.tsx
+++ b/modules/button/react/lib/TextButton.tsx
@@ -1,74 +1,143 @@
 import * as React from 'react';
-import {ButtonBaseLabel, ButtonLabelIcon} from './ButtonBase';
-import {getButtonStyle} from './utils';
-import {styled} from '@workday/canvas-kit-labs-react-core';
-import isPropValid from '@emotion/is-prop-valid';
-import {ButtonSize, IconPosition, TextButtonVariant} from './types';
-import {BaseButtonProps} from './Button';
-import {textButtonStyles} from './ButtonStyles';
+import {type} from '@workday/canvas-kit-labs-react-core';
+import {focusRing} from '@workday/canvas-kit-react-common';
+import {colors, spacing, borderRadius} from '@workday/canvas-kit-react-core';
+import {CanvasSystemIcon} from '@workday/design-assets-types';
+import {TextButtonVariant, ButtonIconPosition, ButtonColors} from './types';
+import {ButtonContainer, ButtonLabelIcon, ButtonLabel} from './parts';
 
-export interface TextButtonProps extends BaseButtonProps<TextButtonVariant> {
+export interface TextButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * The variant of the TextButton.
+   * @default TextButtonVariant.Default
+   */
+  variant?: TextButtonVariant;
+  /**
+   * The size of the TextButton.
+   * @default 'medium'
+   */
+  size?: 'small' | 'medium';
   /**
    * The position of the TextButton icon. Accepts `Left` or `Right`.
-   * @default IconPosition.Left
+   * @default ButtonIconPosition.Left
+   */
+  iconPosition?: ButtonIconPosition;
+  /**
+   * The ref to the button that the styled component renders.
+   */
+  buttonRef?: React.Ref<HTMLButtonElement>;
+  /**
+   * The icon of the TextButton.
+   */
+  icon?: CanvasSystemIcon;
+  /**
+   * The capitialization of the text in the button.
    */
-  iconPosition?: IconPosition;
+  allCaps?: boolean;
 }
 
-const TextButtonCon = styled('button', {
-  shouldForwardProp: prop => isPropValid(prop) && prop !== 'size',
-})<TextButtonProps>(
-  textButtonStyles.styles,
-  ({variant}) => getButtonStyle(textButtonStyles, variant),
-  ({size}) => {
-    const {sizes} = textButtonStyles.variants!;
-
-    switch (size) {
-      case ButtonSize.Large:
-      default:
-        return sizes.large;
-      case ButtonSize.Medium:
-      case ButtonSize.Small:
-        return sizes.small;
-    }
+const getTextButtonColors = (variant: TextButtonVariant): ButtonColors => {
+  switch (variant) {
+    case TextButtonVariant.Default:
+    default:
+      return {
+        default: {
+          icon: colors.blueberry400,
+          label: colors.blueberry400,
+        },
+        hover: {
+          icon: colors.blueberry500,
+          label: colors.blueberry500,
+        },
+        active: {
+          icon: colors.blueberry500,
+          label: colors.blueberry500,
+        },
+        focus: {
+          icon: colors.blueberry500,
+          label: colors.blueberry500,
+          focusRing: focusRing(2, 0),
+        },
+        disabled: {
+          icon: 'rgba(8, 117, 225, 0.5)',
+          label: 'rgba(8, 117, 225, 0.5)',
+        },
+      };
+    case TextButtonVariant.Inverse:
+      return {
+        default: {
+          icon: colors.frenchVanilla100,
+          label: colors.frenchVanilla100,
+        },
+        hover: {},
+        active: {},
+        focus: {
+          focusRing: focusRing(2, 0, true, false, undefined, 'currentColor'),
+        },
+        disabled: {
+          icon: 'rgba(255, 255, 255, 0.5)',
+          label: 'rgba(255, 255, 255, 0.5)',
+        },
+      };
   }
-);
+};
 
-export default class TextButton extends React.Component<TextButtonProps> {
-  public static IconPosition = IconPosition;
-  public static Variant = TextButtonVariant;
-  public static Size = ButtonSize;
+const containerStyles = {
+  borderRadius: borderRadius.m,
+  border: '0',
+  padding: `0 ${spacing.xxs}`,
+  minWidth: 'auto',
+  '&:hover:not([disabled])': {textDecoration: 'underline'},
+};
 
-  static defaultProps = {
-    iconPosition: IconPosition.Left,
-    variant: TextButtonVariant.Default,
-    size: ButtonSize.Large,
-  };
+const TextButton = ({
+  variant = TextButtonVariant.Default,
+  size = 'medium',
+  iconPosition = ButtonIconPosition.Left,
+  buttonRef,
+  children,
+  icon,
+  allCaps,
+  ...elemProps
+}: TextButtonProps) => {
+  // Note: We don't use ButtonLabel because the label styles differ from other button types
+  const allContainerStyles = allCaps
+    ? {
+        ...containerStyles,
+        ...type.variant.caps,
+        ...type.variant.button,
+        fontSize: size === 'medium' ? type.body.fontSize : undefined,
+        letterSpacing: '.5px',
+      }
+    : {
+        ...containerStyles,
+        fontSize: size === 'medium' ? type.body.fontSize : undefined,
+      };
 
-  public render() {
-    const {
-      buttonRef,
-      onClick,
-      children,
-      iconPosition,
-      size,
-      variant,
-      icon,
-      ...elemProps
-    } = this.props;
+  return (
+    <ButtonContainer
+      colors={getTextButtonColors(variant)}
+      ref={buttonRef}
+      size={size}
+      extraStyles={allContainerStyles}
+      {...elemProps}
+    >
+      {icon && iconPosition === ButtonIconPosition.Left && (
+        <ButtonLabelIcon size={size} iconPosition={iconPosition} icon={icon} />
+      )}
+      <ButtonLabel>{children}</ButtonLabel>
+      {icon && iconPosition === ButtonIconPosition.Right && (
+        <ButtonLabelIcon size={size} iconPosition={iconPosition} icon={icon} />
+      )}
+    </ButtonContainer>
+  );
+};
 
-    return (
-      <TextButtonCon onClick={onClick} ref={buttonRef} size={size} variant={variant} {...elemProps}>
-        {icon && iconPosition === IconPosition.Left && (
-          <ButtonLabelIcon size={size} iconPosition={iconPosition} icon={icon} />
-        )}
-        <ButtonBaseLabel size={size} variant={variant}>
-          {children}
-        </ButtonBaseLabel>
-        {icon && iconPosition === IconPosition.Right && (
-          <ButtonLabelIcon size={size} iconPosition={iconPosition} icon={icon} />
-        )}
-      </TextButtonCon>
-    );
-  }
-}
+TextButton.IconPosition = ButtonIconPosition;
+TextButton.Variant = TextButtonVariant;
+TextButton.Size = {
+  Small: 'small',
+  Medium: 'medium',
+} as const;
+
+export default TextButton;
diff --git a/modules/button/react/lib/deprecated_Button.tsx b/modules/button/react/lib/deprecated_Button.tsx
new file mode 100644
index 0000000000..a0303b560d
--- /dev/null
+++ b/modules/button/react/lib/deprecated_Button.tsx
@@ -0,0 +1,181 @@
+import * as React from 'react';
+import canvas, {borderRadius, type} from '@workday/canvas-kit-react-core';
+import {focusRing, mouseFocusBehavior, GrowthBehavior} from '@workday/canvas-kit-react-common';
+import {DeprecatedButtonVariant, ButtonSize} from './types';
+import styled from '@emotion/styled';
+
+export interface DeprecatedButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    GrowthBehavior {
+  /**
+   * The variant of the Button.
+   * @default DeprecatedButtonVariant.Secondary
+   */
+  variant?: DeprecatedButtonVariant;
+  /**
+   * The size of the Button.
+   * @default 'medium'
+   */
+  size?: 'small' | 'medium' | 'large';
+  /**
+   * The ref to the button that the styled component renders.
+   */
+  buttonRef?: React.Ref<HTMLButtonElement>;
+}
+
+const Container = styled('button')<DeprecatedButtonProps>(
+  {
+    fontFamily: type.body.fontFamily,
+    fontSize: type.body.fontSize,
+    ...type.variant.button,
+    boxSizing: 'border-box',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: borderRadius.circle,
+    border: '1px solid transparent',
+    boxShadow: 'none',
+    position: 'relative',
+    cursor: 'pointer',
+    outline: 'none',
+    transition:
+      'box-shadow 120ms linear, border 120ms linear, background-color 120ms linear, color 120ms linear',
+    '&:hover:active': {transitionDuration: '40ms'}, // Makes the "down" state of the button happens faster than the hover state, so it animates in correctly.
+    '&:disabled, &:disabled:active': {cursor: 'default', boxShadow: 'none'},
+  },
+  ({size}) => {
+    switch (size) {
+      case 'large':
+        return {
+          height: '40px',
+          padding: `0 ${canvas.spacing.l}`,
+          minWidth: '112px',
+          maxWidth: '288px',
+        };
+      case 'medium':
+      default:
+        return {
+          height: '24px',
+          padding: `0 ${canvas.spacing.m}`,
+          minWidth: '80px',
+          maxWidth: '200px',
+          fontSize: type.body2.fontSize,
+        };
+      case 'small':
+        return {
+          height: '18px',
+          padding: `0 ${canvas.spacing.xxs}`,
+          minWidth: '56px',
+          maxWidth: '120px',
+          fontSize: '10px',
+          lineHeight: 'normal',
+        };
+    }
+  },
+  ({grow}) => grow && {width: '100%', maxWidth: '100%'},
+  ({variant}) => {
+    let buttonColors;
+    switch (variant) {
+      case DeprecatedButtonVariant.Primary:
+        buttonColors = canvas.buttonColors.primary;
+        break;
+      case DeprecatedButtonVariant.Secondary:
+      default:
+        buttonColors = canvas.buttonColors.secondary;
+        break;
+      case DeprecatedButtonVariant.Delete:
+        buttonColors = {
+          ...canvas.buttonColors.delete,
+          focusBorder: canvas.colors.cinnamon500,
+          activeBorder: canvas.colors.cinnamon500,
+        };
+        break;
+    }
+
+    if (!buttonColors) {
+      return {};
+    }
+
+    const baseStyles = {
+      backgroundColor: buttonColors.background,
+      borderColor: buttonColors.border,
+      color: buttonColors.text,
+    };
+
+    const hoverStyles = {
+      ':hover': {
+        backgroundColor: buttonColors.hoverBackground,
+        borderColor: buttonColors.hoverBorder,
+        color: buttonColors.hoverText,
+      },
+    };
+
+    const activeStyles = {
+      ':active, :focus:active, :hover:active': {
+        backgroundColor: buttonColors.activeBackground,
+        borderColor: buttonColors.activeBorder,
+        color: buttonColors.activeText,
+      },
+    };
+
+    return {
+      ...baseStyles,
+      ':focus': {
+        backgroundColor: buttonColors.focusBackground,
+        borderColor: buttonColors.focusBorder,
+        color: buttonColors.focusText,
+      },
+
+      ...activeStyles,
+      ...hoverStyles,
+      ':disabled, :active:disabled, :focus:disabled, :hover:disabled': {
+        backgroundColor: buttonColors.disabledBackground,
+        borderColor: buttonColors.disabledBorder,
+        color: buttonColors.disabledText,
+      },
+      '&:not([disabled])': {
+        '&:focus': {
+          borderColor: buttonColors.focusBorder,
+          ...focusRing(2, 0),
+        },
+        '&:active': {
+          borderColor: buttonColors.activeBorder,
+          ...focusRing(2, 0),
+        },
+      },
+      ...mouseFocusBehavior({
+        '&:focus': {
+          ...baseStyles,
+          outline: 'none',
+          boxShadow: 'none',
+          animation: 'none',
+          ...hoverStyles,
+          ...activeStyles,
+        },
+      }),
+    };
+  }
+);
+
+const DeprecatedButton = ({
+  variant = DeprecatedButtonVariant.Secondary,
+  size = 'large',
+  buttonRef,
+  children,
+  ...elemProps
+}: DeprecatedButtonProps) => {
+  React.useEffect(() => {
+    console.warn('This component is now deprecated, consider using the new Button component');
+  }, []);
+
+  return (
+    <Container variant={variant} size={size} ref={buttonRef} {...elemProps}>
+      {children}
+    </Container>
+  );
+};
+
+DeprecatedButton.Variant = DeprecatedButtonVariant;
+DeprecatedButton.Size = ButtonSize;
+
+export default DeprecatedButton;
diff --git a/modules/button/react/lib/parts/ButtonContainer.tsx b/modules/button/react/lib/parts/ButtonContainer.tsx
new file mode 100644
index 0000000000..a7d5cc616d
--- /dev/null
+++ b/modules/button/react/lib/parts/ButtonContainer.tsx
@@ -0,0 +1,214 @@
+import * as React from 'react';
+import isPropValid from '@emotion/is-prop-valid';
+import {CSSObject} from '@emotion/core';
+import {styled, type} from '@workday/canvas-kit-labs-react-core';
+import canvas, {borderRadius, spacing, spacingNumbers} from '@workday/canvas-kit-react-core';
+import {GrowthBehavior, focusRing, mouseFocusBehavior} from '@workday/canvas-kit-react-common';
+import {ButtonColors} from '../types';
+import {buttonLabelDataClassName} from './ButtonLabelData';
+
+export interface ButtonContainerProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    GrowthBehavior {
+  colors?: ButtonColors;
+  /**
+   * The size of the Button.
+   * @default 'medium'
+   */
+  size?: 'small' | 'medium' | 'large';
+  /**
+   * The ref to the button that the styled component renders.
+   */
+  ref?: React.Ref<HTMLButtonElement>;
+  /**
+   * Whether the icon should received filled (colored background layer) or regular styles.
+   * Corresponds to `toggled` in IconButton
+   */
+  fillIcon?: boolean;
+  /**
+   * Any extra styles necessary for a given parent component.
+   * This avoids using the inline `style` attribute when the shape needs to be customized (e.g. for IconButton)
+   */
+  extraStyles?: CSSObject;
+}
+
+function getIconColorSelectors(color: string, fill?: boolean): CSSObject {
+  return {
+    '&:focus span, &:hover span, & span': {
+      '.wd-icon-fill': {
+        fill: color,
+      },
+      '.wd-icon-background': {
+        fill: fill ? color : undefined,
+      },
+      '.wd-icon-accent, .wd-icon-accent2': {
+        fill: fill
+          ? color === canvas.colors.frenchVanilla100
+            ? canvas.colors.blueberry400
+            : canvas.colors.frenchVanilla100
+          : color,
+      },
+    },
+  };
+}
+
+export const ButtonContainer = styled('button', {
+  shouldForwardProp: prop => isPropValid(prop) && prop !== 'size',
+})<ButtonContainerProps>(
+  {
+    ...type.body2,
+    ...type.variant.button,
+    lineHeight: 'normal',
+    boxSizing: 'border-box',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    background: 'none',
+    borderRadius: borderRadius.circle,
+    boxShadow: 'none',
+    position: 'relative',
+    cursor: 'pointer',
+    outline: 'none',
+    verticalAlign: 'middle',
+    border: '2px solid transparent',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    WebkitFontSmoothing: 'antialiased',
+    MozOsxFontSmoothing: 'grayscale',
+    transition:
+      'box-shadow 120ms linear, border 120ms linear, background-color 120ms linear, color 120ms linear',
+    '&:hover:active': {transitionDuration: '40ms'}, // Makes the "down" state of the button happens faster than the hover state, so it animates in correctly.
+    '&:disabled, &:disabled:active': {cursor: 'default', boxShadow: 'none'},
+    '& > *:first-of-type': {
+      paddingLeft: 0,
+    },
+    '& > *:last-of-type': {
+      paddingRight: 0,
+    },
+  },
+  ({size}) => {
+    switch (size) {
+      case 'large':
+        return {
+          fontSize: type.body.fontSize,
+          minWidth: '112px',
+          height: '48px',
+          padding: `0 ${spacing.l}`,
+          '& > * ': {
+            padding: `0 ${spacingNumbers.xs / 2}px`,
+          },
+        };
+      case 'medium':
+      default:
+        return {
+          minWidth: '96px',
+          height: spacing.xl,
+          padding: `0 ${spacing.m}`,
+          '& > * ': {
+            padding: `0 ${spacingNumbers.xxs / 2}px`,
+          },
+        };
+      case 'small':
+        return {
+          minWidth: '80px',
+          height: spacing.l,
+          padding: `0 ${spacing.s}`,
+          '& > * ': {
+            padding: `0 ${spacingNumbers.xxxs / 2}px`,
+          },
+        };
+    }
+  },
+  ({grow}) => grow && {width: '100%', maxWidth: '100%'},
+  ({colors, fillIcon}) => {
+    if (!colors) {
+      return;
+    }
+    const baseStyles = {
+      backgroundColor: colors.default.background,
+      borderColor: colors.default.border,
+      color: colors.default.label,
+      ...(colors.default.icon && {
+        '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2, .wd-icon-background': {
+          transition: 'fill 120ms ease-in',
+        },
+        ...getIconColorSelectors(colors.default.icon, fillIcon),
+      }),
+      ...(colors.default.labelData && {
+        ['.' + buttonLabelDataClassName]: {
+          color: colors.default.labelData,
+        },
+      }),
+    };
+
+    const hoverStyles = {
+      '&:hover': {
+        backgroundColor: colors.hover.background,
+        borderColor: colors.hover.border,
+        color: colors.hover.label,
+        ...(colors.hover.labelData && {
+          ['.' + buttonLabelDataClassName]: {
+            transition: 'color 120ms ease-in',
+            color: colors.hover.labelData,
+          },
+        }),
+        ...(colors.hover.icon && getIconColorSelectors(colors.hover.icon, fillIcon)),
+      },
+    };
+
+    const activeStyles = {
+      '&:active, &:focus:active, &:hover:active': {
+        backgroundColor: colors.active.background,
+        borderColor: colors.active.border,
+        color: colors.active.label,
+        ...(colors.active.labelData && {
+          ['.' + buttonLabelDataClassName]: {
+            color: colors.active.labelData,
+          },
+        }),
+        ...(colors.active.icon && getIconColorSelectors(colors.active.icon, fillIcon)),
+      },
+    };
+
+    return {
+      ...baseStyles,
+      '&:focus': {
+        backgroundColor: colors.focus.background,
+        borderColor: colors.focus.border,
+        color: colors.focus.label,
+        ...(colors.focus.focusRing || focusRing(2, 2)),
+        ...(colors.focus.labelData && {
+          ['.' + buttonLabelDataClassName]: {
+            color: colors.focus.labelData,
+          },
+        }),
+        ...(colors.focus.icon && getIconColorSelectors(colors.focus.icon, fillIcon)),
+      },
+
+      ...activeStyles,
+      ...hoverStyles,
+      '&:disabled, &:active:disabled, &:focus:disabled, &:hover:disabled': {
+        backgroundColor: colors.disabled.background,
+        borderColor: colors.disabled.border,
+        color: colors.disabled.label,
+        ...(colors.disabled.icon && getIconColorSelectors(colors.disabled.icon, fillIcon)),
+        ...(colors.disabled.labelData && {
+          ['.' + buttonLabelDataClassName]: {
+            color: colors.disabled.labelData,
+          },
+        }),
+      },
+      ...mouseFocusBehavior({
+        '&:focus': {
+          ...baseStyles,
+          outline: 'none',
+          boxShadow: 'none',
+          animation: 'none',
+          ...hoverStyles,
+          ...activeStyles,
+        },
+      }),
+    };
+  },
+  ({extraStyles}) => extraStyles
+);
diff --git a/modules/button/react/lib/parts/ButtonLabel.tsx b/modules/button/react/lib/parts/ButtonLabel.tsx
new file mode 100644
index 0000000000..b81158fa0c
--- /dev/null
+++ b/modules/button/react/lib/parts/ButtonLabel.tsx
@@ -0,0 +1,8 @@
+import {styled} from '@workday/canvas-kit-labs-react-core';
+
+export const ButtonLabel = styled('span')({
+  position: 'relative', // Fixes an IE issue with text within button moving on click
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+});
diff --git a/modules/button/react/lib/parts/ButtonLabelData.tsx b/modules/button/react/lib/parts/ButtonLabelData.tsx
new file mode 100644
index 0000000000..6166741e31
--- /dev/null
+++ b/modules/button/react/lib/parts/ButtonLabelData.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import {styled} from '@workday/canvas-kit-labs-react-core';
+
+export const buttonLabelDataClassName = 'button-label-data';
+
+const Container = styled('span')({
+  position: 'relative', // Fixes an IE issue with text within button moving on click
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  fontWeight: 400,
+});
+
+export const ButtonLabelData = (props: any) => (
+  <Container className={buttonLabelDataClassName} {...props} />
+);
diff --git a/modules/button/react/lib/parts/ButtonLabelIcon.tsx b/modules/button/react/lib/parts/ButtonLabelIcon.tsx
new file mode 100644
index 0000000000..45dd690c20
--- /dev/null
+++ b/modules/button/react/lib/parts/ButtonLabelIcon.tsx
@@ -0,0 +1,63 @@
+import * as React from 'react';
+import {styled} from '@workday/canvas-kit-labs-react-core';
+import {spacing} from '@workday/canvas-kit-react-core';
+import isPropValid from '@emotion/is-prop-valid';
+import {ButtonIconPosition} from '../types';
+import {ButtonProps} from '../Button';
+import {SystemIcon} from '@workday/canvas-kit-react-icon';
+
+export interface ButtonLabelIconProps extends Pick<ButtonProps, 'size' | 'icon'> {
+  dropdown?: boolean;
+  iconPosition?: ButtonIconPosition;
+}
+
+const ICON_SIZE = 24;
+const SMALL_ICON_SIZE = 20;
+
+const ButtonLabelIconStyled = styled('span', {
+  shouldForwardProp: prop => isPropValid(prop) && prop !== 'size',
+})<ButtonLabelIconProps>(
+  {
+    display: 'inline-block',
+  },
+  ({size}) => ({
+    width: size === 'small' ? SMALL_ICON_SIZE : ICON_SIZE,
+    height: size === 'small' ? SMALL_ICON_SIZE : ICON_SIZE,
+  }),
+  ({iconPosition, dropdown}) => ({
+    marginLeft:
+      iconPosition === ButtonIconPosition.Right
+        ? undefined
+        : `-${dropdown ? spacing.xxs : spacing.xxxs}`,
+    marginRight:
+      iconPosition === ButtonIconPosition.Right
+        ? `-${dropdown ? spacing.xxs : spacing.xxxs}  `
+        : undefined,
+  })
+);
+
+export const ButtonLabelIcon = ({
+  icon,
+  size,
+  dropdown,
+  iconPosition,
+  ...elemProps
+}: ButtonLabelIconProps) => {
+  /* istanbul ignore next line for coverage */
+  if (icon === undefined) {
+    return null;
+  }
+
+  const iconSize = size === 'small' ? SMALL_ICON_SIZE : undefined;
+
+  return (
+    <ButtonLabelIconStyled
+      iconPosition={iconPosition}
+      dropdown={dropdown}
+      size={size}
+      {...elemProps}
+    >
+      <SystemIcon size={iconSize} icon={icon} />
+    </ButtonLabelIconStyled>
+  );
+};
diff --git a/modules/button/react/lib/parts/index.tsx b/modules/button/react/lib/parts/index.tsx
new file mode 100644
index 0000000000..3f897e02a0
--- /dev/null
+++ b/modules/button/react/lib/parts/index.tsx
@@ -0,0 +1,4 @@
+export {ButtonContainer} from './ButtonContainer';
+export {ButtonLabel} from './ButtonLabel';
+export {ButtonLabelData} from './ButtonLabelData';
+export {ButtonLabelIcon} from './ButtonLabelIcon';
diff --git a/modules/button/react/lib/types.ts b/modules/button/react/lib/types.ts
index 823783d03b..280d761b80 100644
--- a/modules/button/react/lib/types.ts
+++ b/modules/button/react/lib/types.ts
@@ -1,41 +1,42 @@
+import {CSSObject} from '@emotion/core';
+
 /**
- * The different button sizes.
+ * Standard Button
  */
-export enum ButtonSize {
-  Small = 'small',
-  Medium = 'medium',
-  Large = 'large',
+export enum ButtonVariant {
+  Primary = 'primary',
+  Secondary = 'secondary',
 }
-
-export enum IconButtonSize {
-  Small = 'small',
-  Medium = 'medium',
+export enum ButtonIconPosition {
+  Left = 'iconPositionLeft',
+  Right = 'iconPositionRight',
 }
+export const ButtonSize = {
+  Small: 'small',
+  Medium: 'medium',
+  Large: 'large',
+} as const;
 
-// TODO (beta button): consolidate all these button types
 /**
- * The different button types.
+ * Outline Button
  */
+export enum OutlineButtonVariant {
+  Primary = 'outlinePrimary',
+  Secondary = 'outlineSecondary',
+  Inverse = 'outlineInverse',
+}
 
 /**
- * @deprecated These type are deprecated along with deprecated_Button component
+ * Dropdown Button
  */
-export enum DeprecatedButtonVariant {
-  Primary = 'deprecatedPrimary',
-  Secondary = 'deprecatedSecondary',
-  Delete = 'deprecatedDelete',
-}
-
-export enum ButtonVariant {
-  Primary = 'primary',
-  Secondary = 'betaSecondary',
-  Delete = 'delete',
-  Highlight = 'highlight',
-  OutlinePrimary = 'outlinePrimary',
-  OutlineSecondary = 'outlineSecondary',
-  OutlineInverse = 'outlineInverse',
+export enum DropdownButtonVariant {
+  Primary = 'dropdownPrimary',
+  Secondary = 'dropdownSecondary',
 }
 
+/**
+ * Icon Button
+ */
 export enum IconButtonVariant {
   Square = 'square',
   SquareFilled = 'squareFilled',
@@ -47,22 +48,47 @@ export enum IconButtonVariant {
 }
 
 /**
- * The different icon positions.
+ * Text Button
  */
-export enum IconPosition {
-  Left = 'iconPositionLeft',
-  Right = 'iconPositionRight',
-}
-
 export enum TextButtonVariant {
   Default = 'text',
   Inverse = 'textInverse',
-  AllCaps = 'textAllCaps',
-  InverseAllCaps = 'textInverseAllCaps',
+}
+
+/**
+ * Old orange buttons
+ * @deprecated These type are deprecated along with deprecated_Button component
+ */
+export enum DeprecatedButtonVariant {
+  Primary = 'deprecatedPrimary',
+  Secondary = 'deprecatedSecondary',
+  Delete = 'deprecatedDelete',
 }
 
 export type AllButtonVariants =
-  | DeprecatedButtonVariant
   | ButtonVariant
+  | DropdownButtonVariant
   | TextButtonVariant
-  | IconButtonVariant;
+  | IconButtonVariant
+  | DeprecatedButtonVariant;
+
+/**
+ * The object used for passing in colors to the ButtonContainer
+ */
+export interface ButtonStateColors {
+  background?: string;
+  border?: string;
+  icon?: string;
+  iconFill?: boolean;
+  label?: string;
+  labelData?: string;
+}
+export interface ButtonColors {
+  default: ButtonStateColors;
+  hover: ButtonStateColors;
+  active: ButtonStateColors;
+  focus: ButtonStateColors & {
+    focusRing?: CSSObject;
+  };
+  disabled: ButtonStateColors;
+}
diff --git a/modules/button/react/lib/utils.ts b/modules/button/react/lib/utils.ts
deleted file mode 100644
index f24a3ffd91..0000000000
--- a/modules/button/react/lib/utils.ts
+++ /dev/null
@@ -1,356 +0,0 @@
-import {CSSObject} from '@emotion/core';
-import {focusRing, mouseFocusBehavior} from '@workday/canvas-kit-react-common';
-import {
-  ButtonSize,
-  DeprecatedButtonVariant,
-  AllButtonVariants,
-  TextButtonVariant,
-  ButtonVariant,
-  IconButtonVariant,
-} from './types';
-import * as ButtonStyles from './ButtonStyles';
-import {ButtonColors} from './ButtonColors';
-
-export function getButtonSize(baseButton: ButtonStyles.ButtonGenericStyle, size?: ButtonSize) {
-  const {sizes} = baseButton.variants!;
-
-  switch (size) {
-    case ButtonSize.Large:
-      return sizes.large;
-    case ButtonSize.Medium:
-    default:
-      return sizes.medium;
-    case ButtonSize.Small:
-      return sizes.small;
-  }
-}
-
-export function getButtonStyle(
-  baseButton: ButtonStyles.ButtonGenericStyle,
-  variant?: AllButtonVariants
-) {
-  const {types} = baseButton.variants!;
-
-  switch (variant) {
-    case DeprecatedButtonVariant.Primary:
-      return types[DeprecatedButtonVariant.Primary];
-    case DeprecatedButtonVariant.Secondary:
-      return types[DeprecatedButtonVariant.Secondary];
-    case DeprecatedButtonVariant.Delete:
-      return types[DeprecatedButtonVariant.Delete];
-    case ButtonVariant.Highlight:
-      return types[ButtonVariant.Highlight];
-    case ButtonVariant.OutlinePrimary:
-      return types[ButtonVariant.OutlinePrimary];
-    case ButtonVariant.OutlineSecondary:
-      return types[ButtonVariant.OutlineSecondary];
-    case ButtonVariant.OutlineInverse:
-      return types[ButtonVariant.OutlineInverse];
-    case ButtonVariant.Primary:
-      return types[ButtonVariant.Primary];
-    case ButtonVariant.Secondary:
-    default:
-      return types[ButtonVariant.Secondary];
-    case ButtonVariant.Delete:
-      return types[ButtonVariant.Delete];
-    case TextButtonVariant.Default:
-      return types[TextButtonVariant.Default];
-    case TextButtonVariant.Inverse:
-      return types[TextButtonVariant.Inverse];
-    case TextButtonVariant.AllCaps:
-      return types[TextButtonVariant.AllCaps];
-    case TextButtonVariant.InverseAllCaps:
-      return types[TextButtonVariant.InverseAllCaps];
-    case IconButtonVariant.Square:
-      return types[IconButtonVariant.Square];
-    case IconButtonVariant.SquareFilled:
-      return types[IconButtonVariant.SquareFilled];
-    case IconButtonVariant.Plain:
-      return types[IconButtonVariant.Plain];
-    case IconButtonVariant.Circle:
-      return types[IconButtonVariant.Circle];
-    case IconButtonVariant.CircleFilled:
-      return types[IconButtonVariant.CircleFilled];
-    case IconButtonVariant.Inverse:
-      return types[IconButtonVariant.Inverse];
-    case IconButtonVariant.InverseFilled:
-      return types[IconButtonVariant.InverseFilled];
-  }
-}
-
-export function getBaseButton(buttonType: DeprecatedButtonVariant | ButtonVariant) {
-  switch (buttonType) {
-    case DeprecatedButtonVariant.Primary:
-    case DeprecatedButtonVariant.Secondary:
-    case DeprecatedButtonVariant.Delete:
-      return ButtonStyles.deprecatedButtonStyles;
-    case ButtonVariant.Primary:
-    case ButtonVariant.Secondary:
-    case ButtonVariant.Delete:
-    case ButtonVariant.Highlight:
-    case ButtonVariant.OutlinePrimary:
-    case ButtonVariant.OutlineSecondary:
-    case ButtonVariant.OutlineInverse:
-    default:
-      return ButtonStyles.canvasButtonStyles;
-  }
-}
-
-export function getButtonFocusRing(variant: AllButtonVariants): CSSObject {
-  const buttonColors = ButtonColors[variant];
-
-  if (buttonColors == null) {
-    return {};
-  }
-
-  switch (variant) {
-    case DeprecatedButtonVariant.Primary:
-    case DeprecatedButtonVariant.Secondary:
-    case TextButtonVariant.Default:
-    case TextButtonVariant.AllCaps:
-      return focusRing(2, 0);
-    case ButtonVariant.OutlineInverse:
-      return focusRing(2, 2, true, false, buttonColors.focusRingInner, buttonColors.focusRingOuter);
-    case IconButtonVariant.Plain:
-      return focusRing(2);
-    case IconButtonVariant.Inverse:
-    case IconButtonVariant.InverseFilled:
-      return focusRing(2, 2, true, false, buttonColors.focusRingInner, buttonColors.focusRingOuter);
-    case TextButtonVariant.Inverse:
-    case TextButtonVariant.InverseAllCaps:
-      return focusRing(2, 0, true, false, buttonColors.focusRingInner, buttonColors.focusRingOuter);
-    default:
-      return focusRing(2, 2);
-  }
-}
-
-export function getButtonStateStyle(variant: AllButtonVariants): CSSObject {
-  const buttonColors = ButtonColors[variant];
-
-  if (buttonColors == null) {
-    return {};
-  }
-
-  const baseStyles = {
-    backgroundColor: buttonColors.background,
-    borderColor: buttonColors.border,
-    color: buttonColors.text,
-    ...(buttonColors.labelIcon && {
-      'span .wd-icon-fill, span .wd-icon-accent': {
-        transition: 'fill 120ms ease-in',
-        fill: buttonColors.labelIcon,
-      },
-    }),
-    ...(buttonColors.labelData && {
-      ['.' + ButtonStyles.labelDataBaseStyles.classname]: {
-        color: buttonColors.labelData,
-      },
-    }),
-  };
-
-  const hoverStyles = {
-    ':hover': {
-      backgroundColor: buttonColors.hoverBackground,
-      borderColor: buttonColors.hoverBorder,
-      color: buttonColors.hoverText,
-      ...(buttonColors.labelDataHover && {
-        ['.' + ButtonStyles.labelDataBaseStyles.classname]: {
-          transition: 'color 120ms ease-in',
-          color: buttonColors.labelDataHover,
-        },
-      }),
-      ...(buttonColors.labelIconHover && {
-        'span .wd-icon-fill, span .wd-icon-accent': {
-          fill: buttonColors.labelIconHover,
-        },
-      }),
-    },
-  };
-
-  const activeStyles = {
-    ':active, :focus:active, :hover:active': {
-      backgroundColor: buttonColors.activeBackground,
-      borderColor: buttonColors.activeBorder,
-      color: buttonColors.activeText,
-      ...(buttonColors.labelDataActive && {
-        ['.' + ButtonStyles.labelDataBaseStyles.classname]: {
-          color: buttonColors.labelDataActive,
-        },
-      }),
-      ...(buttonColors.labelIconActive && {
-        'span .wd-icon-fill, span .wd-icon-accent': {
-          fill: buttonColors.labelIconActive,
-        },
-      }),
-    },
-  };
-
-  return {
-    ...baseStyles,
-    ':focus': {
-      backgroundColor: buttonColors.focusBackground,
-      borderColor: buttonColors.focusBorder,
-      color: buttonColors.focusText,
-      ...(buttonColors.labelDataFocus && {
-        ['.' + ButtonStyles.labelDataBaseStyles.classname]: {
-          color: buttonColors.labelDataFocus,
-        },
-      }),
-      ...(buttonColors.labelIconFocus && {
-        'span .wd-icon-fill, span .wd-icon-accent': {
-          fill: buttonColors.labelIconFocus,
-        },
-      }),
-    },
-
-    ...activeStyles,
-    ...hoverStyles,
-    ':disabled, :active:disabled, :focus:disabled, :hover:disabled': {
-      backgroundColor: buttonColors.disabledBackground,
-      borderColor: buttonColors.disabledBorder,
-      color: buttonColors.disabledText,
-      ...(buttonColors.labelIconDisabled && {
-        'span .wd-icon-fill, span .wd-icon-accent': {
-          fill: buttonColors.labelIconDisabled,
-        },
-      }),
-      ...(buttonColors.labelDataDisabled && {
-        ['.' + ButtonStyles.labelDataBaseStyles.classname]: {
-          color: buttonColors.labelDataDisabled,
-        },
-      }),
-    },
-    '&:not([disabled])': {
-      '&:focus': {
-        borderColor: buttonColors.focusBorder,
-        ...getButtonFocusRing(variant),
-      },
-      '&:active': {
-        borderColor: buttonColors.activeBorder,
-        ...getButtonFocusRing(variant),
-      },
-    },
-    ...mouseFocusBehavior({
-      '&:focus': {
-        ...baseStyles,
-        outline: 'none',
-        boxShadow: 'none',
-        animation: 'none',
-        ...hoverStyles,
-        ...activeStyles,
-      },
-    }),
-  };
-}
-
-export function getIconButtonStateStyle(variant: AllButtonVariants): CSSObject {
-  const buttonColors = ButtonColors[variant];
-
-  if (buttonColors == null) {
-    return {};
-  }
-
-  const baseStyles = {
-    borderColor: buttonColors.border,
-    backgroundColor: buttonColors.background,
-    ...(buttonColors.labelIcon && {
-      'span .wd-icon-fill, span .wd-icon-accent': {
-        transition: 'fill 120ms ease-in',
-        fill: buttonColors.labelIcon,
-      },
-    }),
-    ...(buttonColors.labelData && {
-      ['.' + ButtonStyles.labelDataBaseStyles.classname]: {
-        color: buttonColors.labelData,
-      },
-    }),
-  };
-
-  const hoverStyles = {
-    ':hover': {
-      backgroundColor: buttonColors.hoverBackground,
-      ...(buttonColors.labelIconHover && {
-        'span .wd-icon-fill, span .wd-icon-accent': {
-          fill: buttonColors.labelIconHover,
-        },
-      }),
-    },
-  };
-
-  const activeStyles = {
-    ':active, :focus:active, :hover:active': {
-      backgroundColor: buttonColors.activeBackground,
-      ...(buttonColors.labelIconHover && {
-        'span .wd-icon-fill, span .wd-icon-accent': {
-          fill: buttonColors.labelIconActive,
-        },
-      }),
-    },
-  };
-
-  return {
-    ...baseStyles,
-    ':focus': {
-      backgroundColor: buttonColors.focusBackground,
-      ...(buttonColors.labelDataFocus && {
-        ['.' + ButtonStyles.labelDataBaseStyles.classname]: {
-          color: buttonColors.labelDataFocus,
-        },
-      }),
-      ...(buttonColors.labelIconFocus && {
-        'span .wd-icon-fill, span .wd-icon-accent': {
-          fill: buttonColors.labelIconFocus,
-        },
-      }),
-    },
-    ...hoverStyles,
-    ...activeStyles,
-    ':disabled, :active:disabled, :focus:disabled, :hover:disabled': {
-      pointerEvents: 'none',
-      backgroundColor: buttonColors.disabledBackground,
-      borderColor: buttonColors.disabledBorder,
-      color: buttonColors.disabledText,
-      ...(buttonColors.labelIconDisabled && {
-        'span .wd-icon-fill, span .wd-icon-accent': {
-          fill: buttonColors.labelIconDisabled,
-        },
-      }),
-      ...(buttonColors.labelDataDisabled && {
-        ['.' + ButtonStyles.labelDataBaseStyles.classname]: {
-          color: buttonColors.labelDataDisabled,
-        },
-      }),
-    },
-    '&:not([disabled])': {
-      '&:focus': {
-        background: buttonColors.focusBackground,
-        borderColor: buttonColors.focusBorder,
-        ...getButtonFocusRing(variant),
-      },
-      '&:active': {
-        borderColor: buttonColors.activeBorder,
-        ...getButtonFocusRing(variant),
-      },
-
-      '&:hover:focus': {
-        backgroundColor: buttonColors.focusHover,
-        'span .wd-icon-fill, span .wd-icon-accent': {
-          fill: buttonColors.labelIconFocusHover,
-        },
-      },
-      '&:focus:active': {
-        backgroundColor: buttonColors.activeBackground,
-      },
-    },
-    ...mouseFocusBehavior({
-      '&:focus': {
-        ...baseStyles,
-        outline: 'none',
-        boxShadow: 'none',
-        animation: 'none',
-        ...hoverStyles,
-        ...activeStyles,
-      },
-    }),
-  };
-}
diff --git a/modules/button/react/package.json b/modules/button/react/package.json
index 60942d7ef5..9f40376b68 100644
--- a/modules/button/react/package.json
+++ b/modules/button/react/package.json
@@ -1,7 +1,8 @@
+
 {
-  "name": "@workday/canvas-kit-react-button",
-  "version": "3.4.0",
-  "description": "A canvas-styled react button",
+  "name": "@workday/canvas-kit-labs-react-button",
+  "version": "0.0.0",
+  "description": "A collection of various Canvas Buttons",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
   "main": "dist/commonjs/index.js",
@@ -10,7 +11,7 @@
   "types": "dist/es6/index.d.ts",
   "repository": {
     "type": "git",
-    "url": "http://github.com/Workday/canvas-kit/tree/master/modules/button/react"
+    "url": "https://github.com/Workday/canvas-kit/tree/master/modules/_labs/button/react"
   },
   "files": [
     "dist/",
@@ -19,13 +20,11 @@
   ],
   "scripts": {
     "watch": "yarn build:es6 -w",
-    "test": "echo \"Error: no test specified\" && exit 1",
     "clean": "rimraf dist && rimraf .build-info && mkdirp dist",
-    "build:cjs": "babel --no-babelrc --plugins babel-plugin-transform-es2015-modules-commonjs dist/es6 --out-dir dist/commonjs  --copy-files",
+    "build:cjs": "tsc -p tsconfig.cjs.json",
     "build:es6": "tsc -p tsconfig.es6.json",
-    "build:babel": "babel --no-babelrc --plugins babel-plugin-emotion dist --out-dir dist",
     "build:rebuild": "npm-run-all clean build",
-    "build": "npm-run-all --sequential build:es6 build:babel build:cjs",
+    "build": "npm-run-all --parallel build:cjs build:es6",
     "depcheck": "node ../../../utils/check-dependencies-exist.js"
   },
   "keywords": [
diff --git a/modules/button/react/spec/Button.spec.tsx b/modules/button/react/spec/Button.spec.tsx
new file mode 100644
index 0000000000..5bb29454d7
--- /dev/null
+++ b/modules/button/react/spec/Button.spec.tsx
@@ -0,0 +1,88 @@
+import * as React from 'react';
+import {
+  Button,
+  DeleteButton,
+  DropdownButton,
+  HighlightButton,
+  OutlineButton,
+  TextButton,
+  deprecated_Button as DeprecatedButton,
+} from '../index';
+import {render, fireEvent} from '@testing-library/react';
+
+const map: any = {
+  Button: Button,
+  'Delete Button': DeleteButton,
+  'Dropdown Button': DropdownButton,
+  'Highlight Button': HighlightButton,
+  'Outline Button': OutlineButton,
+  'Text Button': TextButton,
+  'Deprecated Button': DeprecatedButton,
+};
+Object.keys(map).forEach(buttonName => {
+  const ButtonComponent = map[buttonName];
+
+  describe(buttonName, () => {
+    const cb = jest.fn();
+    afterEach(() => {
+      cb.mockReset();
+    });
+
+    describe('when rendered', () => {
+      it('should render a button', () => {
+        const {getByRole} = render(<ButtonComponent />);
+        expect(getByRole('button')).toBeDefined();
+      });
+    });
+
+    describe('when rendered with an id', () => {
+      it('should render a button with id', () => {
+        const id = 'myButton';
+        const {getByRole} = render(<ButtonComponent id={id} />);
+        expect(getByRole('button')).toHaveAttribute('id', id);
+      });
+    });
+
+    describe('when rendered with contents', () => {
+      it('should render a button with contents', () => {
+        const label = 'Button Label';
+        const {getByRole} = render(<ButtonComponent>{label}</ButtonComponent>);
+        expect(getByRole('button')).toContainHTML(label);
+      });
+    });
+
+    describe('when rendered with disabled attribute', () => {
+      it('should render a disabled button', () => {
+        const {getByRole} = render(<ButtonComponent disabled={true} />);
+        expect(getByRole('button')).toHaveProperty('disabled', true);
+      });
+    });
+
+    describe('when rendered with extra, arbitrary props', () => {
+      it('should spread extra props onto the button', () => {
+        const attr = 'test';
+        const {getByRole} = render(<ButtonComponent data-propspread={attr} />);
+        expect(getByRole('button')).toHaveAttribute('data-propspread', attr);
+      });
+    });
+
+    describe('when rendered with a button ref', () => {
+      it('should set the ref to the checkbox input element', () => {
+        const ref = React.createRef<HTMLButtonElement>();
+
+        render(<ButtonComponent buttonRef={ref} />);
+
+        expect(ref.current).not.toBeNull();
+        expect(ref.current!.tagName.toLowerCase()).toEqual('button');
+      });
+    });
+
+    describe('when clicked', () => {
+      it('should call a callback function', () => {
+        const {getByRole} = render(<ButtonComponent onClick={cb} />);
+        fireEvent.click(getByRole('button'));
+        expect(cb).toHaveBeenCalledTimes(1);
+      });
+    });
+  });
+});
diff --git a/modules/button/react/spec/Button_Deprecated.spec.tsx b/modules/button/react/spec/Button_Deprecated.spec.tsx
deleted file mode 100644
index 0e6221a3df..0000000000
--- a/modules/button/react/spec/Button_Deprecated.spec.tsx
+++ /dev/null
@@ -1,200 +0,0 @@
-import * as React from 'react';
-import {deprecated_Button as Button, ButtonProps} from '../lib/Button';
-import {DeprecatedButtonVariant} from '../lib/types';
-import TextButton from '../lib/TextButton';
-import {mount} from 'enzyme';
-import ReactDOMServer from 'react-dom/server';
-import {axe} from 'jest-axe';
-
-describe('Deprecated Button', () => {
-  const cb = jest.fn();
-  afterEach(() => {
-    cb.mockReset();
-  });
-
-  test('render a button with id', () => {
-    const component = mount(<Button id="myBtn">Button Label</Button>);
-    expect(component.find('button').props().id).toBe('myBtn');
-    component.unmount();
-  });
-
-  test('should call a callback function', () => {
-    const component = mount(<Button onClick={cb}>Button Label</Button>);
-    const button = component.find('button');
-    button.simulate('click');
-    expect(cb.mock.calls.length).toBe(1);
-    component.unmount();
-  });
-
-  test('should not call a callback function when disabled', () => {
-    const component = mount(
-      <Button onClick={cb} disabled={true}>
-        Button Label
-      </Button>
-    );
-    const button = component.find('button');
-    button.simulate('click');
-    expect(cb.mock.calls.length).toBe(0);
-    component.unmount();
-  });
-
-  test('Button should spread extra props', () => {
-    const component = mount(<Button data-propspread="test">Button Label</Button>);
-    const container = component.at(0).getDOMNode();
-    expect(container.getAttribute('data-propspread')).toBe('test');
-    component.unmount();
-  });
-});
-
-describe('TextButton', () => {
-  const cb = jest.fn();
-  afterEach(() => {
-    cb.mockReset();
-  });
-
-  test('should call a callback function', () => {
-    const component = mount(<TextButton onClick={cb}>Button Label</TextButton>);
-    const button = component.find('button span');
-    button.simulate('click');
-    expect(cb.mock.calls.length).toBe(1);
-    component.unmount();
-  });
-});
-
-describe('Button Accessibility', () => {
-  const cb = jest.fn();
-  afterEach(() => {
-    cb.mockReset();
-  });
-
-  test('button should be using HTML5 <button> tag', () => {
-    const component = mount(<Button>Button</Button>);
-    expect(component.getDOMNode().tagName.toLowerCase()).toEqual('button');
-    component.unmount();
-  });
-
-  test("button's label should be in a span", () => {
-    const labelText: string = 'Button';
-    const component = mount(<Button>{labelText}</Button>);
-    expect(
-      component
-        .find('button')
-        .find('span')
-        .getDOMNode().innerHTML
-    ).toEqual(labelText);
-    component.unmount();
-  });
-
-  test('enabled button should NOT have disabled attribute set', () => {
-    const component = mount(<Button disabled={false}>Button</Button>);
-    expect(
-      component
-        .find('button')
-        .getDOMNode()
-        .hasAttribute('disabled')
-    ).toEqual(false);
-    component.unmount();
-  });
-
-  test('disabled button should have disabled attribute set', () => {
-    const component = mount(<Button disabled={true}>Button</Button>);
-    expect(
-      component
-        .find('button')
-        .getDOMNode()
-        .hasAttribute('disabled')
-    ).toEqual(true);
-    component.unmount();
-  });
-
-  test('button should pass axe DOM accessibility guidelines', async () => {
-    const html = ReactDOMServer.renderToString(<Button>Button</Button>);
-    expect(await axe(html)).toHaveNoViolations();
-  });
-});
-
-describe('Button Focus', () => {
-  const cb = jest.fn();
-  afterEach(() => {
-    cb.mockReset();
-  });
-
-  // expected usage to manage focus via buttonRef
-  class FocusableButton extends React.Component<ButtonProps<DeprecatedButtonVariant>> {
-    readonly buttonRef: React.RefObject<HTMLButtonElement>;
-
-    constructor(props: ButtonProps<DeprecatedButtonVariant>) {
-      super(props);
-      this.buttonRef = React.createRef<HTMLButtonElement>();
-    }
-
-    // focus on button in componentDidMount for purposes of tests
-    componentDidMount() {
-      if (!this.props.disabled && this.buttonRef && this.buttonRef.current) {
-        this.buttonRef.current.focus();
-      }
-    }
-
-    render() {
-      return (
-        <Button variant={Button.Variant.Primary} buttonRef={this.buttonRef} {...this.props}>
-          {this.props.children}
-        </Button>
-      );
-    }
-  }
-
-  // expected usage to manage focus via buttonRef cb
-  class FocusableButtonCB extends React.Component<ButtonProps<DeprecatedButtonVariant>> {
-    private buttonElement: HTMLButtonElement;
-
-    // focus on button in componentDidMount for purposes of tests
-    componentDidMount() {
-      if (!this.props.disabled && this.buttonElement) {
-        this.buttonElement.focus();
-      }
-    }
-
-    render() {
-      return (
-        <Button
-          variant={Button.Variant.Primary}
-          buttonRef={(buttonElement: HTMLButtonElement) => {
-            this.buttonElement = buttonElement;
-          }}
-          {...this.props}
-        >
-          {this.props.children}
-        </Button>
-      );
-    }
-  }
-
-  test('button should not allow focus when disabled via buttonRef cb', () => {
-    const component = mount(<FocusableButtonCB disabled={true}>Button</FocusableButtonCB>);
-    const activeElement = document.activeElement;
-    const buttonWrapper = component.find('button');
-    expect(buttonWrapper.getDOMNode()).not.toEqual(activeElement);
-  });
-
-  test('button should allow focus via buttonRef cb', () => {
-    const component = mount(<FocusableButtonCB>Button</FocusableButtonCB>);
-    const activeElement = document.activeElement;
-    const buttonWrapper = component.find('button');
-    expect(buttonWrapper.getDOMNode()).toEqual(activeElement);
-  });
-
-  test('button should not allow focus when disabled via buttonRef', () => {
-    const component = mount(<FocusableButton disabled={true}>Button</FocusableButton>);
-    const activeElement = document.activeElement;
-    const buttonWrapper = component.find('button');
-    expect(buttonWrapper.getDOMNode()).not.toEqual(activeElement);
-  });
-
-  test('button should allow focus via buttonRef', () => {
-    const component = mount(<FocusableButton>Button</FocusableButton>);
-    const activeElement = document.activeElement;
-    const buttonWrapper = component.find('button');
-    expect(buttonWrapper.getDOMNode()).toEqual(activeElement);
-  });
-});
diff --git a/modules/button/react/spec/IconButton.spec.tsx b/modules/button/react/spec/IconButton.spec.tsx
index 534b988559..c0379741d8 100644
--- a/modules/button/react/spec/IconButton.spec.tsx
+++ b/modules/button/react/spec/IconButton.spec.tsx
@@ -1,11 +1,7 @@
 import * as React from 'react';
-import {mount} from 'enzyme';
-import {render} from '@testing-library/react';
-import IconButton, {iconButtonIdentifier} from '../lib/IconButton';
-import {SystemIcon} from '@workday/canvas-kit-react-icon';
+import {IconButton} from '../index';
 import {activityStreamIcon} from '@workday/canvas-system-icons-web';
-import ReactDOMServer from 'react-dom/server';
-import {axe} from 'jest-axe';
+import {render, fireEvent} from '@testing-library/react';
 
 describe('Icon Button', () => {
   const cb = jest.fn();
@@ -13,130 +9,89 @@ describe('Icon Button', () => {
     cb.mockReset();
   });
 
-  test('render an icon button with id', () => {
-    const component = mount(
-      <IconButton id="myBtn" aria-label="Activity Stream">
-        <SystemIcon icon={activityStreamIcon} />
-      </IconButton>
-    );
-    expect(component.find('button').props().id).toBe('myBtn');
-    component.unmount();
+  describe('when rendered', () => {
+    it('should render a button', () => {
+      const {getByRole} = render(
+        <IconButton aria-label="Activity Stream" icon={activityStreamIcon} />
+      );
+      expect(getByRole('button')).toBeDefined();
+    });
   });
 
-  it('should have an identifier class', () => {
-    const {getByRole} = render(
-      <IconButton aria-label="Activity Stream">
-        <SystemIcon icon={activityStreamIcon} />
-      </IconButton>
-    );
-
-    expect(getByRole('button').className).toContain(iconButtonIdentifier);
-  });
-  it('should compose custom classNames with the identifier class', () => {
-    const testClassName = 'test classname';
-    const {getByRole} = render(
-      <IconButton className={testClassName} aria-label="Activity Stream">
-        <SystemIcon icon={activityStreamIcon} />
-      </IconButton>
-    );
-
-    expect(getByRole('button').className).toContain(`${iconButtonIdentifier} ${testClassName}`);
+  describe('when rendered with an id', () => {
+    it('should render a button with id', () => {
+      const id = 'myButton';
+      const {getByRole} = render(
+        <IconButton aria-label="Activity Stream" icon={activityStreamIcon} id={id} />
+      );
+      expect(getByRole('button')).toHaveAttribute('id', id);
+    });
   });
 
-  test('should call a callback function', () => {
-    const component = mount(
-      <IconButton onClick={cb} aria-label="Activity Stream">
-        <SystemIcon icon={activityStreamIcon} />
-      </IconButton>
-    );
-    const button = component.find('button');
-    button.simulate('click');
-    expect(cb.mock.calls.length).toBe(1);
-    component.unmount();
+  describe('when rendered with disabled attribute', () => {
+    it('should render a disabled button', () => {
+      const {getByRole} = render(
+        <IconButton aria-label="Activity Stream" icon={activityStreamIcon} disabled={true} />
+      );
+      expect(getByRole('button')).toHaveProperty('disabled', true);
+    });
   });
 
-  test('should not call a callback function when disabled', () => {
-    const component = mount(
-      <IconButton onClick={cb} disabled={true} aria-label="Activity Stream">
-        <SystemIcon icon={activityStreamIcon} />
-      </IconButton>
-    );
-    const button = component.find('button');
-    button.simulate('click');
-    expect(cb.mock.calls.length).toBe(0);
-    component.unmount();
+  describe('when rendered with extra, arbitrary props', () => {
+    it('should spread extra props onto the button', () => {
+      const attr = 'test';
+      const {getByRole} = render(
+        <IconButton aria-label="Activity Stream" icon={activityStreamIcon} data-propspread={attr} />
+      );
+      expect(getByRole('button')).toHaveAttribute('data-propspread', attr);
+    });
   });
 
-  test('should call onToggleChange when toggle prop changes', () => {
-    const wrapper = mount(
-      <IconButton toggled={false} onToggleChange={cb} aria-label="Activity Stream">
-        <SystemIcon icon={activityStreamIcon} />
-      </IconButton>
-    );
+  describe('when rendered with a button ref', () => {
+    it('should set the ref to the checkbox input element', () => {
+      const ref = React.createRef<HTMLButtonElement>();
 
-    wrapper.setProps({toggled: true});
-    wrapper.update();
-    wrapper.setProps({toggled: true});
-    wrapper.update();
-    wrapper.setProps({toggled: undefined});
-    wrapper.update();
+      render(<IconButton aria-label="Activity Stream" icon={activityStreamIcon} buttonRef={ref} />);
 
-    expect(cb.mock.calls.length).toBe(2);
+      expect(ref.current).not.toBeNull();
+      expect(ref.current!.tagName.toLowerCase()).toEqual('button');
+    });
   });
-});
 
-describe('Icon Button Accessibility', () => {
-  const cb = jest.fn();
-  afterEach(() => {
-    cb.mockReset();
+  describe('when clicked', () => {
+    it('should call a callback function', () => {
+      const {getByRole} = render(
+        <IconButton aria-label="Activity Stream" icon={activityStreamIcon} onClick={cb} />
+      );
+      fireEvent.click(getByRole('button'));
+      expect(cb).toHaveBeenCalledTimes(1);
+    });
   });
 
-  test('icon button should be using HTML5 <button> tag', () => {
-    const component = mount(
-      <IconButton aria-label="Activity Stream">
-        <SystemIcon icon={activityStreamIcon} />{' '}
-      </IconButton>
-    );
-    expect(component.getDOMNode().tagName.toLowerCase()).toEqual('button');
-    component.unmount();
-  });
+  describe('when toggled', () => {
+    test('should call onToggleChange when toggle prop changes', () => {
+      const {getByRole, rerender} = render(
+        <IconButton
+          aria-label="Activity Stream"
+          icon={activityStreamIcon}
+          toggled={false}
+          onToggleChange={cb}
+        />
+      );
 
-  test('enabled icon button should NOT have disabled attribute set', () => {
-    const component = mount(
-      <IconButton disabled={false} aria-label="Activity Stream">
-        <SystemIcon icon={activityStreamIcon} />{' '}
-      </IconButton>
-    );
-    expect(
-      component
-        .find('button')
-        .getDOMNode()
-        .hasAttribute('disabled')
-    ).toEqual(false);
-    component.unmount();
-  });
-
-  test('disabled icon button should have disabled attribute set', () => {
-    const component = mount(
-      <IconButton disabled={true} aria-label="Activity Stream">
-        <SystemIcon icon={activityStreamIcon} />{' '}
-      </IconButton>
-    );
-    expect(
-      component
-        .find('button')
-        .getDOMNode()
-        .hasAttribute('disabled')
-    ).toEqual(true);
-    component.unmount();
-  });
+      expect(getByRole('button')).toHaveAttribute('aria-pressed', 'false');
+      rerender(
+        <IconButton
+          aria-label="Activity Stream"
+          icon={activityStreamIcon}
+          toggled={true}
+          onToggleChange={cb}
+        />
+      );
 
-  test('IconButton should pass axe DOM accessibility guidelines', async () => {
-    const html = ReactDOMServer.renderToString(
-      <IconButton title="Activity Stream" aria-label="Activity Stream">
-        <SystemIcon icon={activityStreamIcon} />{' '}
-      </IconButton>
-    );
-    expect(await axe(html)).toHaveNoViolations();
+      expect(getByRole('button')).toHaveAttribute('aria-pressed', 'true');
+      expect(cb).toHaveBeenCalledTimes(1);
+      expect(cb).toHaveBeenCalledWith(true);
+    });
   });
 });
diff --git a/modules/button/react/spec/IconButtonToggleGroup.spec.tsx b/modules/button/react/spec/IconButtonToggleGroup.spec.tsx
deleted file mode 100644
index bd0f097426..0000000000
--- a/modules/button/react/spec/IconButtonToggleGroup.spec.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import * as React from 'react';
-import {mount} from 'enzyme';
-import IconButton from '../lib/IconButton';
-import IconButtonToggleGroup from '../lib/IconButtonToggleGroup';
-import {
-  listViewIcon,
-  worksheetsIcon,
-  deviceTabletIcon,
-  percentageIcon,
-} from '@workday/canvas-system-icons-web';
-
-describe('Icon Button Toggle', () => {
-  const cb = jest.fn();
-  afterEach(() => {
-    cb.mockReset();
-  });
-
-  test('renders two buttons as expected', () => {
-    const component = mount(
-      <IconButtonToggleGroup>
-        <IconButton icon={listViewIcon} value="list-view" aria-label="List View" onClick={cb} />
-        <IconButton icon={worksheetsIcon} value="table-view" aria-label="Table View" />
-      </IconButtonToggleGroup>
-    );
-    expect(component.find('button').length).toEqual(2);
-
-    component
-      .find('button')
-      .at(0)
-      .simulate('click');
-
-    expect(cb.mock.calls.length).toBe(1);
-  });
-
-  test('renders two buttons with disabled button', () => {
-    const component = mount(
-      <IconButtonToggleGroup onChange={cb}>
-        <IconButton icon={listViewIcon} value="list-view" aria-label="List View" disabled={true} />
-        <IconButton icon={worksheetsIcon} value="table-view" aria-label="Table View" />
-        <span /> {/* ensure random elements don't break anything */}
-      </IconButtonToggleGroup>
-    );
-
-    // clicking on a disabled button shouldn't trigger callback
-    component
-      .find('button')
-      .at(0)
-      .simulate('click');
-
-    expect(cb.mock.calls.length).toBe(0);
-
-    // clicking on an active button should trigger callback
-    component
-      .find('button')
-      .at(1)
-      .simulate('click');
-
-    expect(cb.mock.calls.length).toBe(1);
-    expect(cb.mock.calls[0][0]).toBe('table-view');
-  });
-
-  test('renders correctly when RTL is true', () => {
-    const component = mount(
-      <IconButtonToggleGroup isRTL={true}>
-        <IconButton icon={listViewIcon} value="list-view" aria-label="List View" />
-        <IconButton icon={worksheetsIcon} value="table-view" aria-label="Table View" />
-        <IconButton icon={deviceTabletIcon} value="device-view" aria-label="Device View" />
-        <IconButton icon={percentageIcon} value="percent-view" aria-label="Percent View" />
-      </IconButtonToggleGroup>
-    );
-
-    expect(component.find('button').length).toEqual(4);
-
-    expect(
-      component
-        .find('button')
-        .at(0)
-        .prop('value')
-    ).toEqual('percent-view');
-  });
-
-  test('behavior when no values are used', () => {
-    const component = mount(
-      <IconButtonToggleGroup onChange={cb}>
-        <IconButton icon={listViewIcon} aria-label="List View" />
-        <IconButton icon={worksheetsIcon} aria-label="Table View" />
-      </IconButtonToggleGroup>
-    );
-
-    component
-      .find('button')
-      .at(1)
-      .simulate('click');
-
-    expect(cb.mock.calls.length).toBe(1);
-    expect(cb.mock.calls[0][0]).toBe(1);
-  });
-});
diff --git a/modules/button/react/stories/stories.tsx b/modules/button/react/stories/stories.tsx
deleted file mode 100644
index 488108ce17..0000000000
--- a/modules/button/react/stories/stories.tsx
+++ /dev/null
@@ -1,610 +0,0 @@
-/// <reference path="../../../../typings.d.ts" />
-/** @jsx jsx */
-import {jsx, CSSObject} from '@emotion/core';
-import {storiesOf} from '@storybook/react';
-import withReadme from 'storybook-readme/with-readme';
-
-import {
-  editIcon,
-  playCircleIcon,
-  arrowRightIcon,
-  activityStreamIcon,
-} from '@workday/canvas-system-icons-web';
-
-import {Button, DropdownButton, TextButton} from '../index';
-import README from '../README.md';
-
-const blueBackground: CSSObject = {
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  flexWrap: 'wrap',
-  backgroundColor: '#0875e1',
-  margin: '0 10px',
-  padding: '12px',
-  maxWidth: 'max-content',
-  borderRadius: '3px',
-  button: {
-    margin: '12px',
-  },
-};
-
-const buttonContainer = {
-  display: 'flex',
-  alignItems: 'center',
-  '& button + button': {
-    marginLeft: 10,
-  },
-};
-
-storiesOf('Components|Buttons/Button/React', module)
-  .addParameters({component: Button})
-  .addDecorator(withReadme(README))
-  .add('Primary', () => (
-    <div className="story">
-      <h3>Large Primary</h3>
-      <Button size={Button.Size.Large} variant={Button.Variant.Primary}>
-        Primary
-      </Button>
-      <Button size={Button.Size.Large} variant={Button.Variant.Primary} icon={activityStreamIcon}>
-        Primary
-      </Button>
-      <Button
-        size={Button.Size.Large}
-        variant={Button.Variant.Primary}
-        icon={playCircleIcon}
-        dataLabel={'1:00'}
-      >
-        Primary
-      </Button>
-      <Button
-        disabled={true}
-        size={Button.Size.Large}
-        variant={Button.Variant.Primary}
-        icon={playCircleIcon}
-        dataLabel={'1:00'}
-      >
-        Primary
-      </Button>
-      <h3>Medium Primary</h3>
-      <Button size={Button.Size.Medium} variant={Button.Variant.Primary}>
-        Primary
-      </Button>
-      <Button size={Button.Size.Medium} variant={Button.Variant.Primary} icon={editIcon}>
-        Primary
-      </Button>
-      <Button
-        size={Button.Size.Medium}
-        variant={Button.Variant.Primary}
-        icon={playCircleIcon}
-        dataLabel={'1:00'}
-      >
-        Primary
-      </Button>
-      <Button
-        disabled={true}
-        size={Button.Size.Medium}
-        variant={Button.Variant.Primary}
-        icon={playCircleIcon}
-        dataLabel={'1:00'}
-      >
-        Primary
-      </Button>
-      <h3>Small Primary</h3>
-      <Button size={Button.Size.Small} variant={Button.Variant.Primary}>
-        Primary
-      </Button>
-      <Button disabled={true} size={Button.Size.Small} variant={Button.Variant.Primary}>
-        Primary
-      </Button>
-      <h3>Growing Primary</h3>
-      <div css={buttonContainer}>
-        <Button size={Button.Size.Large} variant={Button.Variant.Primary} grow={true}>
-          Primary
-        </Button>
-      </div>
-    </div>
-  ))
-  .add('Secondary', () => (
-    <div className="story">
-      <h3>Large Secondary</h3>
-      <Button size={Button.Size.Large} variant={Button.Variant.Secondary}>
-        Secondary
-      </Button>
-      <Button size={Button.Size.Large} variant={Button.Variant.Secondary} icon={activityStreamIcon}>
-        Secondary
-      </Button>
-      <Button
-        size={Button.Size.Large}
-        variant={Button.Variant.Secondary}
-        icon={playCircleIcon}
-        dataLabel={'1:00'}
-      >
-        Secondary
-      </Button>
-      <Button
-        disabled={true}
-        size={Button.Size.Large}
-        variant={Button.Variant.Secondary}
-        icon={playCircleIcon}
-        dataLabel={'1:00'}
-      >
-        Secondary
-      </Button>
-      <h3>Medium Secondary</h3>
-      <Button size={Button.Size.Medium} variant={Button.Variant.Secondary}>
-        Secondary
-      </Button>
-      <Button size={Button.Size.Medium} variant={Button.Variant.Secondary} icon={editIcon}>
-        Secondary
-      </Button>
-      <Button
-        size={Button.Size.Medium}
-        variant={Button.Variant.Secondary}
-        icon={playCircleIcon}
-        dataLabel={'1:00'}
-      >
-        Secondary
-      </Button>
-      <Button
-        disabled={true}
-        size={Button.Size.Medium}
-        variant={Button.Variant.Secondary}
-        icon={playCircleIcon}
-        dataLabel={'1:00'}
-      >
-        Secondary
-      </Button>
-      <h3>Small Secondary</h3>
-      <Button size={Button.Size.Small} variant={Button.Variant.Secondary}>
-        Secondary
-      </Button>
-      <Button disabled={true} size={Button.Size.Small} variant={Button.Variant.Secondary}>
-        Secondary
-      </Button>
-      <h3>Growing Secondary</h3>
-      <Button size={Button.Size.Large} variant={Button.Variant.Secondary} grow={true}>
-        Growing Secondary
-      </Button>
-    </div>
-  ))
-  .add('Delete', () => (
-    <div className="story">
-      <h3>Large Delete</h3>
-      <Button size={Button.Size.Large} variant={Button.Variant.Delete}>
-        Delete
-      </Button>
-      <Button disabled={true} size={Button.Size.Large} variant={Button.Variant.Delete}>
-        Delete
-      </Button>
-      <h3>Medium Delete</h3>
-      <Button size={Button.Size.Medium} variant={Button.Variant.Delete}>
-        Delete
-      </Button>
-      <Button disabled={true} size={Button.Size.Medium} variant={Button.Variant.Delete}>
-        Delete
-      </Button>
-      <h3>Small Delete</h3>
-      <Button size={Button.Size.Small} variant={Button.Variant.Delete}>
-        Delete
-      </Button>
-      <Button disabled={true} size={Button.Size.Small} variant={Button.Variant.Delete}>
-        Delete
-      </Button>
-    </div>
-  ))
-  .add('Highlight', () => (
-    <div className="story">
-      <h3>Large Highlight</h3>
-      <Button variant={Button.Variant.Highlight} icon={activityStreamIcon}>
-        Highlight
-      </Button>
-      <Button variant={Button.Variant.Highlight} icon={playCircleIcon} dataLabel={'2:00'}>
-        Highlight
-      </Button>
-      <Button
-        disabled={true}
-        variant={Button.Variant.Highlight}
-        icon={playCircleIcon}
-        dataLabel={'2:00'}
-      >
-        Highlight
-      </Button>
-      <h3>Medium Highlight</h3>
-      <Button size={Button.Size.Medium} variant={Button.Variant.Highlight} icon={playCircleIcon}>
-        Highlight
-      </Button>
-      <Button
-        size={Button.Size.Medium}
-        variant={Button.Variant.Highlight}
-        icon={playCircleIcon}
-        dataLabel={'1:00'}
-      >
-        Highlight
-      </Button>
-      <Button
-        disabled={true}
-        size={Button.Size.Medium}
-        variant={Button.Variant.Highlight}
-        icon={playCircleIcon}
-        dataLabel={'1:00'}
-      >
-        Highlight
-      </Button>
-      <h3>Growing</h3>
-      <div css={buttonContainer}>
-        <Button variant={Button.Variant.Highlight} icon={activityStreamIcon} grow={true}>
-          Highlight
-        </Button>
-        <Button
-          variant={Button.Variant.Highlight}
-          icon={playCircleIcon}
-          dataLabel={'2:00'}
-          grow={true}
-        >
-          Highlight
-        </Button>
-      </div>
-    </div>
-  ));
-
-storiesOf('Components|Buttons/Button/React/Text', module)
-  .addParameters({component: TextButton})
-  .addDecorator(withReadme(README))
-  .add('Default', () => (
-    <div className="story">
-      <h3>Large</h3>
-      <TextButton size={TextButton.Size.Large} variant={TextButton.Variant.Default}>
-        Text
-      </TextButton>
-      <TextButton disabled={true} size={TextButton.Size.Large} variant={TextButton.Variant.Default}>
-        Text
-      </TextButton>
-      <h3>Small</h3>
-      <TextButton size={TextButton.Size.Small} variant={TextButton.Variant.Default}>
-        Text
-      </TextButton>
-      <TextButton disabled={true} size={TextButton.Size.Small} variant={TextButton.Variant.Default}>
-        Text
-      </TextButton>
-      <h3>All Caps</h3>
-      <TextButton variant={TextButton.Variant.AllCaps}>All Caps</TextButton>
-      <h3>Icons</h3>
-      <div css={buttonContainer}>
-        <TextButton
-          icon={editIcon}
-          iconPosition={TextButton.IconPosition.Left}
-          variant={TextButton.Variant.Default}
-        >
-          Left Icon Large
-        </TextButton>
-        <TextButton
-          icon={arrowRightIcon}
-          iconPosition={TextButton.IconPosition.Right}
-          variant={TextButton.Variant.Default}
-        >
-          Right Icon Large
-        </TextButton>
-      </div>
-    </div>
-  ))
-  .add('Inverse', () => (
-    <div className="story">
-      <h3>Large Inverse</h3>
-      <div css={blueBackground}>
-        <TextButton size={TextButton.Size.Large} variant={TextButton.Variant.Inverse}>
-          Text
-        </TextButton>
-        <TextButton
-          disabled={true}
-          size={TextButton.Size.Large}
-          variant={TextButton.Variant.Inverse}
-        >
-          Text
-        </TextButton>
-      </div>
-      <h3>Small Inverse</h3>
-      <div css={blueBackground}>
-        <TextButton size={TextButton.Size.Small} variant={TextButton.Variant.Inverse}>
-          Text
-        </TextButton>
-        <TextButton
-          disabled={true}
-          size={TextButton.Size.Small}
-          variant={TextButton.Variant.Inverse}
-        >
-          Text
-        </TextButton>
-      </div>
-      <h3>All Caps Inverse</h3>
-      <div css={blueBackground}>
-        <TextButton variant={TextButton.Variant.InverseAllCaps}>All Caps</TextButton>
-      </div>
-      <h3>Icons Inverse</h3>
-      <div css={{...buttonContainer, ...blueBackground}}>
-        <TextButton
-          icon={editIcon}
-          iconPosition={TextButton.IconPosition.Left}
-          variant={TextButton.Variant.Inverse}
-        >
-          Left Icon Large
-        </TextButton>
-        <TextButton
-          icon={arrowRightIcon}
-          iconPosition={TextButton.IconPosition.Right}
-          variant={TextButton.Variant.Inverse}
-        >
-          Right Icon Large
-        </TextButton>
-      </div>
-    </div>
-  ));
-
-storiesOf('Components|Buttons/Button/React/Outline', module)
-  .addParameters({component: Button})
-  .addDecorator(withReadme(README))
-  .add('Primary', () => (
-    <div className="story">
-      <h3>Large Primary</h3>
-      <Button size={Button.Size.Large} variant={Button.Variant.OutlinePrimary}>
-        Outline Primary
-      </Button>
-      <Button
-        size={Button.Size.Large}
-        variant={Button.Variant.OutlinePrimary}
-        icon={activityStreamIcon}
-      >
-        Outline Primary
-      </Button>
-      <Button
-        size={Button.Size.Large}
-        dataLabel={'1:00'}
-        variant={Button.Variant.OutlinePrimary}
-        icon={playCircleIcon}
-      >
-        Outline Primary
-      </Button>
-      <Button
-        size={Button.Size.Large}
-        disabled={true}
-        dataLabel={'1:00'}
-        variant={Button.Variant.OutlinePrimary}
-        icon={playCircleIcon}
-      >
-        Outline Primary
-      </Button>
-      <h3>Medium Primary</h3>
-      <Button size={Button.Size.Medium} variant={Button.Variant.OutlinePrimary}>
-        Outline Primary
-      </Button>
-      <Button size={Button.Size.Medium} variant={Button.Variant.OutlinePrimary} icon={editIcon}>
-        Outline Primary
-      </Button>
-      <Button
-        size={Button.Size.Medium}
-        dataLabel={'1:00'}
-        variant={Button.Variant.OutlinePrimary}
-        icon={playCircleIcon}
-      >
-        Outline Primary
-      </Button>
-      <Button
-        size={Button.Size.Medium}
-        disabled={true}
-        dataLabel={'1:00'}
-        variant={Button.Variant.OutlinePrimary}
-        icon={playCircleIcon}
-      >
-        Outline Primary
-      </Button>
-      <h3>Small Primary</h3>
-      <Button size={Button.Size.Small} variant={Button.Variant.OutlinePrimary}>
-        Outline Primary
-      </Button>
-      <Button size={Button.Size.Small} disabled={true} variant={Button.Variant.OutlinePrimary}>
-        Outline Primary
-      </Button>
-      <h3>Growing Primary</h3>
-      <Button size={Button.Size.Large} variant={Button.Variant.OutlinePrimary} grow={true}>
-        Growing Primary Outline
-      </Button>
-    </div>
-  ))
-  .add('Secondary', () => (
-    <div className="story">
-      <h3>Large Secondary</h3>
-      <Button size={Button.Size.Large} variant={Button.Variant.OutlineSecondary}>
-        Outline Secondary
-      </Button>
-      <Button
-        size={Button.Size.Large}
-        variant={Button.Variant.OutlineSecondary}
-        icon={activityStreamIcon}
-      >
-        Outline Secondary
-      </Button>
-      <Button
-        size={Button.Size.Large}
-        dataLabel={'1:00'}
-        variant={Button.Variant.OutlineSecondary}
-        icon={playCircleIcon}
-      >
-        Outline Secondary
-      </Button>
-      <Button
-        size={Button.Size.Large}
-        disabled={true}
-        dataLabel={'1:00'}
-        variant={Button.Variant.OutlineSecondary}
-        icon={playCircleIcon}
-      >
-        Outline Secondary
-      </Button>
-      <h3>Medium Secondary</h3>
-      <Button size={Button.Size.Medium} variant={Button.Variant.OutlineSecondary}>
-        Outline Secondary
-      </Button>
-      <Button size={Button.Size.Medium} variant={Button.Variant.OutlineSecondary} icon={editIcon}>
-        Outline Secondary
-      </Button>
-      <Button
-        size={Button.Size.Medium}
-        dataLabel={'1:00'}
-        variant={Button.Variant.OutlineSecondary}
-        icon={playCircleIcon}
-      >
-        Outline Secondary
-      </Button>
-      <Button
-        size={Button.Size.Medium}
-        disabled={true}
-        dataLabel={'1:00'}
-        variant={Button.Variant.OutlineSecondary}
-        icon={playCircleIcon}
-      >
-        Outline Secondary
-      </Button>
-      <h3>Small Secondary</h3>
-      <Button size={Button.Size.Small} variant={Button.Variant.OutlineSecondary}>
-        Outline Secondary
-      </Button>
-      <Button size={Button.Size.Small} disabled={true} variant={Button.Variant.OutlineSecondary}>
-        Outline Secondary
-      </Button>
-      <h3>Growing Secondary</h3>
-      <Button size={Button.Size.Large} variant={Button.Variant.OutlineSecondary} grow={true}>
-        Growing Secondary Outline
-      </Button>
-    </div>
-  ))
-  .add('Inverse', () => (
-    <div className="story">
-      <h3>Large Inverse</h3>
-      <div css={blueBackground}>
-        <Button size={Button.Size.Large} variant={Button.Variant.OutlineInverse}>
-          Outline Inverse
-        </Button>
-        <Button
-          size={Button.Size.Large}
-          variant={Button.Variant.OutlineInverse}
-          icon={activityStreamIcon}
-        >
-          Outline Inverse
-        </Button>
-        <Button
-          size={Button.Size.Large}
-          dataLabel={'1:00'}
-          variant={Button.Variant.OutlineInverse}
-          icon={playCircleIcon}
-        >
-          Outline Inverse
-        </Button>
-        <Button
-          size={Button.Size.Large}
-          disabled={true}
-          dataLabel={'1:00'}
-          variant={Button.Variant.OutlineInverse}
-          icon={playCircleIcon}
-        >
-          Outline Inverse
-        </Button>
-      </div>
-      <h3>Medium Inverse</h3>
-      <div css={blueBackground}>
-        <Button size={Button.Size.Medium} variant={Button.Variant.OutlineInverse}>
-          Outline Inverse
-        </Button>
-        <Button size={Button.Size.Medium} variant={Button.Variant.OutlineInverse} icon={editIcon}>
-          Outline Inverse
-        </Button>
-        <Button
-          size={Button.Size.Medium}
-          dataLabel={'1:00'}
-          variant={Button.Variant.OutlineInverse}
-          icon={playCircleIcon}
-        >
-          Outline Inverse
-        </Button>
-        <Button
-          size={Button.Size.Medium}
-          disabled={true}
-          dataLabel={'1:00'}
-          variant={Button.Variant.OutlineInverse}
-          icon={playCircleIcon}
-        >
-          Outline Inverse
-        </Button>
-      </div>
-      <h3>Small Inverse</h3>
-      <div css={blueBackground}>
-        <Button size={Button.Size.Small} variant={Button.Variant.OutlineInverse}>
-          Outline Inverse
-        </Button>
-        <Button size={Button.Size.Small} disabled={true} variant={Button.Variant.OutlineInverse}>
-          Outline Inverse
-        </Button>
-      </div>
-      <h3>Growing Inverse</h3>
-      <div css={blueBackground} style={{maxWidth: 'initial'}}>
-        <Button size={Button.Size.Large} variant={Button.Variant.OutlineInverse} grow={true}>
-          Growing Inverse Outline
-        </Button>
-      </div>
-    </div>
-  ));
-
-storiesOf('Components|Buttons/Button/React/Dropdown', module)
-  .addParameters({component: DropdownButton})
-  .addDecorator(withReadme(README))
-  .add('Primary', () => (
-    <div className="story">
-      <h3>Large Primary</h3>
-      <DropdownButton size={DropdownButton.Size.Large} variant={DropdownButton.Variant.Primary}>
-        Dropdown Button
-      </DropdownButton>
-      <DropdownButton
-        disabled={true}
-        size={DropdownButton.Size.Large}
-        variant={DropdownButton.Variant.Primary}
-      >
-        Dropdown Button
-      </DropdownButton>
-      <h3>Medium Primary</h3>
-      <DropdownButton size={DropdownButton.Size.Medium} variant={DropdownButton.Variant.Primary}>
-        Dropdown Button
-      </DropdownButton>
-      <DropdownButton
-        disabled={true}
-        size={DropdownButton.Size.Medium}
-        variant={DropdownButton.Variant.Primary}
-      >
-        Dropdown Button
-      </DropdownButton>
-    </div>
-  ))
-  .add('Secondary', () => (
-    <div className="story">
-      <h3>Large Secondary</h3>
-      <DropdownButton size={DropdownButton.Size.Large} variant={DropdownButton.Variant.Secondary}>
-        Dropdown Button
-      </DropdownButton>
-      <DropdownButton
-        disabled={true}
-        size={DropdownButton.Size.Large}
-        variant={DropdownButton.Variant.Secondary}
-      >
-        Dropdown Button
-      </DropdownButton>
-      <h3>Medium Secondary</h3>
-      <DropdownButton size={DropdownButton.Size.Medium} variant={DropdownButton.Variant.Secondary}>
-        Dropdown Button
-      </DropdownButton>
-      <DropdownButton
-        disabled={true}
-        size={DropdownButton.Size.Medium}
-        variant={DropdownButton.Variant.Secondary}
-      >
-        Dropdown Button
-      </DropdownButton>
-    </div>
-  ));
diff --git a/modules/button/react/stories/stories_Button.tsx b/modules/button/react/stories/stories_Button.tsx
new file mode 100644
index 0000000000..5b42b7c605
--- /dev/null
+++ b/modules/button/react/stories/stories_Button.tsx
@@ -0,0 +1,156 @@
+/// <reference path="../../../../typings.d.ts" />
+/** @jsx jsx */
+import {jsx} from '@emotion/core';
+import {storiesOf} from '@storybook/react';
+import withReadme from 'storybook-readme/with-readme';
+
+import {editIcon, playCircleIcon, activityStreamIcon} from '@workday/canvas-system-icons-web';
+
+import {Button} from '../index';
+import README from '../README.md';
+
+const buttonContainer = {
+  display: 'flex',
+  alignItems: 'center',
+  '& button + button': {
+    marginLeft: 10,
+  },
+};
+
+storiesOf('Components|Buttons/Button/React/Standard', module)
+  .addParameters({component: Button})
+  .addDecorator(withReadme(README))
+  .add('Primary', () => (
+    <div className="story">
+      <h3>Large Primary</h3>
+      <Button size="large" variant={Button.Variant.Primary}>
+        Primary
+      </Button>
+      <Button size="large" variant={Button.Variant.Primary} icon={activityStreamIcon}>
+        Primary
+      </Button>
+      <Button
+        size="large"
+        variant={Button.Variant.Primary}
+        icon={playCircleIcon}
+        dataLabel={'1:00'}
+      >
+        Primary
+      </Button>
+      <Button
+        disabled={true}
+        size="large"
+        variant={Button.Variant.Primary}
+        icon={playCircleIcon}
+        dataLabel={'1:00'}
+      >
+        Primary
+      </Button>
+
+      <h3>Medium Primary</h3>
+      <Button size="medium" variant={Button.Variant.Primary}>
+        Primary
+      </Button>
+      <Button size="medium" variant={Button.Variant.Primary} icon={editIcon}>
+        Primary
+      </Button>
+      <Button
+        size="medium"
+        variant={Button.Variant.Primary}
+        icon={playCircleIcon}
+        dataLabel={'1:00'}
+      >
+        Primary
+      </Button>
+      <Button
+        disabled={true}
+        size="medium"
+        variant={Button.Variant.Primary}
+        icon={playCircleIcon}
+        dataLabel={'1:00'}
+      >
+        Primary
+      </Button>
+
+      <h3>Small Primary</h3>
+      <Button size="small" variant={Button.Variant.Primary}>
+        Primary
+      </Button>
+      <Button disabled={true} size="small" variant={Button.Variant.Primary}>
+        Primary
+      </Button>
+
+      <h3>Growing Primary</h3>
+      <div css={buttonContainer}>
+        <Button size="large" variant={Button.Variant.Primary} grow={true}>
+          Primary
+        </Button>
+      </div>
+    </div>
+  ))
+  .add('Secondary', () => (
+    <div className="story">
+      <h3>Large Secondary</h3>
+      <Button size="large" variant={Button.Variant.Secondary}>
+        Secondary
+      </Button>
+      <Button size="large" variant={Button.Variant.Secondary} icon={activityStreamIcon}>
+        Secondary
+      </Button>
+      <Button
+        size="large"
+        variant={Button.Variant.Secondary}
+        icon={playCircleIcon}
+        dataLabel={'1:00'}
+      >
+        Secondary
+      </Button>
+      <Button
+        disabled={true}
+        size="large"
+        variant={Button.Variant.Secondary}
+        icon={playCircleIcon}
+        dataLabel={'1:00'}
+      >
+        Secondary
+      </Button>
+
+      <h3>Medium Secondary</h3>
+      <Button size="medium" variant={Button.Variant.Secondary}>
+        Secondary
+      </Button>
+      <Button size="medium" variant={Button.Variant.Secondary} icon={editIcon}>
+        Secondary
+      </Button>
+      <Button
+        size="medium"
+        variant={Button.Variant.Secondary}
+        icon={playCircleIcon}
+        dataLabel={'1:00'}
+      >
+        Secondary
+      </Button>
+      <Button
+        disabled={true}
+        size="medium"
+        variant={Button.Variant.Secondary}
+        icon={playCircleIcon}
+        dataLabel={'1:00'}
+      >
+        Secondary
+      </Button>
+
+      <h3>Small Secondary</h3>
+      <Button size="small" variant={Button.Variant.Secondary}>
+        Secondary
+      </Button>
+      <Button disabled={true} size="small" variant={Button.Variant.Secondary}>
+        Secondary
+      </Button>
+
+      <h3>Growing Secondary</h3>
+      <Button size="large" variant={Button.Variant.Secondary} grow={true}>
+        Growing Secondary
+      </Button>
+    </div>
+  ));
diff --git a/modules/button/react/stories/stories_DeleteButton.tsx b/modules/button/react/stories/stories_DeleteButton.tsx
new file mode 100644
index 0000000000..7d5400de54
--- /dev/null
+++ b/modules/button/react/stories/stories_DeleteButton.tsx
@@ -0,0 +1,33 @@
+/// <reference path="../../../../typings.d.ts" />
+/** @jsx jsx */
+import {jsx} from '@emotion/core';
+import {storiesOf} from '@storybook/react';
+import withReadme from 'storybook-readme/with-readme';
+
+import {DeleteButton} from '../index';
+import README from '../README.md';
+
+storiesOf('Components|Buttons/Button/React', module)
+  .addParameters({component: DeleteButton})
+  .addDecorator(withReadme(README))
+  .add('Delete', () => (
+    <div className="story">
+      <h3>Large Delete</h3>
+      <DeleteButton size="large">Delete</DeleteButton>
+      <DeleteButton disabled={true} size="large">
+        Delete
+      </DeleteButton>
+
+      <h3>Medium Delete</h3>
+      <DeleteButton size="medium">Delete</DeleteButton>
+      <DeleteButton disabled={true} size="medium">
+        Delete
+      </DeleteButton>
+
+      <h3>Small Delete</h3>
+      <DeleteButton size="small">Delete</DeleteButton>
+      <DeleteButton disabled={true} size="small">
+        Delete
+      </DeleteButton>
+    </div>
+  ));
diff --git a/modules/button/react/stories/stories_Dropdown.tsx b/modules/button/react/stories/stories_Dropdown.tsx
new file mode 100644
index 0000000000..58325fc518
--- /dev/null
+++ b/modules/button/react/stories/stories_Dropdown.tsx
@@ -0,0 +1,50 @@
+/// <reference path="../../../../typings.d.ts" />
+/** @jsx jsx */
+import {jsx} from '@emotion/core';
+import {storiesOf} from '@storybook/react';
+import withReadme from 'storybook-readme/with-readme';
+
+import {DropdownButton} from '../index';
+import README from '../README.md';
+
+storiesOf('Components|Buttons/Button/React/Dropdown', module)
+  .addParameters({component: DropdownButton})
+  .addDecorator(withReadme(README))
+  .add('Primary', () => (
+    <div className="story">
+      <h3>Large Primary</h3>
+      <DropdownButton size="large" variant={DropdownButton.Variant.Primary}>
+        Dropdown Button
+      </DropdownButton>
+      <DropdownButton disabled={true} size="large" variant={DropdownButton.Variant.Primary}>
+        Dropdown Button
+      </DropdownButton>
+
+      <h3>Medium Primary</h3>
+      <DropdownButton size="medium" variant={DropdownButton.Variant.Primary}>
+        Dropdown Button
+      </DropdownButton>
+      <DropdownButton disabled={true} size="medium" variant={DropdownButton.Variant.Primary}>
+        Dropdown Button
+      </DropdownButton>
+    </div>
+  ))
+  .add('Secondary', () => (
+    <div className="story">
+      <h3>Large Secondary</h3>
+      <DropdownButton size="large" variant={DropdownButton.Variant.Secondary}>
+        Dropdown Button
+      </DropdownButton>
+      <DropdownButton disabled={true} size="large" variant={DropdownButton.Variant.Secondary}>
+        Dropdown Button
+      </DropdownButton>
+
+      <h3>Medium Secondary</h3>
+      <DropdownButton size="medium" variant={DropdownButton.Variant.Secondary}>
+        Dropdown Button
+      </DropdownButton>
+      <DropdownButton disabled={true} size="medium" variant={DropdownButton.Variant.Secondary}>
+        Dropdown Button
+      </DropdownButton>
+    </div>
+  ));
diff --git a/modules/button/react/stories/stories_HighlightButton.tsx b/modules/button/react/stories/stories_HighlightButton.tsx
new file mode 100644
index 0000000000..57371b8144
--- /dev/null
+++ b/modules/button/react/stories/stories_HighlightButton.tsx
@@ -0,0 +1,49 @@
+/// <reference path="../../../../typings.d.ts" />
+/** @jsx jsx */
+import {jsx} from '@emotion/core';
+import {storiesOf} from '@storybook/react';
+import withReadme from 'storybook-readme/with-readme';
+
+import {playCircleIcon, activityStreamIcon} from '@workday/canvas-system-icons-web';
+
+import {HighlightButton} from '../index';
+import README from '../README.md';
+
+const buttonContainer = {
+  display: 'flex',
+  alignItems: 'center',
+  '& button + button': {
+    marginLeft: 10,
+  },
+};
+
+storiesOf('Components|Buttons/Button/React', module)
+  .addParameters({component: HighlightButton})
+  .addDecorator(withReadme(README))
+  .add('Highlight', () => (
+    <div className="story">
+      <h3>Large Highlight</h3>
+      <HighlightButton icon={activityStreamIcon}>Highlight</HighlightButton>
+      <HighlightButton disabled={true} icon={playCircleIcon}>
+        Highlight
+      </HighlightButton>
+
+      <h3>Medium Highlight</h3>
+      <HighlightButton size="medium" icon={activityStreamIcon}>
+        Highlight
+      </HighlightButton>
+      <HighlightButton size="medium" icon={playCircleIcon}>
+        Highlight
+      </HighlightButton>
+
+      <h3>Growing</h3>
+      <div css={buttonContainer}>
+        <HighlightButton icon={activityStreamIcon} grow={true}>
+          Highlight
+        </HighlightButton>
+        <HighlightButton icon={playCircleIcon} grow={true}>
+          Highlight
+        </HighlightButton>
+      </div>
+    </div>
+  ));
diff --git a/modules/button/react/stories/stories_IconButton.tsx b/modules/button/react/stories/stories_IconButton.tsx
new file mode 100644
index 0000000000..09f24566db
--- /dev/null
+++ b/modules/button/react/stories/stories_IconButton.tsx
@@ -0,0 +1,379 @@
+/// <reference path="../../../../typings.d.ts" />
+/** @jsx jsx */
+import {jsx, CSSObject} from '@emotion/core';
+import * as React from 'react';
+import {storiesOf} from '@storybook/react';
+import withReadme from 'storybook-readme/with-readme';
+
+import {activityStreamIcon} from '@workday/canvas-system-icons-web';
+
+import {IconButton} from '../index';
+
+import README from '../README.md';
+
+const iconButtonLayout: CSSObject = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  margin: '0 10px',
+  padding: '24px',
+  maxWidth: 'max-content',
+  borderRadius: '4px',
+  button: {
+    margin: '0 12px',
+  },
+};
+
+const blueBackground: CSSObject = {
+  ...iconButtonLayout,
+  backgroundColor: '#0875e1',
+};
+
+storiesOf('Components|Buttons/Button/React/Icon Button', module)
+  .addParameters({component: IconButton})
+  .addDecorator(withReadme(README))
+  .add('Circle', () => {
+    const [toggled, setToggled] = React.useState();
+    const handleToggle = () => {
+      setToggled(!toggled);
+    };
+
+    return (
+      <div className="story">
+        <h3>Medium Default</h3>
+        <IconButton
+          aria-label="Activity Stream"
+          icon={activityStreamIcon}
+          variant={IconButton.Variant.Circle}
+          size={IconButton.Size.Medium}
+        />
+        <IconButton
+          aria-label="Activity Stream"
+          icon={activityStreamIcon}
+          variant={IconButton.Variant.Circle}
+          size={IconButton.Size.Medium}
+          disabled={true}
+        />
+
+        <h3>Small Default</h3>
+        <IconButton
+          aria-label="Activity Stream"
+          icon={activityStreamIcon}
+          variant={IconButton.Variant.Circle}
+          size={IconButton.Size.Small}
+        />
+        <IconButton
+          aria-label="Activity Stream"
+          variant={IconButton.Variant.Circle}
+          icon={activityStreamIcon}
+          size={IconButton.Size.Small}
+          disabled={true}
+        />
+
+        <h3>Toggleable Default</h3>
+        <IconButton
+          aria-label="Activity Stream"
+          icon={activityStreamIcon}
+          toggled={toggled}
+          variant={IconButton.Variant.Circle}
+          onClick={handleToggle}
+        />
+      </div>
+    );
+  })
+  .add('Square', () => {
+    const [toggled, setToggled] = React.useState();
+    const handleToggle = () => {
+      setToggled(!toggled);
+    };
+
+    return (
+      <div className="story">
+        <h3>Medium Square</h3>
+        <IconButton
+          aria-label="Activity Stream"
+          icon={activityStreamIcon}
+          size={IconButton.Size.Medium}
+          variant={IconButton.Variant.Square}
+        />
+        <IconButton
+          aria-label="Activity Stream"
+          icon={activityStreamIcon}
+          size={IconButton.Size.Medium}
+          disabled={true}
+          variant={IconButton.Variant.Square}
+        />
+
+        <h3>Small Square</h3>
+        <IconButton
+          aria-label="Activity Stream"
+          icon={activityStreamIcon}
+          size={IconButton.Size.Small}
+          variant={IconButton.Variant.Square}
+        />
+        <IconButton
+          aria-label="Activity Stream"
+          icon={activityStreamIcon}
+          size={IconButton.Size.Small}
+          disabled={true}
+          variant={IconButton.Variant.Square}
+        />
+
+        <h3>Toggleable Square</h3>
+        <IconButton
+          aria-label="Activity Stream"
+          icon={activityStreamIcon}
+          toggled={toggled}
+          variant={IconButton.Variant.Square}
+          onClick={handleToggle}
+        />
+      </div>
+    );
+  })
+  .add('Square Filled', () => {
+    const [toggled, setToggled] = React.useState();
+    const handleToggle = () => {
+      setToggled(!toggled);
+    };
+
+    return (
+      <div className="story">
+        <h3>Medium Square</h3>
+        <IconButton
+          aria-label="Activity Stream"
+          icon={activityStreamIcon}
+          size={IconButton.Size.Medium}
+          variant={IconButton.Variant.SquareFilled}
+        />
+        <IconButton
+          aria-label="Activity Stream"
+          icon={activityStreamIcon}
+          size={IconButton.Size.Medium}
+          disabled={true}
+          variant={IconButton.Variant.SquareFilled}
+        />
+        <h3>Small Square</h3>
+        <IconButton
+          aria-label="Activity Stream"
+          icon={activityStreamIcon}
+          size={IconButton.Size.Small}
+          variant={IconButton.Variant.SquareFilled}
+        />
+        <IconButton
+          aria-label="Activity Stream"
+          icon={activityStreamIcon}
+          size={IconButton.Size.Small}
+          disabled={true}
+          variant={IconButton.Variant.SquareFilled}
+        />
+        <h3>Toggleable Square</h3>
+        <IconButton
+          aria-label="Activity Stream"
+          icon={activityStreamIcon}
+          toggled={toggled}
+          variant={IconButton.Variant.SquareFilled}
+          onClick={handleToggle}
+        />
+      </div>
+    );
+  })
+  .add('Plain', () => {
+    const [toggled, setToggled] = React.useState();
+    const handleToggle = () => {
+      setToggled(!toggled);
+    };
+
+    return (
+      <div className="story">
+        <h3>Medium Plain</h3>
+        <IconButton
+          aria-label="Activity Stream"
+          icon={activityStreamIcon}
+          size={IconButton.Size.Medium}
+          variant={IconButton.Variant.Plain}
+        />
+        <IconButton
+          aria-label="Activity Stream"
+          icon={activityStreamIcon}
+          size={IconButton.Size.Medium}
+          variant={IconButton.Variant.Plain}
+          disabled={true}
+        />
+        <h3>Small Plain</h3>
+        <IconButton
+          aria-label="Activity Stream"
+          icon={activityStreamIcon}
+          size={IconButton.Size.Small}
+          variant={IconButton.Variant.Plain}
+        />
+        <IconButton
+          aria-label="Activity Stream"
+          icon={activityStreamIcon}
+          size={IconButton.Size.Small}
+          disabled={true}
+          variant={IconButton.Variant.Plain}
+        />
+        <h3>Toggleable Plain</h3>
+        <IconButton
+          aria-label="Activity Stream"
+          icon={activityStreamIcon}
+          toggled={toggled}
+          variant={IconButton.Variant.Plain}
+          onClick={handleToggle}
+        />
+      </div>
+    );
+  })
+  .add('Circle Filled', () => {
+    const [toggled, setToggled] = React.useState();
+    const handleToggle = () => {
+      setToggled(!toggled);
+    };
+
+    return (
+      <div className="story">
+        <h3>Medium Filled</h3>
+        <IconButton
+          aria-label="Activity Stream"
+          icon={activityStreamIcon}
+          size={IconButton.Size.Medium}
+          variant={IconButton.Variant.CircleFilled}
+        />
+        <IconButton
+          aria-label="Activity Stream"
+          icon={activityStreamIcon}
+          size={IconButton.Size.Medium}
+          variant={IconButton.Variant.CircleFilled}
+          disabled={true}
+        />
+        <h3>Small Filled</h3>
+        <IconButton
+          aria-label="Activity Stream"
+          icon={activityStreamIcon}
+          size={IconButton.Size.Small}
+          variant={IconButton.Variant.CircleFilled}
+        />
+        <IconButton
+          aria-label="Activity Stream"
+          icon={activityStreamIcon}
+          size={IconButton.Size.Small}
+          disabled={true}
+          variant={IconButton.Variant.CircleFilled}
+        />
+        <h3>Toggleable Filled</h3>
+        <IconButton
+          aria-label="Activity Stream"
+          icon={activityStreamIcon}
+          toggled={toggled}
+          variant={IconButton.Variant.CircleFilled}
+          onClick={handleToggle}
+        />
+      </div>
+    );
+  })
+  .add('Inverse', () => {
+    const [toggled, setToggled] = React.useState();
+    const handleToggle = () => {
+      setToggled(!toggled);
+    };
+
+    return (
+      <div className="story">
+        <h3>Medium Inverse</h3>
+        <div css={blueBackground}>
+          <IconButton
+            aria-label="Activity Stream"
+            icon={activityStreamIcon}
+            size={IconButton.Size.Medium}
+            variant={IconButton.Variant.Inverse}
+          />
+          <IconButton
+            aria-label="Activity Stream"
+            icon={activityStreamIcon}
+            size={IconButton.Size.Medium}
+            variant={IconButton.Variant.Inverse}
+            disabled={true}
+          />
+        </div>
+        <h3>Small Inverse</h3>
+        <div css={blueBackground}>
+          <IconButton
+            aria-label="Activity Stream"
+            icon={activityStreamIcon}
+            size={IconButton.Size.Small}
+            variant={IconButton.Variant.Inverse}
+          />
+          <IconButton
+            aria-label="Activity Stream"
+            icon={activityStreamIcon}
+            size={IconButton.Size.Small}
+            disabled={true}
+            variant={IconButton.Variant.Inverse}
+          />
+        </div>
+        <h3>Toggleable Inverse</h3>
+        <div css={blueBackground}>
+          <IconButton
+            aria-label="Activity Stream"
+            icon={activityStreamIcon}
+            toggled={toggled}
+            variant={IconButton.Variant.Inverse}
+            onClick={handleToggle}
+          />
+        </div>
+      </div>
+    );
+  })
+  .add('Inverse Filled', () => {
+    const [toggled, setToggled] = React.useState();
+    const handleToggle = () => {
+      setToggled(!toggled);
+    };
+
+    return (
+      <div className="story">
+        <h3>Medium Inverse Filled</h3>
+        <div css={blueBackground}>
+          <IconButton
+            aria-label="Activity Stream"
+            icon={activityStreamIcon}
+            size={IconButton.Size.Medium}
+            variant={IconButton.Variant.InverseFilled}
+          />
+          <IconButton
+            aria-label="Activity Stream"
+            icon={activityStreamIcon}
+            size={IconButton.Size.Medium}
+            variant={IconButton.Variant.InverseFilled}
+            disabled={true}
+          />
+        </div>
+        <h3>Small Inverse Filled</h3>
+        <div css={blueBackground}>
+          <IconButton
+            aria-label="Activity Stream"
+            icon={activityStreamIcon}
+            size={IconButton.Size.Small}
+            variant={IconButton.Variant.InverseFilled}
+          />
+          <IconButton
+            aria-label="Activity Stream"
+            icon={activityStreamIcon}
+            size={IconButton.Size.Small}
+            disabled={true}
+            variant={IconButton.Variant.InverseFilled}
+          />
+        </div>
+        <h3>Toggleable Inverse Filled</h3>
+        <div css={blueBackground}>
+          <IconButton
+            aria-label="Activity Stream"
+            icon={activityStreamIcon}
+            toggled={toggled}
+            variant={IconButton.Variant.InverseFilled}
+            onClick={handleToggle}
+          />
+        </div>
+      </div>
+    );
+  });
diff --git a/modules/button/react/stories/stories_OutlineButton.tsx b/modules/button/react/stories/stories_OutlineButton.tsx
new file mode 100644
index 0000000000..96dfc596b7
--- /dev/null
+++ b/modules/button/react/stories/stories_OutlineButton.tsx
@@ -0,0 +1,211 @@
+/// <reference path="../../../../typings.d.ts" />
+/** @jsx jsx */
+import {jsx, CSSObject} from '@emotion/core';
+import {storiesOf} from '@storybook/react';
+import withReadme from 'storybook-readme/with-readme';
+
+import {editIcon, playCircleIcon, activityStreamIcon} from '@workday/canvas-system-icons-web';
+
+import {OutlineButton} from '../index';
+import README from '../README.md';
+
+const blueBackground: CSSObject = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexWrap: 'wrap',
+  backgroundColor: '#0875e1',
+  margin: '0 10px',
+  padding: '12px',
+  maxWidth: 'max-content',
+  borderRadius: '3px',
+  button: {
+    margin: '12px',
+  },
+};
+
+storiesOf('Components|OutlineButtons/OutlineButton/React/Outline', module)
+  .addParameters({component: OutlineButton})
+  .addDecorator(withReadme(README))
+  .add('Primary', () => (
+    <div className="story">
+      <h3>Large Primary</h3>
+      <OutlineButton size="large" variant={OutlineButton.Variant.Primary}>
+        Outline Primary
+      </OutlineButton>
+      <OutlineButton size="large" variant={OutlineButton.Variant.Primary} icon={activityStreamIcon}>
+        Outline Primary
+      </OutlineButton>
+      <OutlineButton
+        size="large"
+        dataLabel={'1:00'}
+        variant={OutlineButton.Variant.Primary}
+        icon={playCircleIcon}
+      >
+        Outline Primary
+      </OutlineButton>
+      <OutlineButton
+        size="large"
+        disabled={true}
+        dataLabel={'1:00'}
+        variant={OutlineButton.Variant.Primary}
+        icon={playCircleIcon}
+      >
+        Outline Primary
+      </OutlineButton>
+
+      <h3>Medium Primary</h3>
+      <OutlineButton size="medium" variant={OutlineButton.Variant.Primary}>
+        Outline Primary
+      </OutlineButton>
+      <OutlineButton size="medium" variant={OutlineButton.Variant.Primary} icon={editIcon}>
+        Outline Primary
+      </OutlineButton>
+      <OutlineButton
+        size="medium"
+        dataLabel={'1:00'}
+        variant={OutlineButton.Variant.Primary}
+        icon={playCircleIcon}
+      >
+        Outline Primary
+      </OutlineButton>
+      <OutlineButton
+        size="medium"
+        disabled={true}
+        dataLabel={'1:00'}
+        variant={OutlineButton.Variant.Primary}
+        icon={playCircleIcon}
+      >
+        Outline Primary
+      </OutlineButton>
+
+      <h3>Small Primary</h3>
+      <OutlineButton size="small" variant={OutlineButton.Variant.Primary}>
+        Outline Primary
+      </OutlineButton>
+      <OutlineButton size="small" disabled={true} variant={OutlineButton.Variant.Primary}>
+        Outline Primary
+      </OutlineButton>
+
+      <h3>Growing Primary</h3>
+      <OutlineButton size="large" variant={OutlineButton.Variant.Primary} grow={true}>
+        Growing Primary Outline
+      </OutlineButton>
+    </div>
+  ))
+  .add('Secondary', () => (
+    <div className="story">
+      <h3>Large Secondary</h3>
+      <OutlineButton size="large">Outline Secondary</OutlineButton>
+      <OutlineButton size="large" icon={activityStreamIcon}>
+        Outline Secondary
+      </OutlineButton>
+      <OutlineButton size="large" dataLabel={'1:00'} icon={playCircleIcon}>
+        Outline Secondary
+      </OutlineButton>
+      <OutlineButton size="large" disabled={true} dataLabel={'1:00'} icon={playCircleIcon}>
+        Outline Secondary
+      </OutlineButton>
+
+      <h3>Medium Secondary</h3>
+      <OutlineButton size="medium">Outline Secondary</OutlineButton>
+      <OutlineButton size="medium" icon={editIcon}>
+        Outline Secondary
+      </OutlineButton>
+      <OutlineButton size="medium" dataLabel={'1:00'} icon={playCircleIcon}>
+        Outline Secondary
+      </OutlineButton>
+      <OutlineButton size="medium" disabled={true} dataLabel={'1:00'} icon={playCircleIcon}>
+        Outline Secondary
+      </OutlineButton>
+
+      <h3>Small Secondary</h3>
+      <OutlineButton size="small">Outline Secondary</OutlineButton>
+      <OutlineButton size="small" disabled={true}>
+        Outline Secondary
+      </OutlineButton>
+
+      <h3>Growing Secondary</h3>
+      <OutlineButton size="large" grow={true}>
+        Growing Secondary Outline
+      </OutlineButton>
+    </div>
+  ))
+  .add('Inverse', () => (
+    <div className="story">
+      <h3>Large Inverse</h3>
+      <div css={blueBackground}>
+        <OutlineButton size="large" variant={OutlineButton.Variant.Inverse}>
+          Outline Inverse
+        </OutlineButton>
+        <OutlineButton
+          size="large"
+          variant={OutlineButton.Variant.Inverse}
+          icon={activityStreamIcon}
+        >
+          Outline Inverse
+        </OutlineButton>
+        <OutlineButton
+          size="large"
+          dataLabel={'1:00'}
+          variant={OutlineButton.Variant.Inverse}
+          icon={playCircleIcon}
+        >
+          Outline Inverse
+        </OutlineButton>
+        <OutlineButton
+          size="large"
+          disabled={true}
+          dataLabel={'1:00'}
+          variant={OutlineButton.Variant.Inverse}
+          icon={playCircleIcon}
+        >
+          Outline Inverse
+        </OutlineButton>
+      </div>
+
+      <h3>Medium Inverse</h3>
+      <div css={blueBackground}>
+        <OutlineButton size="medium" variant={OutlineButton.Variant.Inverse}>
+          Outline Inverse
+        </OutlineButton>
+        <OutlineButton size="medium" variant={OutlineButton.Variant.Inverse} icon={editIcon}>
+          Outline Inverse
+        </OutlineButton>
+        <OutlineButton
+          size="medium"
+          dataLabel={'1:00'}
+          variant={OutlineButton.Variant.Inverse}
+          icon={playCircleIcon}
+        >
+          Outline Inverse
+        </OutlineButton>
+        <OutlineButton
+          size="medium"
+          disabled={true}
+          dataLabel={'1:00'}
+          variant={OutlineButton.Variant.Inverse}
+          icon={playCircleIcon}
+        >
+          Outline Inverse
+        </OutlineButton>
+      </div>
+
+      <h3>Small Inverse</h3>
+      <div css={blueBackground}>
+        <OutlineButton size="small" variant={OutlineButton.Variant.Inverse}>
+          Outline Inverse
+        </OutlineButton>
+        <OutlineButton size="small" disabled={true} variant={OutlineButton.Variant.Inverse}>
+          Outline Inverse
+        </OutlineButton>
+      </div>
+
+      <h3>Growing Inverse</h3>
+      <div css={blueBackground} style={{maxWidth: 'initial'}}>
+        <OutlineButton size="large" variant={OutlineButton.Variant.Inverse} grow={true}>
+          Growing Inverse Outline
+        </OutlineButton>
+      </div>
+    </div>
+  ));
diff --git a/modules/button/react/stories/stories_TextButton.tsx b/modules/button/react/stories/stories_TextButton.tsx
new file mode 100644
index 0000000000..aa3f0eba3d
--- /dev/null
+++ b/modules/button/react/stories/stories_TextButton.tsx
@@ -0,0 +1,125 @@
+/// <reference path="../../../../typings.d.ts" />
+/** @jsx jsx */
+import {jsx, CSSObject} from '@emotion/core';
+import {storiesOf} from '@storybook/react';
+import withReadme from 'storybook-readme/with-readme';
+
+import {editIcon, arrowRightIcon} from '@workday/canvas-system-icons-web';
+
+import {TextButton} from '../index';
+import README from '../README.md';
+
+const blueBackground: CSSObject = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexWrap: 'wrap',
+  backgroundColor: '#0875e1',
+  margin: '0 10px',
+  padding: '12px',
+  maxWidth: 'max-content',
+  borderRadius: '3px',
+  button: {
+    margin: '12px',
+  },
+};
+
+const buttonContainer = {
+  display: 'flex',
+  alignItems: 'center',
+  '& button + button': {
+    marginLeft: 10,
+  },
+};
+
+storiesOf('Components|Buttons/Button/React/Text', module)
+  .addParameters({component: TextButton})
+  .addDecorator(withReadme(README))
+  .add('Default', () => (
+    <div className="story">
+      <h3>Medium Large</h3>
+      <TextButton size="medium" variant={TextButton.Variant.Default}>
+        Text
+      </TextButton>
+      <TextButton disabled={true} size="medium" variant={TextButton.Variant.Default}>
+        Text
+      </TextButton>
+
+      <h3>Small</h3>
+      <TextButton size="small" variant={TextButton.Variant.Default}>
+        Text
+      </TextButton>
+      <TextButton disabled={true} size="small" variant={TextButton.Variant.Default}>
+        Text
+      </TextButton>
+
+      <h3>All Caps</h3>
+      <TextButton allCaps={true}>All Caps</TextButton>
+
+      <h3>Icons</h3>
+      <div css={buttonContainer}>
+        <TextButton
+          icon={editIcon}
+          iconPosition={TextButton.IconPosition.Left}
+          variant={TextButton.Variant.Default}
+        >
+          Left Icon
+        </TextButton>
+        <TextButton
+          icon={arrowRightIcon}
+          iconPosition={TextButton.IconPosition.Right}
+          variant={TextButton.Variant.Default}
+        >
+          Right Icon
+        </TextButton>
+      </div>
+    </div>
+  ))
+  .add('Inverse', () => (
+    <div className="story">
+      <h3>Medium Inverse</h3>
+      <div css={blueBackground}>
+        <TextButton size="medium" variant={TextButton.Variant.Inverse}>
+          Text
+        </TextButton>
+        <TextButton disabled={true} size="medium" variant={TextButton.Variant.Inverse}>
+          Text
+        </TextButton>
+      </div>
+
+      <h3>Small Inverse</h3>
+      <div css={blueBackground}>
+        <TextButton size="small" variant={TextButton.Variant.Inverse}>
+          Text
+        </TextButton>
+        <TextButton disabled={true} size="small" variant={TextButton.Variant.Inverse}>
+          Text
+        </TextButton>
+      </div>
+
+      <h3>All Caps Inverse</h3>
+      <div css={blueBackground}>
+        <TextButton variant={TextButton.Variant.Inverse} allCaps={true}>
+          All Caps
+        </TextButton>
+      </div>
+
+      <h3>Icons Inverse</h3>
+      <div css={{...buttonContainer, ...blueBackground}}>
+        <TextButton
+          icon={editIcon}
+          iconPosition={TextButton.IconPosition.Left}
+          variant={TextButton.Variant.Inverse}
+        >
+          Left Icon
+        </TextButton>
+        <TextButton
+          icon={arrowRightIcon}
+          iconPosition={TextButton.IconPosition.Right}
+          variant={TextButton.Variant.Inverse}
+        >
+          Right Icon
+        </TextButton>
+      </div>
+    </div>
+  ));
diff --git a/modules/button/react/stories/stories_deprecated.tsx b/modules/button/react/stories/stories_deprecatedButton.tsx
similarity index 99%
rename from modules/button/react/stories/stories_deprecated.tsx
rename to modules/button/react/stories/stories_deprecatedButton.tsx
index 9cb037eafd..6d2b16685a 100644
--- a/modules/button/react/stories/stories_deprecated.tsx
+++ b/modules/button/react/stories/stories_deprecatedButton.tsx
@@ -16,6 +16,7 @@ storiesOf('Components|Buttons/Button/React/Deprecated', module)
       <Button variant={Button.Variant.Primary} disabled={true}>
         Primary Button
       </Button>
+
       <h3>Medium Primary</h3>
       <Button variant={Button.Variant.Primary} size={Button.Size.Medium}>
         Primary Button
@@ -23,6 +24,7 @@ storiesOf('Components|Buttons/Button/React/Deprecated', module)
       <Button variant={Button.Variant.Primary} size={Button.Size.Medium} disabled={true}>
         Primary Button
       </Button>
+
       <h3>Small Primary</h3>
       <Button variant={Button.Variant.Primary} size={Button.Size.Small}>
         Primary Button
@@ -30,6 +32,7 @@ storiesOf('Components|Buttons/Button/React/Deprecated', module)
       <Button variant={Button.Variant.Primary} size={Button.Size.Small} disabled={true}>
         Primary Button
       </Button>
+
       <h3>Growing Primary</h3>
       <Button variant={Button.Variant.Primary} grow={true}>
         Growing Primary Button
@@ -43,6 +46,7 @@ storiesOf('Components|Buttons/Button/React/Deprecated', module)
       <Button variant={Button.Variant.Secondary} disabled={true}>
         Secondary Button
       </Button>
+
       <h3>Medium Secondary</h3>
       <Button variant={Button.Variant.Secondary} size={Button.Size.Medium}>
         Secondary Button
@@ -50,6 +54,7 @@ storiesOf('Components|Buttons/Button/React/Deprecated', module)
       <Button variant={Button.Variant.Secondary} size={Button.Size.Medium} disabled={true}>
         Secondary Button
       </Button>
+
       <h3>Small Secondary</h3>
       <Button variant={Button.Variant.Secondary} size={Button.Size.Small}>
         Secondary Button
@@ -57,6 +62,7 @@ storiesOf('Components|Buttons/Button/React/Deprecated', module)
       <Button variant={Button.Variant.Secondary} size={Button.Size.Small} disabled={true}>
         Secondary Button
       </Button>
+
       <h3>Growing Secondary</h3>
       <Button variant={Button.Variant.Secondary} grow={true}>
         Growing Secondary Button
@@ -70,6 +76,7 @@ storiesOf('Components|Buttons/Button/React/Deprecated', module)
       <Button variant={Button.Variant.Delete} disabled={true}>
         Delete Button
       </Button>
+
       <h3>Medium Delete</h3>
       <Button variant={Button.Variant.Delete} size={Button.Size.Medium}>
         Delete Button
@@ -77,6 +84,7 @@ storiesOf('Components|Buttons/Button/React/Deprecated', module)
       <Button variant={Button.Variant.Delete} size={Button.Size.Medium} disabled={true}>
         Delete Button
       </Button>
+
       <h3>Small Delete</h3>
       <Button variant={Button.Variant.Delete} size={Button.Size.Small}>
         Delete Button
@@ -84,6 +92,7 @@ storiesOf('Components|Buttons/Button/React/Deprecated', module)
       <Button variant={Button.Variant.Delete} size={Button.Size.Small} disabled={true}>
         Delete Button
       </Button>
+
       <h3>Growing Delete</h3>
       <Button variant={Button.Variant.Delete} grow={true}>
         Growing Delete Button
diff --git a/modules/button/react/stories/stories_iconButton.tsx b/modules/button/react/stories/stories_iconButton.tsx
deleted file mode 100644
index 666595e8f1..0000000000
--- a/modules/button/react/stories/stories_iconButton.tsx
+++ /dev/null
@@ -1,421 +0,0 @@
-/// <reference path="../../../../typings.d.ts" />
-/** @jsx jsx */
-import {jsx, CSSObject} from '@emotion/core';
-import * as React from 'react';
-import {storiesOf} from '@storybook/react';
-import withReadme from 'storybook-readme/with-readme';
-
-import {
-  activityStreamIcon,
-  listViewIcon,
-  worksheetsIcon,
-  deviceTabletIcon,
-  percentageIcon,
-} from '@workday/canvas-system-icons-web';
-
-import {
-  IconButton,
-  IconButtonToggleGroup,
-  IconButtonToggleGroupProps,
-  IconButtonVariant,
-} from '../index';
-
-import README from '../README.md';
-import {IconButtonProps} from '../lib/IconButton';
-
-const iconButtonLayout: CSSObject = {
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  margin: '0 10px',
-  padding: '24px',
-  maxWidth: 'max-content',
-  borderRadius: '4px',
-  button: {
-    margin: '0 12px',
-  },
-};
-
-const blueBackground: CSSObject = {
-  ...iconButtonLayout,
-  backgroundColor: '#0875e1',
-};
-
-const commonIconButtonProps: Pick<IconButtonProps, 'aria-label' | 'title' | 'icon'> = {
-  'aria-label': 'Activity Stream',
-  title: 'Activity Stream',
-  icon: activityStreamIcon,
-};
-
-// Wrapper to add state mgmt to IconButtons
-interface ToggleIconButtonWrapperState {
-  isToggled: boolean;
-}
-
-interface ToggleIconButtonWrapperProps {
-  variant: IconButtonVariant;
-}
-
-export class ToggleIconButtonWrapper extends React.Component<
-  ToggleIconButtonWrapperProps,
-  ToggleIconButtonWrapperState
-> {
-  state = {
-    isToggled: false,
-  };
-
-  public render() {
-    return (
-      <IconButton
-        {...commonIconButtonProps}
-        toggled={this.state.isToggled}
-        variant={this.props.variant}
-        onClick={this.handleToggle}
-      />
-    );
-  }
-
-  public handleToggle = () => {
-    this.setState({isToggled: !this.state.isToggled});
-  };
-}
-
-// Wrapper to add state mgmt to IconButtonToggleGroups
-interface IconButtonToggleGroupWrapperState {
-  selectedValue: string | number;
-}
-
-export class IconButtonToggleGroupWrapper extends React.Component<
-  {},
-  IconButtonToggleGroupWrapperState
-> {
-  state = {
-    selectedValue: '',
-  };
-
-  public render() {
-    const child = this.props.children as React.ReactElement<IconButtonToggleGroupProps>;
-    return React.cloneElement(child, {
-      value: this.state.selectedValue === '' ? child.props.value : this.state.selectedValue,
-      onChange: this.handleToggle,
-    });
-  }
-
-  public handleToggle = (selectedValue: string | number) => {
-    this.setState({selectedValue});
-  };
-}
-
-storiesOf('Components|Buttons/Button/React/Icon Button', module)
-  .addParameters({component: IconButton})
-  .addDecorator(withReadme(README))
-  .add('Circle', () => (
-    <div className="story">
-      <h3>Medium Default</h3>
-      <IconButton
-        {...commonIconButtonProps}
-        variant={IconButton.Variant.Circle}
-        size={IconButton.Size.Medium}
-      />
-      <IconButton
-        variant={IconButton.Variant.Circle}
-        icon={activityStreamIcon}
-        size={IconButton.Size.Medium}
-        disabled={true}
-        aria-label="Activity Stream"
-      />
-      <h3>Small Default</h3>
-      <IconButton
-        {...commonIconButtonProps}
-        variant={IconButton.Variant.Circle}
-        size={IconButton.Size.Small}
-      />
-      <IconButton
-        variant={IconButton.Variant.Circle}
-        icon={activityStreamIcon}
-        size={IconButton.Size.Small}
-        disabled={true}
-        aria-label="Activity Stream"
-      />
-      <h3>Toggleable Default</h3>
-      <ToggleIconButtonWrapper variant={IconButton.Variant.Circle} />
-    </div>
-  ))
-  .add('Square', () => (
-    <div className="story">
-      <h3>Medium Square</h3>
-      <IconButton
-        {...commonIconButtonProps}
-        size={IconButton.Size.Medium}
-        variant={IconButton.Variant.Square}
-      />
-      <IconButton
-        icon={activityStreamIcon}
-        size={IconButton.Size.Medium}
-        disabled={true}
-        variant={IconButton.Variant.Square}
-        aria-label="Activity Stream"
-      />
-      <h3>Small Square</h3>
-      <IconButton
-        {...commonIconButtonProps}
-        size={IconButton.Size.Small}
-        variant={IconButton.Variant.Square}
-      />
-      <IconButton
-        icon={activityStreamIcon}
-        size={IconButton.Size.Small}
-        disabled={true}
-        variant={IconButton.Variant.Square}
-        aria-label="Activity Stream"
-      />
-      <h3>Toggleable Square</h3>
-      <ToggleIconButtonWrapper variant={IconButton.Variant.Square} />
-    </div>
-  ))
-  .add('Square Filled', () => (
-    <div className="story">
-      <h3>Medium Square</h3>
-      <IconButton
-        {...commonIconButtonProps}
-        size={IconButton.Size.Medium}
-        variant={IconButton.Variant.SquareFilled}
-      />
-      <IconButton
-        icon={activityStreamIcon}
-        size={IconButton.Size.Medium}
-        disabled={true}
-        variant={IconButton.Variant.SquareFilled}
-        aria-label="Activity Stream"
-      />
-      <h3>Small Square</h3>
-      <IconButton
-        {...commonIconButtonProps}
-        size={IconButton.Size.Small}
-        variant={IconButton.Variant.SquareFilled}
-      />
-      <IconButton
-        icon={activityStreamIcon}
-        size={IconButton.Size.Small}
-        disabled={true}
-        variant={IconButton.Variant.SquareFilled}
-        aria-label="Activity Stream"
-      />
-      <h3>Toggleable Square</h3>
-      <ToggleIconButtonWrapper variant={IconButton.Variant.SquareFilled} />
-    </div>
-  ))
-  .add('Plain', () => (
-    <div className="story">
-      <h3>Medium Plain</h3>
-      <IconButton
-        {...commonIconButtonProps}
-        size={IconButton.Size.Medium}
-        variant={IconButton.Variant.Plain}
-      />
-      <IconButton
-        icon={activityStreamIcon}
-        size={IconButton.Size.Medium}
-        variant={IconButton.Variant.Plain}
-        disabled={true}
-        aria-label="Activity Stream"
-      />
-      <h3>Small Plain</h3>
-      <IconButton
-        {...commonIconButtonProps}
-        size={IconButton.Size.Small}
-        variant={IconButton.Variant.Plain}
-      />
-      <IconButton
-        icon={activityStreamIcon}
-        size={IconButton.Size.Small}
-        disabled={true}
-        variant={IconButton.Variant.Plain}
-        aria-label="Activity Stream"
-      />
-      <h3>Toggleable Plain</h3>
-      <ToggleIconButtonWrapper variant={IconButton.Variant.Plain} />
-    </div>
-  ))
-  .add('Circle Filled', () => (
-    <div className="story">
-      <h3>Medium Filled</h3>
-      <IconButton
-        {...commonIconButtonProps}
-        size={IconButton.Size.Medium}
-        variant={IconButton.Variant.CircleFilled}
-      />
-      <IconButton
-        icon={activityStreamIcon}
-        size={IconButton.Size.Medium}
-        variant={IconButton.Variant.CircleFilled}
-        disabled={true}
-        aria-label="Activity Stream"
-      />
-      <h3>Small Filled</h3>
-      <IconButton
-        {...commonIconButtonProps}
-        size={IconButton.Size.Small}
-        variant={IconButton.Variant.CircleFilled}
-      />
-      <IconButton
-        icon={activityStreamIcon}
-        size={IconButton.Size.Small}
-        disabled={true}
-        variant={IconButton.Variant.CircleFilled}
-        aria-label="Activity Stream"
-      />
-      <h3>Toggleable Filled</h3>
-      <ToggleIconButtonWrapper variant={IconButton.Variant.CircleFilled} />
-    </div>
-  ))
-  .add('Inverse', () => (
-    <div className="story">
-      <h3>Medium Inverse</h3>
-      <div css={blueBackground}>
-        <IconButton
-          {...commonIconButtonProps}
-          size={IconButton.Size.Medium}
-          variant={IconButton.Variant.Inverse}
-        />
-        <IconButton
-          icon={activityStreamIcon}
-          size={IconButton.Size.Medium}
-          variant={IconButton.Variant.Inverse}
-          disabled={true}
-          aria-label="Activity Stream"
-        />
-      </div>
-      <h3>Small Inverse</h3>
-      <div css={blueBackground}>
-        <IconButton
-          icon={activityStreamIcon}
-          size={IconButton.Size.Small}
-          variant={IconButton.Variant.Inverse}
-          aria-label="Activity Stream"
-        />
-        <IconButton
-          {...commonIconButtonProps}
-          size={IconButton.Size.Small}
-          disabled={true}
-          variant={IconButton.Variant.Inverse}
-        />
-      </div>
-      <h3>Toggleable Inverse</h3>
-      <div css={blueBackground}>
-        <ToggleIconButtonWrapper variant={IconButton.Variant.Inverse} />
-      </div>
-    </div>
-  ))
-  .add('Inverse Filled', () => (
-    <div className="story">
-      <h3>Medium Inverse Filled</h3>
-      <div css={blueBackground}>
-        <IconButton
-          {...commonIconButtonProps}
-          size={IconButton.Size.Medium}
-          variant={IconButton.Variant.InverseFilled}
-        />
-        <IconButton
-          icon={activityStreamIcon}
-          size={IconButton.Size.Medium}
-          variant={IconButton.Variant.InverseFilled}
-          disabled={true}
-          aria-label="Activity Stream"
-        />
-      </div>
-      <h3>Small Inverse Filled</h3>
-      <div css={blueBackground}>
-        <IconButton
-          {...commonIconButtonProps}
-          size={IconButton.Size.Small}
-          variant={IconButton.Variant.InverseFilled}
-        />
-        <IconButton
-          icon={activityStreamIcon}
-          size={IconButton.Size.Small}
-          disabled={true}
-          variant={IconButton.Variant.InverseFilled}
-          aria-label="Activity Stream"
-        />
-      </div>
-      <h3>Toggleable Inverse Filled</h3>
-      <div css={blueBackground}>
-        <ToggleIconButtonWrapper variant={IconButton.Variant.InverseFilled} />
-      </div>
-    </div>
-  ));
-
-storiesOf('Components|Buttons/Button/React/Icon Button Toggle Group', module)
-  .addParameters({component: IconButtonToggleGroup})
-  .addDecorator(withReadme(README))
-  .add('Default', () => (
-    <div className="story">
-      <h3>With Three Buttons</h3>
-      <IconButtonToggleGroupWrapper>
-        <IconButtonToggleGroup>
-          <IconButton icon={listViewIcon} title="List View" aria-label="List View" />
-          <IconButton icon={worksheetsIcon} title="Worksheets" aria-label="Worksheets" />
-          <IconButton icon={percentageIcon} disabled={true} aria-label="Percent View" />
-        </IconButtonToggleGroup>
-      </IconButtonToggleGroupWrapper>
-      <h3>With Four Buttons</h3>
-      <IconButtonToggleGroupWrapper>
-        <IconButtonToggleGroup>
-          <IconButton
-            icon={listViewIcon}
-            value="list-view"
-            title="List View"
-            aria-label="List View"
-          />
-          <IconButton
-            icon={worksheetsIcon}
-            value="table-view"
-            title="Worksheets"
-            aria-label="Worksheets"
-          />
-          <IconButton
-            icon={deviceTabletIcon}
-            value="device-view"
-            title="Device Tablet"
-            aria-label="Device Tablet"
-          />
-          <IconButton
-            icon={percentageIcon}
-            value="percent-view"
-            disabled={true}
-            aria-label="Percent View"
-          />
-        </IconButtonToggleGroup>
-      </IconButtonToggleGroupWrapper>
-      <h3>Right To Left With Four Buttons</h3>
-      <IconButtonToggleGroupWrapper>
-        <IconButtonToggleGroup isRTL={true} value="table-view">
-          <IconButton
-            icon={listViewIcon}
-            value="list-view"
-            title="List View"
-            aria-label="List View"
-          />
-          <IconButton
-            icon={worksheetsIcon}
-            value="table-view"
-            title="Worksheets"
-            aria-label="Worksheets"
-          />
-          <IconButton
-            icon={deviceTabletIcon}
-            value="device-view"
-            title="Device Tablet"
-            aria-label="Device Tablet"
-          />
-          <IconButton
-            icon={percentageIcon}
-            value="percent-view"
-            disabled={true}
-            aria-label="percent-view"
-          />
-        </IconButtonToggleGroup>
-      </IconButtonToggleGroupWrapper>
-    </div>
-  ));
diff --git a/modules/button/react/stories/stories_iconButtonToggle.tsx b/modules/button/react/stories/stories_iconButtonToggle.tsx
deleted file mode 100644
index 6f6b4f5f92..0000000000
--- a/modules/button/react/stories/stories_iconButtonToggle.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-/// <reference path="../../../../typings.d.ts" />
-/** @jsx jsx */
-import {css, jsx, CSSObject} from '@emotion/core';
-import * as React from 'react';
-import {storiesOf} from '@storybook/react';
-import withReadme from 'storybook-readme/with-readme';
-
-import {
-  activityStreamIcon,
-  listViewIcon,
-  worksheetsIcon,
-  deviceTabletIcon,
-  percentageIcon,
-} from '@workday/canvas-system-icons-web';
-
-import {
-  IconButton,
-  IconButtonToggleGroup,
-  IconButtonToggleGroupProps,
-  IconButtonVariant,
-} from '../index';
-
-import README from '../README.md';
-
-const blueBackground: CSSObject = {
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  backgroundColor: '#0875e1',
-  margin: '0 10px',
-  padding: '24px',
-  maxWidth: 'max-content',
-  borderRadius: '4px',
-};
-
-// Wrapper to add state mgmt to IconButtons
-interface ToggleIconButtonWrapperState {
-  isToggled: boolean;
-}
-
-interface ToggleIconButtonWrapperProps {
-  variant: IconButtonVariant;
-}
-
-export class ToggleIconButtonWrapper extends React.Component<
-  ToggleIconButtonWrapperProps,
-  ToggleIconButtonWrapperState
-> {
-  state = {
-    isToggled: false,
-  };
-
-  public render() {
-    return (
-      <IconButton
-        toggled={this.state.isToggled}
-        variant={this.props.variant}
-        onClick={this.handleToggle}
-        icon={activityStreamIcon}
-        aria-label="Activity Stream"
-      />
-    );
-  }
-
-  public handleToggle = () => {
-    this.setState({isToggled: !this.state.isToggled});
-  };
-}
-
-// Wrapper to add state mgmt to IconButtonToggleGroups
-interface IconButtonToggleGroupWrapperState {
-  selectedValue: string | number;
-}
-
-export class IconButtonToggleGroupWrapper extends React.Component<
-  {},
-  IconButtonToggleGroupWrapperState
-> {
-  state = {
-    selectedValue: '',
-  };
-
-  public render() {
-    const child = this.props.children as React.ReactElement<IconButtonToggleGroupProps>;
-    return React.cloneElement(child, {
-      value: this.state.selectedValue === '' ? child.props.value : this.state.selectedValue,
-      onChange: this.handleToggle,
-    });
-  }
-
-  public handleToggle = (selectedValue: string | number) => {
-    this.setState({selectedValue});
-  };
-}
-
-storiesOf('Components|Buttons/Button/React/Icon Button', module)
-  .addParameters({component: IconButton})
-  .addDecorator(withReadme(README))
-  .add('Toggleable', () => (
-    <div className="story">
-      <h3>Square Icon Buttons</h3>
-      <ToggleIconButtonWrapper variant={IconButton.Variant.Square} />
-
-      <h3>Default Icon Buttons</h3>
-      <ToggleIconButtonWrapper variant={IconButton.Variant.Circle} />
-
-      <h3>Filled Icon Buttons</h3>
-      <ToggleIconButtonWrapper variant={IconButton.Variant.CircleFilled} />
-
-      <h3>Inverse Icon Buttons</h3>
-      <div css={css(blueBackground)}>
-        <ToggleIconButtonWrapper variant={IconButton.Variant.Inverse} />
-      </div>
-
-      <h3>Inverse Filled Icon Buttons</h3>
-      <div css={css(blueBackground)}>
-        <ToggleIconButtonWrapper variant={IconButton.Variant.InverseFilled} />
-      </div>
-
-      <h3>Two buttons Grouped</h3>
-      <IconButtonToggleGroupWrapper>
-        <IconButtonToggleGroup>
-          <IconButton
-            icon={listViewIcon}
-            aria-label="List View"
-            onClick={e => {
-              alert("Here's your click event target: " + e.currentTarget);
-            }}
-          />
-          <IconButton aria-label="Worksheets" icon={worksheetsIcon} />
-        </IconButtonToggleGroup>
-      </IconButtonToggleGroupWrapper>
-
-      <h3>Four buttons Grouped</h3>
-      <IconButtonToggleGroupWrapper>
-        <IconButtonToggleGroup>
-          <IconButton icon={listViewIcon} value="list-view" aria-label="List View" />
-          <IconButton icon={worksheetsIcon} value="table-view" aria-label="Table View" />
-          <IconButton icon={deviceTabletIcon} value="device-view" aria-label="Device View" />
-          <IconButton icon={percentageIcon} value="percent-view" aria-label="Percent View" />
-        </IconButtonToggleGroup>
-      </IconButtonToggleGroupWrapper>
-
-      <h3>RTL - w/ initial selected item & disabled item</h3>
-      <IconButtonToggleGroupWrapper>
-        <IconButtonToggleGroup isRTL={true} value="table-view">
-          <IconButton icon={listViewIcon} value="list-view" aria-label="List View" />
-          <IconButton icon={worksheetsIcon} value="table-view" aria-label="Table View" />
-          <IconButton icon={deviceTabletIcon} value="device-view" aria-label="Device View" />
-          <IconButton
-            icon={percentageIcon}
-            value="percent-view"
-            aria-label="Percent View"
-            disabled={true}
-          />
-        </IconButtonToggleGroup>
-      </IconButtonToggleGroupWrapper>
-    </div>
-  ));
diff --git a/modules/button/react/stories/stories_visualTesting.tsx b/modules/button/react/stories/stories_visualTesting.tsx
index 0b6f333253..a38689ff96 100644
--- a/modules/button/react/stories/stories_visualTesting.tsx
+++ b/modules/button/react/stories/stories_visualTesting.tsx
@@ -5,8 +5,17 @@ import * as React from 'react';
 import {storiesOf} from '@storybook/react';
 import {StaticStates} from '@workday/canvas-kit-labs-react-core';
 import {ComponentStatesTable, permutateProps} from '../../../../utils/storybook';
-import {playCircleIcon} from '@workday/canvas-system-icons-web';
-import {Button, DropdownButton, TextButton, IconButton} from '../index';
+import {playCircleIcon, activityStreamIcon} from '@workday/canvas-system-icons-web';
+import {
+  Button,
+  DropdownButton,
+  TextButton,
+  DeleteButton,
+  HighlightButton,
+  OutlineButton,
+  IconButton,
+  deprecated_Button as DeprecatedButton,
+} from '../index';
 
 const buttonLayout: CSSObject = {
   display: 'flex',
@@ -25,41 +34,10 @@ const Container = (props: any) => (
   <div css={props.blue ? blueBackground : buttonLayout}>{props.children}</div>
 );
 
-const ButtonStates = () => (
+const getButtonStates = (rowProps: any, renderFn: (props: any) => React.ReactNode) => (
   <StaticStates>
     <ComponentStatesTable
-      rowProps={permutateProps(
-        {
-          variant: [
-            {value: Button.Variant.Primary, label: 'Primary'},
-            {value: Button.Variant.Secondary, label: 'Secondary'},
-            {value: Button.Variant.Highlight, label: 'Highlight'},
-            {value: Button.Variant.OutlinePrimary, label: 'Outline Primary'},
-            {value: Button.Variant.OutlineSecondary, label: 'Outline Secondary'},
-            {value: Button.Variant.OutlineInverse, label: 'Outline Inverse'},
-            {value: Button.Variant.Delete, label: 'Delete'},
-          ],
-          size: [
-            {value: Button.Size.Small, label: 'Small'},
-            {value: Button.Size.Medium, label: 'Medium'},
-            {value: Button.Size.Large, label: 'Large'},
-          ],
-          icon: [{value: undefined, label: ''}, {value: playCircleIcon, label: 'w/ Icon'}],
-          dataLabel: [{value: undefined, label: ''}, {value: '1:23', label: 'w/ Data Label'}],
-        },
-        props => {
-          if (props.size === Button.Size.Small && (props.icon || props.dataLabel)) {
-            return false;
-          }
-          if (props.variant === Button.Variant.Highlight && !props.icon) {
-            return false;
-          }
-          if (props.variant === Button.Variant.Delete && (props.icon || props.dataLabel)) {
-            return false;
-          }
-          return true;
-        }
-      )}
+      rowProps={permutateProps(rowProps)}
       columnProps={permutateProps(
         {
           className: [
@@ -72,7 +50,7 @@ const ButtonStates = () => (
           ],
           disabled: [{label: '', value: false}, {label: 'Disabled', value: true}],
         },
-        props => {
+        (props: any) => {
           if (props.disabled && !['', 'hover'].includes(props.className)) {
             return false;
           }
@@ -80,19 +58,104 @@ const ButtonStates = () => (
         }
       )}
     >
-      {props => (
-        <Container blue={props.variant === Button.Variant.OutlineInverse}>
-          <Button {...props}>Test</Button>
-        </Container>
-      )}
+      {renderFn}
     </ComponentStatesTable>
   </StaticStates>
 );
 
-const DropdownButtonStates = () => (
-  <StaticStates>
-    <ComponentStatesTable
-      rowProps={permutateProps({
+storiesOf('Components|Buttons/Button/React/Visual Testing/Button', module)
+  .addParameters({
+    component: Button,
+    chromatic: {
+      disable: false,
+    },
+  })
+  .add('States', () =>
+    getButtonStates(
+      {
+        variant: [
+          {value: Button.Variant.Primary, label: 'Primary'},
+          {value: Button.Variant.Secondary, label: 'Secondary'},
+        ],
+        size: [
+          {value: Button.Size.Small, label: 'Small'},
+          {value: Button.Size.Medium, label: 'Medium'},
+          {value: Button.Size.Large, label: 'Large'},
+        ],
+        icon: [{value: undefined, label: ''}, {value: playCircleIcon, label: 'w/ Icon'}],
+        dataLabel: [{value: undefined, label: ''}, {value: '1:23', label: 'w/ Data Label'}],
+      },
+      (props: any) => (
+        <Container>
+          <Button {...props}>Test</Button>
+        </Container>
+      )
+    )
+  );
+
+storiesOf('Components|Buttons/Button/React/Visual Testing/Delete Button', module)
+  .addParameters({
+    component: DeleteButton,
+    chromatic: {
+      disable: false,
+    },
+  })
+  .add('States', () =>
+    getButtonStates(
+      {
+        size: [
+          {value: DeleteButton.Size.Small, label: 'Small'},
+          {value: DeleteButton.Size.Medium, label: 'Medium'},
+          {value: DeleteButton.Size.Large, label: 'Large'},
+        ],
+      },
+      (props: any) => (
+        <Container>
+          <DeleteButton {...props}>Test</DeleteButton>
+        </Container>
+      )
+    )
+  );
+
+storiesOf('Components|Buttons/Button/React/Visual Testing/Deprecated Button', module)
+  .addParameters({
+    component: DeprecatedButton,
+    chromatic: {
+      disable: false,
+    },
+  })
+  .add('States', () =>
+    getButtonStates(
+      {
+        variant: [
+          {value: DeprecatedButton.Variant.Primary, label: 'Primary'},
+          {value: DeprecatedButton.Variant.Secondary, label: 'Secondary'},
+          {value: DeprecatedButton.Variant.Delete, label: 'Delete'},
+        ],
+        size: [
+          {value: Button.Size.Small, label: 'Small'},
+          {value: Button.Size.Medium, label: 'Medium'},
+          {value: Button.Size.Large, label: 'Large'},
+        ],
+      },
+      (props: any) => (
+        <Container>
+          <DeprecatedButton {...props}>Test</DeprecatedButton>
+        </Container>
+      )
+    )
+  );
+
+storiesOf('Components|Buttons/Button/React/Visual Testing/Dropdown Button', module)
+  .addParameters({
+    component: DropdownButton,
+    chromatic: {
+      disable: false,
+    },
+  })
+  .add('States', () =>
+    getButtonStates(
+      {
         variant: [
           {value: DropdownButton.Variant.Primary, label: 'Primary'},
           {value: DropdownButton.Variant.Secondary, label: 'Secondary'},
@@ -101,176 +164,101 @@ const DropdownButtonStates = () => (
           {value: DropdownButton.Size.Medium, label: 'Medium'},
           {value: DropdownButton.Size.Large, label: 'Large'},
         ],
-      })}
-      columnProps={permutateProps(
-        {
-          className: [
-            {label: 'Default', value: ''},
-            {label: 'Hover', value: 'hover'},
-            {label: 'Focus', value: 'focus'},
-            {label: 'Focus Hover', value: 'focus hover'},
-            {label: 'Active', value: 'active'},
-            {label: 'Active Hover', value: 'active hover'},
-          ],
-          disabled: [{label: '', value: false}, {label: 'Disabled', value: true}],
-        },
-        props => {
-          if (props.disabled && !['', 'hover'].includes(props.className)) {
-            return false;
-          }
-          return true;
-        }
-      )}
-    >
-      {props => (
+        icon: [{value: undefined, label: ''}, {value: playCircleIcon, label: 'w/ Icon'}],
+        dataLabel: [{value: undefined, label: ''}, {value: '1:23', label: 'w/ Data Label'}],
+      },
+      (props: any) => (
         <Container>
           <DropdownButton {...props}>Test</DropdownButton>
         </Container>
-      )}
-    </ComponentStatesTable>
-  </StaticStates>
-);
+      )
+    )
+  );
 
-const TextButtonStates = () => (
-  <StaticStates>
-    <ComponentStatesTable
-      rowProps={permutateProps(
-        {
-          variant: [
-            {value: TextButton.Variant.Default, label: 'Default'},
-            {value: TextButton.Variant.AllCaps, label: 'All Caps'},
-            {value: TextButton.Variant.Inverse, label: 'Inverse'},
-            {value: TextButton.Variant.InverseAllCaps, label: 'Inverse All Caps'},
-          ],
-          size: [
-            {value: TextButton.Size.Small, label: 'Small'},
-            {value: TextButton.Size.Large, label: 'Large'},
-          ],
-          icon: [{value: undefined, label: ''}, {value: playCircleIcon, label: 'w/ Icon'}],
-        },
-        props => {
-          return true;
-        }
-      )}
-      columnProps={permutateProps(
-        {
-          className: [
-            {label: 'Default', value: ''},
-            {label: 'Hover', value: 'hover'},
-            {label: 'Focus', value: 'focus'},
-            {label: 'Focus Hover', value: 'focus hover'},
-            {label: 'Active', value: 'active'},
-            {label: 'Active Hover', value: 'active hover'},
-          ],
-          disabled: [{label: '', value: false}, {label: 'Disabled', value: true}],
-        },
-        props => {
-          if (props.disabled && !['', 'hover'].includes(props.className)) {
-            return false;
-          }
-          return true;
-        }
-      )}
-    >
-      {props => (
-        <Container
-          blue={[TextButton.Variant.Inverse, TextButton.Variant.InverseAllCaps].includes(
-            props.variant
-          )}
-        >
-          <TextButton {...props}>Test</TextButton>
-        </Container>
-      )}
-    </ComponentStatesTable>
-  </StaticStates>
-);
-
-const IconButtonStates = () => (
-  <React.Fragment>
-    {[false, true].map(toggled => (
-      <div>
-        <h3>Toggled {toggled ? 'On' : 'Off'}</h3>
-        <StaticStates>
-          <ComponentStatesTable
-            rowProps={permutateProps({
-              variant: [
-                {value: IconButton.Variant.Inverse, label: 'Inverse'},
-                {value: IconButton.Variant.InverseFilled, label: 'Inverse Filled'},
-                {value: IconButton.Variant.Plain, label: 'Plain'},
-                {value: IconButton.Variant.Circle, label: 'Circle'},
-                {value: IconButton.Variant.CircleFilled, label: 'Circle Filled'},
-                {value: IconButton.Variant.Square, label: 'Square'},
-                {value: IconButton.Variant.SquareFilled, label: 'Square Filled'},
-              ],
-            })}
-            columnProps={permutateProps(
-              {
-                className: [
-                  {label: 'Default', value: ''},
-                  {label: 'Hover', value: 'hover'},
-                  {label: 'Focus', value: 'focus'},
-                  {label: 'Focus Hover', value: 'focus hover'},
-                  {label: 'Active', value: 'active'},
-                  {label: 'Active Hover', value: 'active hover'},
-                ],
-                disabled: [{label: '', value: false}, {label: 'Disabled', value: true}],
-              },
-              props => {
-                if (props.disabled && !['', 'hover'].includes(props.className)) {
-                  return false;
-                }
-                return true;
-              }
-            )}
-          >
-            {props => (
-              <Container
-                blue={[IconButton.Variant.Inverse, IconButton.Variant.InverseFilled].includes(
-                  props.variant
-                )}
-              >
-                <IconButton
-                  toggled={toggled}
-                  icon={playCircleIcon}
-                  aria-label="Play"
-                  {...props}
-                  onChange={() => {}} // eslint-disable-line no-empty-function
-                />
-              </Container>
-            )}
-          </ComponentStatesTable>
-        </StaticStates>
-      </div>
-    ))}
-  </React.Fragment>
-);
-
-storiesOf('Components|Buttons/Button/React/Visual Testing/Button', module)
+storiesOf('Components|Buttons/Button/React/Visual Testing/Highlight Button', module)
   .addParameters({
-    component: Button,
+    component: HighlightButton,
     chromatic: {
       disable: false,
     },
   })
-  .add('States', () => <ButtonStates />);
+  .add('States', () =>
+    getButtonStates(
+      {
+        size: [
+          {value: Button.Size.Small, label: 'Small'},
+          {value: Button.Size.Medium, label: 'Medium'},
+          {value: Button.Size.Large, label: 'Large'},
+        ],
+        icon: [{value: undefined, label: ''}, {value: playCircleIcon, label: 'w/ Icon'}],
+      },
+      (props: any) => (
+        <Container>
+          <HighlightButton {...props}>Test</HighlightButton>
+        </Container>
+      )
+    )
+  );
 
-storiesOf('Components|Buttons/Button/React/Visual Testing/Dropdown', module)
+storiesOf('Components|Buttons/Button/React/Visual Testing/Outline Button', module)
   .addParameters({
-    component: DropdownButton,
+    component: Button,
     chromatic: {
       disable: false,
     },
   })
-  .add('States', () => <DropdownButtonStates />);
+  .add('States', () =>
+    getButtonStates(
+      {
+        variant: [
+          {value: OutlineButton.Variant.Primary, label: 'Outline Primary'},
+          {value: OutlineButton.Variant.Secondary, label: 'Outline Secondary'},
+          {value: OutlineButton.Variant.Inverse, label: 'Outline Inverse'},
+        ],
+        size: [
+          {value: Button.Size.Small, label: 'Small'},
+          {value: Button.Size.Medium, label: 'Medium'},
+          {value: Button.Size.Large, label: 'Large'},
+        ],
+        icon: [{value: undefined, label: ''}, {value: playCircleIcon, label: 'w/ Icon'}],
+        dataLabel: [{value: undefined, label: ''}, {value: '1:23', label: 'w/ Data Label'}],
+      },
+      (props: any) => (
+        <Container blue={props.variant === OutlineButton.Variant.Inverse}>
+          <OutlineButton {...props}>Test</OutlineButton>
+        </Container>
+      )
+    )
+  );
 
-storiesOf('Components|Buttons/Button/React/Visual Testing/Text', module)
+storiesOf('Components|Buttons/Button/React/Visual Testing/Text Button', module)
   .addParameters({
     component: TextButton,
     chromatic: {
       disable: false,
     },
   })
-  .add('States', () => <TextButtonStates />);
+  .add('States', () =>
+    getButtonStates(
+      {
+        variant: [
+          {value: TextButton.Variant.Default, label: 'Default'},
+          {value: TextButton.Variant.Inverse, label: 'Inverse'},
+        ],
+        size: [
+          {value: TextButton.Size.Small, label: 'Small'},
+          {value: TextButton.Size.Medium, label: 'Medium'},
+        ],
+        icon: [{value: undefined, label: ''}, {value: playCircleIcon, label: 'w/ Icon'}],
+        allCaps: [{value: undefined, label: ''}, {value: true, label: 'All Caps'}],
+      },
+      (props: any) => (
+        <Container blue={props.variant === TextButton.Variant.Inverse}>
+          <TextButton {...props}>Test</TextButton>
+        </Container>
+      )
+    )
+  );
 
 storiesOf('Components|Buttons/Button/React/Visual Testing/Icon Button', module)
   .addParameters({
@@ -279,4 +267,44 @@ storiesOf('Components|Buttons/Button/React/Visual Testing/Icon Button', module)
       disable: false,
     },
   })
-  .add('States', () => <IconButtonStates />);
+  .add('States', () => (
+    <React.Fragment>
+      {[false, true].map(toggled => (
+        <div key={`toggled-${toggled}`}>
+          <h3>Toggled {toggled ? 'On' : 'Off'}</h3>
+          {getButtonStates(
+            {
+              variant: [
+                {value: IconButton.Variant.Inverse, label: 'Inverse'},
+                {value: IconButton.Variant.InverseFilled, label: 'Inverse Filled'},
+                {value: IconButton.Variant.Plain, label: 'Plain'},
+                {value: IconButton.Variant.Circle, label: 'Circle'},
+                {value: IconButton.Variant.CircleFilled, label: 'Circle Filled'},
+                {value: IconButton.Variant.Square, label: 'Square'},
+                {value: IconButton.Variant.SquareFilled, label: 'Square Filled'},
+              ],
+              size: [
+                {value: IconButton.Size.Small, label: 'Small'},
+                {value: IconButton.Size.Medium, label: 'Medium'},
+              ],
+            },
+            (props: any) => (
+              <Container
+                blue={[IconButton.Variant.Inverse, IconButton.Variant.InverseFilled].includes(
+                  props.variant
+                )}
+              >
+                <IconButton
+                  toggled={toggled}
+                  icon={activityStreamIcon}
+                  aria-label="Play"
+                  {...props}
+                  onChange={() => {}} // eslint-disable-line no-empty-function
+                />
+              </Container>
+            )
+          )}
+        </div>
+      ))}
+    </React.Fragment>
+  ));
diff --git a/modules/button/react/tsconfig.cjs.json b/modules/button/react/tsconfig.cjs.json
new file mode 100644
index 0000000000..261641fcc9
--- /dev/null
+++ b/modules/button/react/tsconfig.cjs.json
@@ -0,0 +1,11 @@
+
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "module": "commonjs",
+    "outDir": "dist/commonjs",
+    "skipLibCheck": true,
+    "tsBuildInfoFile": "./.build-info/tsconfig.cjs.tsbuildinfo"
+  }
+}
diff --git a/modules/button/react/tsconfig.es6.json b/modules/button/react/tsconfig.es6.json
index 601797a826..cdf8edae25 100644
--- a/modules/button/react/tsconfig.es6.json
+++ b/modules/button/react/tsconfig.es6.json
@@ -1,3 +1,4 @@
+
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
diff --git a/modules/modal/react/stories/stories.tsx b/modules/modal/react/stories/stories.tsx
index 0bfaaf399b..ec23aa7ce4 100644
--- a/modules/modal/react/stories/stories.tsx
+++ b/modules/modal/react/stories/stories.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import {storiesOf} from '@storybook/react';
 import withReadme from 'storybook-readme/with-readme';
 
-import {Button} from '../../../button/react';
+import {Button, DeleteButton} from '../../../button/react';
 import Modal, {useModal} from '..';
 import README from '../README.md';
 
@@ -22,14 +22,14 @@ const DefaultModalExample = () => {
 
   return (
     <>
-      <Button variant={Button.Variant.Delete} buttonRef={buttonRef} onClick={openModal}>
+      <DeleteButton buttonRef={buttonRef} onClick={openModal}>
         Delete Item
-      </Button>
+      </DeleteButton>
       <Modal data-testid="TestModal" heading="Delete Item" open={open} handleClose={closeModal}>
         <p>Are you sure you'd like to delete the item titled 'My Item'?</p>
-        <Button style={{marginRight: '16px'}} onClick={closeModal} variant={Button.Variant.Delete}>
+        <DeleteButton style={{marginRight: '16px'}} onClick={closeModal}>
           Delete
-        </Button>
+        </DeleteButton>
         <Button onClick={closeModal} variant={Button.Variant.Secondary}>
           Cancel
         </Button>
@@ -43,14 +43,12 @@ const UseModalExample = () => {
 
   return (
     <>
-      <Button variant={Button.Variant.Delete} {...targetProps}>
-        Delete Item
-      </Button>
+      <DeleteButton {...targetProps}>Delete Item</DeleteButton>
       <Modal data-testid="TestModal" heading={'Delete Item'} {...modalProps}>
         <p>Are you sure you'd like to delete the item titled 'My Item'?</p>
-        <Button style={{marginRight: '16px'}} onClick={closeModal} variant={Button.Variant.Delete}>
+        <DeleteButton style={{marginRight: '16px'}} onClick={closeModal}>
           Delete
-        </Button>
+        </DeleteButton>
         <Button onClick={closeModal} variant={Button.Variant.Secondary}>
           Cancel
         </Button>
@@ -64,9 +62,7 @@ const NoCloseModalExample = () => {
 
   return (
     <>
-      <Button variant={Button.Variant.Delete} {...targetProps}>
-        Delete Item
-      </Button>
+      <DeleteButton {...targetProps}>Delete Item</DeleteButton>
       <Modal
         data-testid="TestModal"
         heading={'Delete Item'}
@@ -74,9 +70,9 @@ const NoCloseModalExample = () => {
         handleClose={undefined}
       >
         <p>Are you sure you'd like to delete the item titled 'My Item'?</p>
-        <Button style={{marginRight: '16px'}} onClick={closeModal} variant={Button.Variant.Delete}>
+        <DeleteButton style={{marginRight: '16px'}} onClick={closeModal}>
           Delete
-        </Button>
+        </DeleteButton>
         <Button onClick={closeModal} variant={Button.Variant.Secondary}>
           Cancel
         </Button>
@@ -91,9 +87,7 @@ const CustomFocusModalExample = () => {
 
   return (
     <>
-      <Button variant={Button.Variant.Delete} {...targetProps}>
-        Delete Item
-      </Button>
+      <DeleteButton {...targetProps}>Delete Item</DeleteButton>
       <Modal
         data-testid="TestModal"
         heading={'Delete Item'}
@@ -102,9 +96,9 @@ const CustomFocusModalExample = () => {
         handleClose={undefined}
       >
         <p>Are you sure you'd like to delete the item titled 'My Item'?</p>
-        <Button style={{marginRight: '16px'}} onClick={closeModal} variant={Button.Variant.Delete}>
+        <DeleteButton style={{marginRight: '16px'}} onClick={closeModal}>
           Delete
-        </Button>
+        </DeleteButton>
         <Button onClick={closeModal} variant={Button.Variant.Secondary} buttonRef={buttonRef}>
           Cancel
         </Button>