diff --git a/change/@fluentui-react-button-1b2e69bc-f82f-49a8-a211-b843e3bef591.json b/change/@fluentui-react-button-1b2e69bc-f82f-49a8-a211-b843e3bef591.json
new file mode 100644
index 00000000000000..7798f21e352731
--- /dev/null
+++ b/change/@fluentui-react-button-1b2e69bc-f82f-49a8-a211-b843e3bef591.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Button: Migrate to new dx",
+  "packageName": "@fluentui/react-button",
+  "email": "tristan.watanabe@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-examples-28ae56c7-be37-496c-a550-ccfd1b3180c6.json b/change/@fluentui-react-examples-28ae56c7-be37-496c-a550-ccfd1b3180c6.json
new file mode 100644
index 00000000000000..eaa823b99844a7
--- /dev/null
+++ b/change/@fluentui-react-examples-28ae56c7-be37-496c-a550-ccfd1b3180c6.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Button: Migrate to new dx",
+  "packageName": "@fluentui/react-examples",
+  "email": "tristan.watanabe@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/jest.config.js b/jest.config.js
index f8e81fbc426d0f..383b2a34ced9a6 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -25,6 +25,7 @@ module.exports = {
     '<rootDir>/packages/react-utilities',
     '<rootDir>/packages/react-theme',
     '<rootDir>/packages/react-badge',
+    '<rootDir>/packages/react-button',
     '<rootDir>/packages/keyboard-keys',
     '<rootDir>/packages/react-slider',
     '<rootDir>/packages/make-styles-webpack-loader',
diff --git a/nx.json b/nx.json
index 4c7ba658614432..35f0c511ed029c 100644
--- a/nx.json
+++ b/nx.json
@@ -77,7 +77,7 @@
     "@fluentui/react-accordion": { "tags": ["vNext"], "implicitDependencies": [] },
     "@fluentui/react-avatar": { "tags": ["vNext", "platform:web"], "implicitDependencies": [] },
     "@fluentui/react-badge": { "tags": ["vNext", "platform:web"], "implicitDependencies": [] },
-    "@fluentui/react-button": { "implicitDependencies": [] },
+    "@fluentui/react-button": { "tags": ["vNext", "platform:web"], "implicitDependencies": [] },
     "@fluentui/react-card": { "implicitDependencies": [] },
     "@fluentui/react-cards": { "implicitDependencies": [] },
     "@fluentui/react-charting": { "implicitDependencies": [] },
diff --git a/packages/react-button/.storybook/main.js b/packages/react-button/.storybook/main.js
new file mode 100644
index 00000000000000..f47245f2d07f01
--- /dev/null
+++ b/packages/react-button/.storybook/main.js
@@ -0,0 +1,11 @@
+const rootMain = require('../../../.storybook/main');
+
+module.exports = /** @type {Pick<import('../../../.storybook/main').StorybookConfig,'addons'|'stories'|'webpackFinal'>} */ ({
+  stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/*.stories.@(ts|tsx)'],
+  addons: [...rootMain.addons],
+  webpackFinal: (config, options) => {
+    const localConfig = { ...rootMain.webpackFinal(config, options) };
+
+    return localConfig;
+  },
+});
diff --git a/packages/react-button/.storybook/preview.js b/packages/react-button/.storybook/preview.js
new file mode 100644
index 00000000000000..b52409294c3304
--- /dev/null
+++ b/packages/react-button/.storybook/preview.js
@@ -0,0 +1,3 @@
+import * as rootPreview from '../../../.storybook/preview';
+
+export const decorators = [...rootPreview.decorators];
diff --git a/packages/react-button/.storybook/tsconfig.json b/packages/react-button/.storybook/tsconfig.json
new file mode 100644
index 00000000000000..3bd9adcd2ee05e
--- /dev/null
+++ b/packages/react-button/.storybook/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true
+  },
+  "exclude": ["../**/*.test.ts", "../**/*.test.js", "../**/*.test.tsx", "../**/*.test.jsx"],
+  "include": ["../src/**/*", "*.js"]
+}
diff --git a/packages/react-button/config/api-extractor.local.json b/packages/react-button/config/api-extractor.local.json
new file mode 100644
index 00000000000000..c2ea401c1c3685
--- /dev/null
+++ b/packages/react-button/config/api-extractor.local.json
@@ -0,0 +1,5 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
+  "extends": "./api-extractor.json",
+  "mainEntryPointFilePath": "<projectFolder>/dist/<unscopedPackageName>/src/index.d.ts"
+}
diff --git a/packages/react-button/jest.config.js b/packages/react-button/jest.config.js
index c2a9e205df8e6d..4a890cb7c1bc1e 100644
--- a/packages/react-button/jest.config.js
+++ b/packages/react-button/jest.config.js
@@ -1,9 +1,21 @@
-const { createConfig } = require('@fluentui/scripts/jest/jest-resources');
-const path = require('path');
+// @ts-check
 
-const config = createConfig({
-  setupFiles: [path.resolve(path.join(__dirname, 'config', 'tests.js'))],
+/**
+ * @type {jest.InitialOptions}
+ */
+module.exports = {
+  displayName: 'react-button',
+  preset: '../../jest.preset.js',
+  globals: {
+    'ts-jest': {
+      tsConfig: '<rootDir>/tsconfig.json',
+      diagnostics: false,
+    },
+  },
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+  },
+  coverageDirectory: './coverage',
+  setupFilesAfterEnv: ['./config/tests.js'],
   snapshotSerializers: ['@fluentui/jest-serializer-make-styles'],
-});
-
-module.exports = config;
+};
diff --git a/packages/react-button/package.json b/packages/react-button/package.json
index 51379bbd43a625..46c24c138a09fb 100644
--- a/packages/react-button/package.json
+++ b/packages/react-button/package.json
@@ -17,10 +17,11 @@
     "code-style": "just-scripts code-style",
     "just": "just-scripts",
     "lint": "just-scripts lint",
