[docs] Revise and expand Joy UI Button doc

docs/data/base/components/button/button.md

@@ -10,14 +10,14 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/button/
 
 <p class="description">Buttons let users take actions and make choices with a single tap.</p>
 
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
-
 ## Introduction
 
 The Unstyled Button component replaces the native HTML `<button>` element, and offers expanded options for styling and accessibility.
 
 {{"demo": "UnstyledButtonIntroduction.tsx", "defaultCodeOpen": false, "bg": "gradient"}}
 
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
 ## Component
 
 ### Usage

docs/data/joy/components/button/BasicButtons.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import Button from '@mui/joy/Button';
+import Box from '@mui/joy/Box';
+
+export default function BasicButtons() {
+  return (
+    <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
+      <Button>Button</Button>
+      <Button disabled>Disabled</Button>
+      <Button loading>Loading</Button>
+    </Box>
+  );
+}

docs/data/joy/components/button/BasicButtons.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import Button from '@mui/joy/Button';
+import Box from '@mui/joy/Box';
+
+export default function BasicButtons() {
+  return (
+    <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
+      <Button>Button</Button>
+      <Button disabled>Disabled</Button>
+      <Button loading>Loading</Button>
+    </Box>
+  );
+}

docs/data/joy/components/button/BasicButtons.tsx.preview

@@ -0,0 +1,3 @@
+<Button>Button</Button>
+<Button disabled>Disabled</Button>
+<Button loading>Loading</Button>

docs/data/joy/components/button/ButtonDisabled.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import Box from '@mui/joy/Box';
 import Button from '@mui/joy/Button';
 
-export default function ButtonVariants() {
+export default function DisabledButtons() {
   return (
     <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
       <Button disabled variant="solid">

docs/data/joy/components/button/ButtonDisabled.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import Box from '@mui/joy/Box';
 import Button from '@mui/joy/Button';
 
-export default function ButtonVariants() {
+export default function DisabledButtons() {
   return (
     <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
       <Button disabled variant="solid">

docs/data/joy/components/button/ButtonLoading.js

@@ -1,17 +1,22 @@
 import * as React from 'react';
-import Stack from '@mui/joy/Stack';
-import SendIcon from '@mui/icons-material/Send';
+import Box from '@mui/joy/Box';
 import Button from '@mui/joy/Button';
 
-export default function ButtonLoading() {
+export default function LoadingButtons() {
   return (
-    <Stack spacing={2} direction="row">
-      <Button loading endDecorator={<SendIcon />} variant="solid">
-        Send
+    <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
+      <Button loading variant="solid">
+        Solid
       </Button>
-      <Button loading loadingIndicator="Loading…" variant="outlined">
-        Fetch data
+      <Button loading variant="soft">
+        Soft
       </Button>
-    </Stack>
+      <Button loading variant="outlined">
+        Outlined
+      </Button>
+      <Button loading variant="plain">
+        Plain
+      </Button>
+    </Box>
   );
 }

docs/data/joy/components/button/ButtonLoading.tsx

@@ -1,17 +1,22 @@
 import * as React from 'react';
-import Stack from '@mui/joy/Stack';
-import SendIcon from '@mui/icons-material/Send';
+import Box from '@mui/joy/Box';
 import Button from '@mui/joy/Button';
 
-export default function ButtonLoading() {
+export default function LoadingButtons() {
   return (
-    <Stack spacing={2} direction="row">
-      <Button loading endDecorator={<SendIcon />} variant="solid">
-        Send
+    <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
+      <Button loading variant="solid">
+        Solid
       </Button>
-      <Button loading loadingIndicator="Loading…" variant="outlined">
-        Fetch data
+      <Button loading variant="soft">
+        Soft
       </Button>
-    </Stack>
+      <Button loading variant="outlined">
+        Outlined
+      </Button>
+      <Button loading variant="plain">
+        Plain
+      </Button>
+    </Box>
   );
 }

docs/data/joy/components/button/ButtonLoading.tsx.preview

@@ -1,6 +1,12 @@
-<Button loading endDecorator={<SendIcon />} variant="solid">
-  Send
+<Button loading variant="solid">
+  Solid
 </Button>
-<Button loading loadingIndicator="Loading…" variant="outlined">
-  Fetch data
+<Button loading variant="soft">
+  Soft
+</Button>
+<Button loading variant="outlined">
+  Outlined
+</Button>
+<Button loading variant="plain">
+  Plain
 </Button>

docs/data/joy/components/button/ButtonLoadingIndicator.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import Stack from '@mui/joy/Stack';
+import SendIcon from '@mui/icons-material/Send';
+import Button from '@mui/joy/Button';
+
+export default function ButtonLoading() {
+  return (
+    <Stack spacing={2} direction="row">
+      <Button loading endDecorator={<SendIcon />} variant="solid">
+        Send
+      </Button>
+      <Button loading loadingIndicator="Loading…" variant="outlined">
+        Fetch data
+      </Button>
+    </Stack>
+  );
+}

docs/data/joy/components/button/ButtonLoadingIndicator.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import Stack from '@mui/joy/Stack';
+import SendIcon from '@mui/icons-material/Send';
+import Button from '@mui/joy/Button';
+
+export default function ButtonLoading() {
+  return (
+    <Stack spacing={2} direction="row">
+      <Button loading endDecorator={<SendIcon />} variant="solid">
+        Send
+      </Button>
+      <Button loading loadingIndicator="Loading…" variant="outlined">
+        Fetch data
+      </Button>
+    </Stack>
+  );
+}

docs/data/joy/components/button/ButtonLoadingIndicator.tsx.preview

@@ -0,0 +1,6 @@
+<Button loading endDecorator={<SendIcon />} variant="solid">
+  Send
+</Button>
+<Button loading loadingIndicator="Loading…" variant="outlined">
+  Fetch data
+</Button>

docs/data/joy/components/button/ButtonsSimple.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import Button from '@mui/joy/Button';
+import Box from '@mui/joy/Box';
+
+export default function UnstyledButtonsSimple() {
+  return (
+    <Box>
+      <Button>Button</Button>
+      <Button disabled>Disabled</Button>
+    </Box>
+  );
+}

docs/data/joy/components/button/ButtonsSimple.tsx.preview

@@ -0,0 +1,2 @@
+<Button>Button</Button>
+<Button disabled>Disabled</Button>