[docs][joy-ui] Simplify the button's loading indicator demo (mui#39082)

Author: danilo-leal

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

@@ -3,17 +3,13 @@ import Box from '@mui/joy/Box';
 import Button from '@mui/joy/Button';
 import Add from '@mui/icons-material/Add';
 import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
-import ThumbUp from '@mui/icons-material/ThumbUp';
 
 export default function ButtonIcons() {
   return (
     <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
       <Button startDecorator={<Add />}>Add to cart</Button>
-      <Button aria-label="Like" variant="outlined" color="neutral">
-        <ThumbUp />
-      </Button>
-      <Button variant="soft" endDecorator={<KeyboardArrowRight />} color="success">
-        Checkout
+      <Button endDecorator={<KeyboardArrowRight />} color="success">
+        Go to checkout
       </Button>
     </Box>
   );

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

@@ -3,17 +3,13 @@ import Box from '@mui/joy/Box';
 import Button from '@mui/joy/Button';
 import Add from '@mui/icons-material/Add';
 import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
-import ThumbUp from '@mui/icons-material/ThumbUp';
 
 export default function ButtonIcons() {
   return (
     <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
       <Button startDecorator={<Add />}>Add to cart</Button>
-      <Button aria-label="Like" variant="outlined" color="neutral">
-        <ThumbUp />
-      </Button>
-      <Button variant="soft" endDecorator={<KeyboardArrowRight />} color="success">
-        Checkout
+      <Button endDecorator={<KeyboardArrowRight />} color="success">
+        Go to checkout
       </Button>
     </Box>
   );

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

@@ -1,7 +1,4 @@
 <Button startDecorator={<Add />}>Add to cart</Button>
-<Button aria-label="Like" variant="outlined" color="neutral">
-  <ThumbUp />
-</Button>
-<Button variant="soft" endDecorator={<KeyboardArrowRight />} color="success">
-  Checkout
+<Button endDecorator={<KeyboardArrowRight />} color="success">
+  Go to checkout
 </Button>

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

@@ -1,16 +1,13 @@
 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 ButtonLoadingIndicator() {
   return (
     <Stack spacing={2} direction="row">
-      <Button loading endDecorator={<SendIcon />} variant="solid">
-        Send
-      </Button>
-      <Button loading loadingIndicator="Loading…" variant="outlined">
-        Fetch data
+      <Button loading>Default</Button>
+      <Button loading loadingIndicator="Loading…">
+        Custom
       </Button>
     </Stack>
   );

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

@@ -1,16 +1,13 @@
 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 ButtonLoadingIndicator() {
   return (
     <Stack spacing={2} direction="row">
-      <Button loading endDecorator={<SendIcon />} variant="solid">
-        Send
-      </Button>
-      <Button loading loadingIndicator="Loading…" variant="outlined">
-        Fetch data
+      <Button loading>Default</Button>
+      <Button loading loadingIndicator="Loading…">
+        Custom
       </Button>
     </Stack>
   );

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

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

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

@@ -6,16 +6,11 @@ import Button from '@mui/joy/Button';
 export default function ButtonLoadingPosition() {
   return (
     <Stack spacing={2} direction="row">
-      <Button loading loadingPosition="start" variant="outlined">
-        Fetch data
+      <Button loading loadingPosition="start">
+        Start
       </Button>
-      <Button
-        loading
-        loadingPosition="end"
-        endDecorator={<SendIcon />}
-        variant="solid"
-      >
-        Send
+      <Button loading loadingPosition="end" endDecorator={<SendIcon />}>
+        End
       </Button>
     </Stack>
   );

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

@@ -6,16 +6,11 @@ import Button from '@mui/joy/Button';
 export default function ButtonLoadingPosition() {
   return (
     <Stack spacing={2} direction="row">
-      <Button loading loadingPosition="start" variant="outlined">
-        Fetch data
+      <Button loading loadingPosition="start">
+        Start
       </Button>
-      <Button
-        loading
-        loadingPosition="end"
-        endDecorator={<SendIcon />}
-        variant="solid"
-      >
-        Send
+      <Button loading loadingPosition="end" endDecorator={<SendIcon />}>
+        End
       </Button>
     </Stack>
   );

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

@@ -1,11 +1,6 @@
-<Button loading loadingPosition="start" variant="outlined">
-  Fetch data
+<Button loading loadingPosition="start">
+  Start
 </Button>
-<Button
-  loading
-  loadingPosition="end"
-  endDecorator={<SendIcon />}
-  variant="solid"
->
-  Send
+<Button loading loadingPosition="end" endDecorator={<SendIcon />}>
+  End
 </Button>