[docs] Add Material You Button playground

docs/data/material/components/buttons/ButtonMaterialYouPlayground.js

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import MaterialYouUsageDemo from 'docs/src/modules/components/MaterialYouUsageDemo';
+import Box from '@mui/material/Box';
+import Button from '@mui/material-next/Button';
+import FavoriteBorder from '@mui/icons-material/FavoriteBorder';
+
+export default function ButtonUsage() {
+  const [variant, setVariant] = React.useState('text');
+  return (
+    <MaterialYouUsageDemo
+      componentName="Button"
+      data={[
+        {
+          propName: 'variant',
+          knob: 'select',
+          defaultValue: 'text',
+          options: ['text', 'outlined', 'filled', 'filledTonal', 'elevated'],
+          onChange: (e) => setVariant(e.target.value),
+        },
+        ...(variant === 'filled' || variant === 'text' || variant === 'outlined'
+          ? [
+              {
+                propName: 'color',
+                knob: 'select',
+                defaultValue: 'primary',
+                options: ['primary', 'secondary', 'tertiary'],
+              },
+            ]
+          : []),
+        {
+          propName: 'size',
+          knob: 'select',
+          options: ['small', 'medium', 'large'],
+          defaultValue: 'medium',
+        },
+        {
+          propName: 'disabled',
+          knob: 'switch',
+          defaultValue: false,
+        },
+      ]}
+      renderDemo={(props) => (
+        <Box sx={{ display: 'flex', gap: 2 }}>
+          <Button {...props}>Hello world</Button>
+          <Button {...props} startIcon={<FavoriteBorder />}>
+            Hello world
+          </Button>
+        </Box>
+      )}
+    />
+  );
+}

docs/data/material/components/buttons/buttons.md

@@ -181,3 +181,13 @@ However:
 ```
 
 This has the advantage of supporting any element, for instance, a link `<a>` element.
+
+## Material You version
+
+This component also supports the new Material Design spec - [Material You](https://m3.material.io/). It is implemented in form of a new component in the experimental `@mui/material-next` package.
+
+```js
+import Button from '@mui/material-next/Button';
+```
+
+{{"demo": "ButtonMaterialYouPlayground.js", "hideToolbar": true}}