diff --git a/packages/react-button/src/Button.stories.tsx b/packages/react-button/src/Button.stories.tsx
index 5a7c8dcb51cd8..79d6f43e2af4e 100644
--- a/packages/react-button/src/Button.stories.tsx
+++ b/packages/react-button/src/Button.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Button, ButtonProps } from './Button';
-import { Playground } from './Playground';
-import { PlaygroundProps } from './Playground.types';
+import { Playground } from './Playground.stories';
+import { PlaygroundProps } from './Playground.types.stories';
 import { buttonBaseProps } from './buttonBaseProps';
 
 // TODO: this is here while waiting for react-icons to merge
diff --git a/packages/react-button/src/CompoundButton.stories.tsx b/packages/react-button/src/CompoundButton.stories.tsx
index ea4cd96b618de..9959228d936e8 100644
--- a/packages/react-button/src/CompoundButton.stories.tsx
+++ b/packages/react-button/src/CompoundButton.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { CompoundButton, CompoundButtonProps } from './CompoundButton';
-import { Playground } from './Playground';
-import { PlaygroundProps, PropDefinition } from './Playground.types';
+import { Playground } from './Playground.stories';
+import { PlaygroundProps, PropDefinition } from './Playground.types.stories';
 import { buttonBaseProps } from './buttonBaseProps';
 
 type ExampleProps = { iconOnly?: string };
diff --git a/packages/react-button/src/MenuButton.stories.tsx b/packages/react-button/src/MenuButton.stories.tsx
index 9bc8fa456ce9b..b48667bae50e2 100644
--- a/packages/react-button/src/MenuButton.stories.tsx
+++ b/packages/react-button/src/MenuButton.stories.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { Menu, MenuItem, MenuList, MenuProps, MenuTrigger } from '@fluentui/react-menu';
 import { MenuButton, MenuButtonProps } from './MenuButton';