-    "start": "just-scripts dev:storybook",
-    "start-test": "just-scripts jest-watch",
-    "test": "just-scripts test",
-    "update-snapshots": "just-scripts jest -u"
+    "start": "yarn storybook",
+    "test": "jest",
+    "docs": "api-extractor run --config=config/api-extractor.local.json --local",
+    "build:local": "tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/packages/react-button/src && yarn docs",
+    "storybook": "start-storybook"
   },
   "devDependencies": {
     "@fluentui/a11y-testing": "^0.1.0",
diff --git a/packages/react-examples/src/react-button/Button/Button.stories.tsx b/packages/react-button/src/Button.stories.tsx
similarity index 65%
rename from packages/react-examples/src/react-button/Button/Button.stories.tsx
rename to packages/react-button/src/Button.stories.tsx
index ce064f21541a7a..d1c6754cf9e7d8 100644
--- a/packages/react-examples/src/react-button/Button/Button.stories.tsx
+++ b/packages/react-button/src/Button.stories.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { Button, ButtonProps } from '@fluentui/react-button';
-import { Playground } from '../Playground';
-import { PlaygroundProps, PropDefinition } from '../Playground.types';
+import { Button, ButtonProps } from './Button';
+import { Playground } from './Playground.stories';
+import { PlaygroundProps } from './Playground.types.stories';
+import { buttonBaseProps } from './buttonBaseProps.stories';
 
 // TODO: this is here while waiting for react-icons to merge
 const SVGIcon = () => (
@@ -101,29 +102,6 @@ export const Disabled = () => (
   </>
 );
 
-type ExampleProps = { iconOnly?: string };
-
-export const buttonBaseProps: PropDefinition<ButtonProps & ExampleProps>[] = [
-  { propName: 'block', propType: 'boolean' },
-  { propName: 'circular', propType: 'boolean' },
-  { propName: 'content', propType: 'string', defaultValue: 'This is a button', dependsOnProps: ['~iconOnly'] },
-  { propName: 'disabled', propType: 'boolean', dependsOnProps: ['~disabledFocusable'] },
-  { propName: 'disabledFocusable', propType: 'boolean', dependsOnProps: ['~disabled'] },
-  { propName: 'icon', propType: 'boolean' },
-  { propName: 'iconOnly', propType: 'boolean', dependsOnProps: ['icon'] },
-  {
-    propName: 'iconPosition',
-    propType: ['before', 'after'],
-    defaultValue: 'before',
-    dependsOnProps: ['icon', '~iconOnly'],
-  },
-  { propName: 'outline', propType: 'boolean', dependsOnProps: ['~primary', '~subtle', '~transparent'] },
-  { propName: 'primary', propType: 'boolean', dependsOnProps: ['~outline', '~subtle', '~transparent'] },
-  { propName: 'size', propType: ['small', 'medium', 'large'], defaultValue: 'medium' },
-  { propName: 'subtle', propType: 'boolean', dependsOnProps: ['~outline', '~primary', '~transparent'] },
-  { propName: 'transparent', propType: 'boolean', dependsOnProps: ['~outline', '~primary', '~subtle'] },
-];
-
 const buttonProps: PlaygroundProps<ButtonProps>['sections'] = [
   { sectionName: 'Button props', propList: buttonBaseProps },
 ];
@@ -133,3 +111,8 @@ export const ButtonPlayground = () => (
     <Button />
   </Playground>
 );
+
+export default {
+  title: 'Components/Button',
+  component: Button,
+};
diff --git a/packages/react-examples/src/react-button/CompoundButton/CompoundButton.stories.tsx b/packages/react-button/src/CompoundButton.stories.tsx
similarity index 66%
rename from packages/react-examples/src/react-button/CompoundButton/CompoundButton.stories.tsx
rename to packages/react-button/src/CompoundButton.stories.tsx
index e1363907643318..805c17c9179625 100644
--- a/packages/react-examples/src/react-button/CompoundButton/CompoundButton.stories.tsx
+++ b/packages/react-button/src/CompoundButton.stories.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { CompoundButton, CompoundButtonProps } from '@fluentui/react-button';
-import { buttonBaseProps } from '../Button/Button.stories';
-import { Playground } from '../Playground';
-import { PlaygroundProps, PropDefinition } from '../Playground.types';
+import { CompoundButton, CompoundButtonProps } from './CompoundButton';
+import { Playground } from './Playground.stories';
+import { PlaygroundProps, PropDefinition } from './Playground.types.stories';
+import { buttonBaseProps } from './buttonBaseProps.stories';
 
 type ExampleProps = { iconOnly?: string };
 
@@ -25,3 +25,8 @@ export const CompoundButtonPlayground = () => (
     <CompoundButton />
   </Playground>
 );
+
+export default {
+  title: 'Components/CompoundButton',
+  component: CompoundButton,
+};
diff --git a/packages/react-examples/src/react-button/MenuButton/MenuButton.stories.tsx b/packages/react-button/src/MenuButton.stories.tsx
similarity index 64%
rename from packages/react-examples/src/react-button/MenuButton/MenuButton.stories.tsx
rename to packages/react-button/src/MenuButton.stories.tsx
index dbb584e1743b80..f245c0dcebcea6 100644
--- a/packages/react-examples/src/react-button/MenuButton/MenuButton.stories.tsx
+++ b/packages/react-button/src/MenuButton.stories.tsx
@@ -1,9 +1,11 @@
 import * as React from 'react';
-import { MenuButton, MenuButtonProps } from '@fluentui/react-button';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
 import { Menu, MenuItem, MenuList, MenuProps, MenuTrigger } from '@fluentui/react-menu';
-import { buttonBaseProps } from '../Button/Button.stories';
-import { Playground } from '../Playground';
-import { PlaygroundProps } from '../Playground.types';
+import { MenuButton, MenuButtonProps } from './MenuButton';
+import { Playground } from './Playground.stories';
+import { PlaygroundProps } from './Playground.types.stories';
+import { buttonBaseProps } from './buttonBaseProps.stories';
 
 const ExampleMenu = (props: MenuButtonProps): JSX.Element => (
   <Menu>
@@ -29,3 +31,8 @@ export const MenuButtonPlayground = () => {
     </Playground>
   );
 };
+
+export default {
+  title: 'Components/MenuButton',
+  component: MenuButton,
+};
diff --git a/packages/react-examples/src/react-button/Playground.tsx b/packages/react-button/src/Playground.stories.tsx
similarity index 80%
rename from packages/react-examples/src/react-button/Playground.tsx
rename to packages/react-button/src/Playground.stories.tsx
index a07660129cf1af..1cb073747c4dd3 100644
--- a/packages/react-examples/src/react-button/Playground.tsx
+++ b/packages/react-button/src/Playground.stories.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { Checkbox, Dropdown, IDropdownOption, Stack, Text, TextField } from '@fluentui/react';
-import { PlaygroundProps } from './Playground.types';
+import { Checkbox, Dropdown, IDropdownOption, TextField } from './tmp-components.stories';
+import { PlaygroundProps } from './Playground.types.stories';
+import { makeStyles } from '@fluentui/react-make-styles';
 
 const tableStyle: React.CSSProperties = {
   border: '1px solid black',
@@ -10,8 +11,39 @@ const cellStyle: React.CSSProperties = {
   padding: '5px',
 };
 
+const useStyles = makeStyles({
+  stack: {
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'nowrap',
+    width: 'auto',
+    height: 'auto',
+    boxSizing: 'border-box',
+    justifyContent: 'center',
+  },
+
+  checkbox: {
+    position: 'relative',
+    display: 'flex',
+    flexShrink: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '20px',
+    width: '20px',
+    border: `1px solid rgb(50, 49, 48)`,
+    borderRadius: '2px',
+    boxSizing: 'border-box',
+    transitionProperty: 'background, border, border-color',
+    transitionDuration: '200ms',
+    transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.23, 1)',
+    overflow: 'hidden',
+    marginRight: '4px',
+  },
+});
+
 export const Playground = function <TType>(props: PlaygroundProps<TType>): JSX.Element {
   const { children, sections } = props;
+  const styles = useStyles();
 
   const [componentProps, setComponentProps] = React.useState<{ [key in string]: boolean | string } | null>(null);
   const newProps: { [key in string]: boolean | string } = {};
@@ -54,7 +86,9 @@ export const Playground = function <TType>(props: PlaygroundProps<TType>): JSX.E
         }
 
         const onBooleanPropChange = (ev?: React.FormEvent<HTMLElement | HTMLInputElement>, checked?: boolean) => {
-          const newComponentProps: { [key in string]: boolean | string } = { ...componentProps };
+          const newComponentProps: { [key in string]: boolean | string } = {
+            ...componentProps,
+          };
           newComponentProps[propName] = checked || false;
           setComponentProps(newComponentProps);
           prop.setDefaultValue?.(checked || false);
@@ -71,8 +105,8 @@ export const Playground = function <TType>(props: PlaygroundProps<TType>): JSX.E
                     : (prop.defaultValue as boolean)
                 }
                 disabled={!isPropEnabled}
-                // eslint-disable-next-line react/jsx-no-bind
                 onChange={onBooleanPropChange}
+                styles={styles.checkbox}
               />
             </td>
           </tr>,
@@ -84,7 +118,9 @@ export const Playground = function <TType>(props: PlaygroundProps<TType>): JSX.E
           ev?: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
           newValue?: string,
         ) => {
-          const newComponentProps: { [key in string]: boolean | string } = { ...componentProps };
+          const newComponentProps: { [key in string]: boolean | string } = {
+            ...componentProps,
+          };
           newComponentProps[propName] = newValue || '';
           setComponentProps(newComponentProps);
         };
@@ -100,7 +136,6 @@ export const Playground = function <TType>(props: PlaygroundProps<TType>): JSX.E
                     : (prop.defaultValue as string)
                 }
                 disabled={!isPropEnabled}
