diff --git a/docs/data/joy/getting-started/usage/Usage.js b/docs/data/joy/getting-started/usage/Usage.js
deleted file mode 100644
index 252375fa938b5d..00000000000000
--- a/docs/data/joy/getting-started/usage/Usage.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react';
-
-export default function Usage() {
-  return (
-    <iframe
-      title="codesandbox"
-      src="https://codesandbox.io/embed/joy-ui-tgkzrv?hidenavigation=1&fontsize=14&view=preview"
-      style={{
-        width: '100%',
-        height: 350,
-        border: 0,
-      }}
-      sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
-    />
-  );
-}
diff --git a/docs/data/material/getting-started/learn/learn.md b/docs/data/material/getting-started/learn/learn.md
index 1fc95b4d07a237..d262f3d9e6d8f4 100644
--- a/docs/data/material/getting-started/learn/learn.md
+++ b/docs/data/material/getting-started/learn/learn.md
@@ -4,20 +4,10 @@
 
 ## Your first component
 
-The following code snippet demonstrates a basic Material UI app that features a `<Button>` component:
+The following demo shows a basic Material UI app that features a `<Button>` component.
+Try changing the `variant` on the [Button](/material-ui/react-button/) to `outlined` to see how the style changes:
 
-```jsx
-import * as React from 'react';
-import Button from '@mui/material/Button';
-
-function App() {
-  return <Button variant="contained">Hello World</Button>;
-}
-```
-
-In the interactive demo below, try changing the code and see how it affects the output. (Hint: change `variant` to `"outlined"` and `color` to `"secondary"`. For more options, see the [`Button` component page](/material-ui/react-button/).)
-
-{{"demo": "../usage/Usage.js", "hideToolbar": true, "bg": true}}
+{{"demo": "../usage/ButtonUsage.js", "defaultCodeOpen": true}}
 
 ## Example projects
 
diff --git a/docs/data/material/getting-started/usage/Usage.js b/docs/data/material/getting-started/usage/Usage.js
deleted file mode 100644
index 8d0f199556feee..00000000000000
--- a/docs/data/material/getting-started/usage/Usage.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react';
-
-export default function Usage() {
-  return (
-    <iframe
-      title="codesandbox"
-      src="https://codesandbox.io/embed/u9sy1h?hidenavigation=1&fontsize=14&view=preview"
-      style={{
-        width: '100%',
-        height: 350,
-        border: 0,
-      }}
-      sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
-    />
-  );
-}