-import { Playground } from './Playground';
-import { PlaygroundProps } from './Playground.types';
+import { Playground } from './Playground.stories';
+import { PlaygroundProps } from './Playground.types.stories';
 import { buttonBaseProps } from './buttonBaseProps';
 
 const ExampleMenu = (props: MenuButtonProps): JSX.Element => (
diff --git a/packages/react-button/src/Playground.tsx b/packages/react-button/src/Playground.tsx
deleted file mode 100644
index 2cf8ef4d353c9..0000000000000
--- a/packages/react-button/src/Playground.tsx
+++ /dev/null
@@ -1,176 +0,0 @@
-import * as React from 'react';
-import { Checkbox, Dropdown, IDropdownOption, Stack, TextField } from '@fluentui/react';
-import { Text } from '@fluentui/react-text';
-import { PlaygroundProps } from './Playground.types';
-
-const tableStyle: React.CSSProperties = {
-  border: '1px solid black',
-};
-const cellStyle: React.CSSProperties = {
-  border: '1px solid black',
-  padding: '5px',
-};
-
-export const Playground = function <TType>(props: PlaygroundProps<TType>): JSX.Element {
-  const { children, sections } = props;
-
-  const [componentProps, setComponentProps] = React.useState<{ [key in string]: boolean | string } | null>(null);
-  const newProps: { [key in string]: boolean | string } = {};
-
-  const playgroundSections: JSX.Element[] = [];
-
-  let booleanValueChanged = false;
-
-  for (const section of sections) {
-    const sectionList: JSX.Element[] = [];
-    for (const prop of section.propList) {
-      const propName = prop.propName as string;
-      const propType = prop.propType;
-      let isPropEnabled = true;
-
-      if (componentProps && prop.dependsOnProps) {
-        for (const dependentProp of prop.dependsOnProps as string[]) {
-          isPropEnabled =
-            isPropEnabled &&
-            (dependentProp[0] === '~' ? !componentProps[dependentProp.substr(1)] : !!componentProps[dependentProp]);
-        }
-      }
-
-      if (propType === 'boolean') {
-        newProps[propName + 'Default'] = prop.defaultValue || false;
-        const propDefaultValueChanged =
-          componentProps &&
-          prop.defaultValue !== undefined &&
-          prop.defaultValue !== componentProps[propName + 'Default'];
-        const propEnabledValueChanged =
-          componentProps && componentProps[propName] !== (componentProps[propName] && isPropEnabled);
-        newProps[propName] =
-          componentProps && componentProps[propName] !== 'undefined' && !propDefaultValueChanged
-            ? componentProps[propName] && isPropEnabled
-            : newProps[propName + 'Default'];
-
-        if (propDefaultValueChanged || propEnabledValueChanged) {
-          prop.setDefaultValue?.(newProps[propName] as boolean);
-          booleanValueChanged = true;
-        }
-
-        const onBooleanPropChange = (ev?: React.FormEvent<HTMLElement | HTMLInputElement>, checked?: boolean) => {
-          const newComponentProps: { [key in string]: boolean | string } = { ...componentProps };
-          newComponentProps[propName] = checked || false;
-          setComponentProps(newComponentProps);
-          prop.setDefaultValue?.(checked || false);
-        };
-
-        sectionList.push(
-          <tr key={section.sectionName + '_' + propName}>
-            <td style={cellStyle}>{propName}:</td>
-            <td style={cellStyle}>
-              <Checkbox
-                checked={
-                  componentProps && componentProps[propName] !== undefined && !propDefaultValueChanged
-                    ? (componentProps[propName] as boolean)
-                    : (prop.defaultValue as boolean)
-                }
-                disabled={!isPropEnabled}
-                // eslint-disable-next-line react/jsx-no-bind
-                onChange={onBooleanPropChange}
-              />
-            </td>
-          </tr>,
-        );
-      } else if (propType === 'string') {
-        newProps[propName] = (componentProps && componentProps[propName]) || prop.defaultValue || '';
-
-        const onStringPropChange = (
-          ev?: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
-          newValue?: string,
-        ) => {
-          const newComponentProps: { [key in string]: boolean | string } = { ...componentProps };
-          newComponentProps[propName] = newValue || '';
-          setComponentProps(newComponentProps);
-        };
-
-        sectionList.push(
-          <tr key={section.sectionName + '_' + propName}>
-            <td style={cellStyle}>{propName}:</td>
-            <td style={cellStyle}>
-              <TextField
-                value={
-                  componentProps && componentProps[propName]
-                    ? (componentProps[propName] as string)
-                    : (prop.defaultValue as string)
-                }
-                disabled={!isPropEnabled}
-                // eslint-disable-next-line react/jsx-no-bind
-                onChange={onStringPropChange}
-              />
-            </td>
-          </tr>,
-        );
-      } else {
-        const defaultSelectedKey = prop.defaultValue || propType[0];
-        newProps[propName] = (componentProps && componentProps[propName]) || prop.defaultValue || propType[0];
-
-        const onOptionsPropChange = (
-          ev?: React.FormEvent<HTMLDivElement>,
-          option?: IDropdownOption<any>,
-          index?: number,
-        ) => {
-          const newComponentProps: { [key in string]: boolean | string } = { ...componentProps };
-          if (option) {
-            newComponentProps[propName] = (option.key as string) || '';
-            setComponentProps(newComponentProps);
-          }
-        };
-
-        sectionList.push(
-          <tr key={section.sectionName + '_' + propName}>
-            <td style={cellStyle}>{propName}:</td>
-            <td style={cellStyle}>
-              <Dropdown
-                disabled={!isPropEnabled}
-                selectedKey={
-                  componentProps && componentProps[propName]
-                    ? (componentProps[propName] as string)
-                    : (defaultSelectedKey as string)
-                }
-                options={propType.map(value => ({ key: value, text: value }))}
-                // eslint-disable-next-line react/jsx-no-bind
-                onChange={onOptionsPropChange}
-              />
-            </td>
-          </tr>,
-        );
-      }
-    }
-    playgroundSections.push(
-      <React.Fragment key={section.sectionName}>
-        <tr>
-          <td style={cellStyle} colSpan={2}>
-            <Text variant="title3">{section.sectionName}</Text>
-          </td>
-        </tr>
-        {sectionList}
-      </React.Fragment>,
-    );
-  }
-
-  if (componentProps === null || booleanValueChanged) {
-    setComponentProps(newProps);
-  }
-
-  const elementProps = {
-    ...componentProps,
-    children: componentProps && !componentProps.iconOnly && !componentProps.children && componentProps.content,
-    icon: componentProps && componentProps.icon ? 'x' : undefined,
-  };
-
-  return (
-    <>
-      <Stack horizontalAlign="center">{React.cloneElement(children, elementProps || {})}</Stack>
-      <table style={tableStyle} cellSpacing={0}>
-        <tbody>{playgroundSections}</tbody>
-      </table>
-    </>
-  );
-};
diff --git a/packages/react-button/src/Playground.types.ts b/packages/react-button/src/Playground.types.ts
deleted file mode 100644
index 8d17095e4832b..0000000000000
--- a/packages/react-button/src/Playground.types.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-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];
-
-/** Definition for a prop that is to be controlled by the Playground.  */
-export interface PropDefinition<TType> {
-  /** Name of the prop. */
-  propName: keyof TType | 'content';
-
-  /** Type of the prop, it can be boolean, string or an array of defined string values. */
-  propType: 'boolean' | 'string' | string[];
-
-  /** Default value for the prop. */
-  defaultValue?: boolean | string;
-
-  /** Callback to set the default value of the prop if it is boolean and controlled behavior is wanted. */
-  setDefaultValue?: (value: boolean) => void;
-
-  /**
-   * An array of prop names that this prop requires to be truthy or falsy (prop name preceded by '~') in order to enable
-   * this prop.
-   */
-  dependsOnProps?: (keyof TType | `~${StringKeyOf<TType>}` | 'content' | '~content')[];
-}
-
-/** Props received by the Playground component. */
-export interface PlaygroundProps<TType> {
-  /** Single children to clone with the playground props. */
-  children: React.ReactElement;
-
-  /** Sections of props for the playground, where each section has a name and an array of prop definitions. */
-  sections: Array<{
-    sectionName: string;
-    propList: PropDefinition<TType>[];
-  }>;
-}
diff --git a/packages/react-button/src/ToggleButton.stories.tsx b/packages/react-button/src/ToggleButton.stories.tsx
index ef44432b52a62..e42b2bfd8f273 100644
--- a/packages/react-button/src/ToggleButton.stories.tsx
+++ b/packages/react-button/src/ToggleButton.stories.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { useBoolean } from '@fluentui/react-utilities';
 import { ToggleButton, ToggleButtonProps } from './ToggleButton';
-import { Playground } from './Playground';
-import { PlaygroundProps, PropDefinition } from './Playground.types';
+import { Playground } from './Playground.stories';
+import { PlaygroundProps, PropDefinition } from './Playground.types.stories';
 import { buttonBaseProps } from './buttonBaseProps';
 
 export const ToggleButtonPlayground = () => {