-                // eslint-disable-next-line react/jsx-no-bind
                 onChange={onStringPropChange}
               />
             </td>
@@ -111,11 +146,13 @@ export const Playground = function <TType>(props: PlaygroundProps<TType>): JSX.E
         newProps[propName] = (componentProps && componentProps[propName]) || prop.defaultValue || propType[0];
 
         const onOptionsPropChange = (
-          ev?: React.FormEvent<HTMLDivElement>,
-          option?: IDropdownOption<any>,
+          ev?: React.FormEvent<HTMLSelectElement>,
+          option?: IDropdownOption,
           index?: number,
         ) => {
-          const newComponentProps: { [key in string]: boolean | string } = { ...componentProps };
+          const newComponentProps: { [key in string]: boolean | string } = {
+            ...componentProps,
+          };
           if (option) {
             newComponentProps[propName] = (option.key as string) || '';
             setComponentProps(newComponentProps);
@@ -134,7 +171,6 @@ export const Playground = function <TType>(props: PlaygroundProps<TType>): JSX.E
                     : (defaultSelectedKey as string)
                 }
                 options={propType.map(value => ({ key: value, text: value }))}
-                // eslint-disable-next-line react/jsx-no-bind
                 onChange={onOptionsPropChange}
               />
             </td>
@@ -146,7 +182,7 @@ export const Playground = function <TType>(props: PlaygroundProps<TType>): JSX.E
       <React.Fragment key={section.sectionName}>
         <tr>
           <td style={cellStyle} colSpan={2}>
-            <Text variant="medium">{section.sectionName}</Text>
+            <text>{section.sectionName}</text>
           </td>
         </tr>
         {sectionList}
@@ -166,7 +202,7 @@ export const Playground = function <TType>(props: PlaygroundProps<TType>): JSX.E
 
   return (
     <>
-      <Stack horizontalAlign="center">{React.cloneElement(children, elementProps || {})}</Stack>
+      <div className={styles.stack}>{React.cloneElement(children, elementProps || {})}</div>
       <table style={tableStyle} cellSpacing={0}>
         <tbody>{playgroundSections}</tbody>
       </table>
diff --git a/packages/react-examples/src/react-button/Playground.types.ts b/packages/react-button/src/Playground.types.stories.ts
similarity index 95%
rename from packages/react-examples/src/react-button/Playground.types.ts
rename to packages/react-button/src/Playground.types.stories.ts
index 8d17095e4832b3..450983b4ec6d21 100644
--- a/packages/react-examples/src/react-button/Playground.types.ts
+++ b/packages/react-button/src/Playground.types.stories.ts
@@ -1,7 +1,5 @@
 import * as React from 'react';
 
-/* eslint-disable @typescript-eslint/naming-convention */
-
 /** Type to get only the string keys of T. */
 type StringKeyOf<T> = { [K in keyof T]: K extends string ? K : never }[keyof T];
 
diff --git a/packages/react-examples/src/react-button/ToggleButton/ToggleButton.stories.tsx b/packages/react-button/src/ToggleButton.stories.tsx
similarity index 77%
rename from packages/react-examples/src/react-button/ToggleButton/ToggleButton.stories.tsx
rename to packages/react-button/src/ToggleButton.stories.tsx
index f803ba2c97f89e..7ecb231c297e19 100644
--- a/packages/react-examples/src/react-button/ToggleButton/ToggleButton.stories.tsx
+++ b/packages/react-button/src/ToggleButton.stories.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { ToggleButton, ToggleButtonProps } from '@fluentui/react-button';
 import { useBoolean } from '@fluentui/react-utilities';
-import { buttonBaseProps } from '../Button/Button.stories';
-import { Playground } from '../Playground';
-import { PlaygroundProps, PropDefinition } from '../Playground.types';
+import { ToggleButton, ToggleButtonProps } from './ToggleButton';
+import { Playground } from './Playground.stories';
+import { PlaygroundProps, PropDefinition } from './Playground.types.stories';
+import { buttonBaseProps } from './buttonBaseProps.stories';
 
 export const ToggleButtonPlayground = () => {
   const [checked, { setTrue: setTrueChecked, setFalse: setFalseChecked, toggle: toggleChecked }] = useBoolean(false);
@@ -43,3 +43,8 @@ export const ToggleButtonPlayground = () => {
     </Playground>
   );
 };
+
+export default {
+  title: 'Components/ToggleButton',
+  component: ToggleButton,
+};
diff --git a/packages/react-button/src/buttonBaseProps.stories.ts b/packages/react-button/src/buttonBaseProps.stories.ts
new file mode 100644
index 00000000000000..96cf85cd477e29
--- /dev/null
+++ b/packages/react-button/src/buttonBaseProps.stories.ts
@@ -0,0 +1,25 @@
+import { ButtonProps } from './Button';
+import { PropDefinition } from './Playground.types.stories';
+
+type ExampleProps = { iconOnly?: string };
+
+export const buttonBaseProps: PropDefinition<ButtonProps & ExampleProps>[] = [
+  { propName: 'block', propType: 'boolean' },
+  { propName: 'circular', propType: 'boolean' },
+  { propName: 'content', propType: 'string', defaultValue: 'This is a button', dependsOnProps: ['~iconOnly'] },
+  { propName: 'disabled', propType: 'boolean', dependsOnProps: ['~disabledFocusable'] },
+  { propName: 'disabledFocusable', propType: 'boolean', dependsOnProps: ['~disabled'] },
+  { propName: 'icon', propType: 'boolean' },
+  { propName: 'iconOnly', propType: 'boolean', dependsOnProps: ['icon'] },
+  {
+    propName: 'iconPosition',
+    propType: ['before', 'after'],
+    defaultValue: 'before',
+    dependsOnProps: ['icon', '~iconOnly'],
+  },
+  { propName: 'outline', propType: 'boolean', dependsOnProps: ['~primary', '~subtle', '~transparent'] },
+  { propName: 'primary', propType: 'boolean', dependsOnProps: ['~outline', '~subtle', '~transparent'] },
+  { propName: 'size', propType: ['small', 'medium', 'large'], defaultValue: 'medium' },
+  { propName: 'subtle', propType: 'boolean', dependsOnProps: ['~outline', '~primary', '~transparent'] },
+  { propName: 'transparent', propType: 'boolean', dependsOnProps: ['~outline', '~primary', '~subtle'] },
+];
diff --git a/packages/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts b/packages/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts
index d1cc6344d685ed..17bc4ed7b327b5 100644
--- a/packages/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts
+++ b/packages/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts
@@ -163,8 +163,7 @@ const useContentContainerStyles = makeStyles({
 const useSecondaryContentStyles = makeStyles({
   base: theme => ({
     lineHeight: '100%',
-    marginTop: buttonSpacing.smaller,
-
+    marginTop: '4px',
     fontWeight: theme.global.type.fontWeights.regular,
   }),
   small: theme => ({
diff --git a/packages/react-button/src/tmp-components.stories.tsx b/packages/react-button/src/tmp-components.stories.tsx
new file mode 100644
index 00000000000000..f94ee0a168a543
--- /dev/null
+++ b/packages/react-button/src/tmp-components.stories.tsx
@@ -0,0 +1,65 @@
+//
+// !!!   A temporary workaround to avoid dependencies on any non converged packages.
+//
+
+/* eslint-disable @typescript-eslint/naming-convention */
+import * as React from 'react';
+
+interface ITextFieldProps extends React.AllHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {
+  value: string;
+  onChange: (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => void;
+  disabled: boolean;
+}
+
+export const TextField = ({ value, onChange, disabled }: ITextFieldProps) => {
+  return <input value={value} disabled={disabled} onChange={e => onChange(e, e.target.value)} />;
+};
+
+interface ICheckboxProps extends React.AllHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {
+  checked: boolean;
+  onChange: (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, checked?: boolean) => void;
+  disabled: boolean;
+  styles: string;
+}
+
+export const Checkbox = ({ checked, onChange, disabled, styles }: ICheckboxProps) => {
+  return (
+    <input
+      type="checkbox"
+      checked={checked}
+      disabled={disabled}
+      onChange={e => onChange(e, !checked)}
+      className={styles}
+    />
+  );
+};
+
+export interface IDropdownOption {
+  key: string;
+  text: string;
+}
+
+interface IDropdownProps {
+  options: IDropdownOption[];
+  disabled: boolean;
+  selectedKey: string;
+  onChange: (event: React.FormEvent<HTMLSelectElement>, option?: IDropdownOption) => void;
+}
+
+export const Dropdown = ({ options, disabled, selectedKey, onChange }: IDropdownProps) => {
+  return (
+    <select
+      disabled={disabled}
+      defaultValue={selectedKey}
+      onChange={e => onChange(e, { key: e.target.value, text: e.target.value })}
+    >
+      {options.map(option => {
+        return (
+          <option key={option.key} value={option.text}>
+            {option.text}
+          </option>
+        );
+      })}
+    </select>
+  );
+};
diff --git a/packages/react-button/tsconfig.json b/packages/react-button/tsconfig.json
index aadbd6c2cb687a..1259d048631bd2 100644
--- a/packages/react-button/tsconfig.json
+++ b/packages/react-button/tsconfig.json
@@ -1,23 +1,17 @@
 {
+  "extends": "../../tsconfig.base.json",
+  "include": ["src"],
   "compilerOptions": {
-    "baseUrl": ".",
+    "target": "ES5",
+    "module": "CommonJS",
+    "lib": ["es5", "dom"],
     "outDir": "dist",
-    "target": "es5",
-    "module": "commonjs",
     "jsx": "react",
     "declaration": true,
-    "sourceMap": true,
     "experimentalDecorators": true,
     "importHelpers": true,
     "noUnusedLocals": true,
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-    "moduleResolution": "node",
     "preserveConstEnums": true,
-    "lib": ["es5", "dom"],
-    "typeRoots": ["../../node_modules/@types", "../../typings"],
-    "types": ["jest", "custom-global"],
-    "skipLibCheck": true
-  },
-  "include": ["src"]
+    "types": ["jest", "custom-global", "inline-style-expand-shorthand"]
+  }
 }
diff --git a/packages/react-examples/package.json b/packages/react-examples/package.json
index 0b97f49990eb71..db570d62bb2a51 100644
--- a/packages/react-examples/package.json
+++ b/packages/react-examples/package.json
@@ -40,7 +40,6 @@
     "@fluentui/foundation-legacy": "^8.1.6",
     "@fluentui/merge-styles": "^8.1.3",
     "@fluentui/react": "^8.23.5",
-    "@fluentui/react-button": "^9.0.0-alpha.61",
     "@fluentui/react-cards": "^0.200.1",
     "@fluentui/react-charting": "^5.3.11",
     "@fluentui/react-checkbox": "^9.0.0-alpha.11",
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 281a042ed5aa46..d89e441256ba55 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -39,6 +39,7 @@
       "@fluentui/jest-serializer-make-styles": ["packages/jest-serializer-make-styles/src/index.ts"],
       "@fluentui/babel-make-styles": ["packages/babel-make-styles/src/index.ts"],
       "@fluentui/react-badge": ["packages/react-badge/src/index.ts"],
+      "@fluentui/react-button": ["packages/react-button/src/index.ts"],
       "@fluentui/keyboard-keys": ["packages/keyboard-keys/src/index.ts"],
       "@fluentui/react-slider": ["packages/react-slider/src/index.ts"],
       "@fluentui/make-styles-webpack-loader": ["packages/make-styles-webpack-loader/src/index.ts"],
diff --git a/workspace.json b/workspace.json
index c7736023e16c30..8cf5c647038662 100644
--- a/workspace.json
+++ b/workspace.json
@@ -114,7 +114,11 @@
       "projectType": "library",
       "sourceRoot": "packages/react-badge/src"
     },
-    "@fluentui/react-button": { "root": "packages/react-button", "projectType": "library" },
+    "@fluentui/react-button": {
+      "root": "packages/react-button",
+      "projectType": "library",
+      "sourceRoot": "packages/react-button/src"
+    },
     "@fluentui/react-card": { "root": "packages/react-card", "projectType": "library" },
     "@fluentui/react-cards": { "root": "packages/react-cards", "projectType": "library" },
     "@fluentui/react-charting": { "root": "packages/react-charting", "projectType": "library" },