diff --git a/docs/data/base/components/button/button.md b/docs/data/base/components/button/button.md
index d6d3e92bd6c59b..4697542fce9970 100644
--- a/docs/data/base/components/button/button.md
+++ b/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
diff --git a/docs/data/joy/components/button/BasicButtons.js b/docs/data/joy/components/button/BasicButtons.js
new file mode 100644
index 00000000000000..15c152d5d8029e
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/docs/data/joy/components/button/BasicButtons.tsx b/docs/data/joy/components/button/BasicButtons.tsx
new file mode 100644
index 00000000000000..15c152d5d8029e
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/docs/data/joy/components/button/BasicButtons.tsx.preview b/docs/data/joy/components/button/BasicButtons.tsx.preview
new file mode 100644
index 00000000000000..4d33dc1940fa3f
--- /dev/null
+++ b/docs/data/joy/components/button/BasicButtons.tsx.preview
@@ -0,0 +1,3 @@
+<Button>Button</Button>
+<Button disabled>Disabled</Button>
+<Button loading>Loading</Button>
\ No newline at end of file
diff --git a/docs/data/joy/components/button/ButtonDisabled.js b/docs/data/joy/components/button/ButtonDisabled.js
index a9a47de487c7a2..e048a8cbf14f45 100644
--- a/docs/data/joy/components/button/ButtonDisabled.js
+++ b/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">
diff --git a/docs/data/joy/components/button/ButtonDisabled.tsx b/docs/data/joy/components/button/ButtonDisabled.tsx
index a9a47de487c7a2..e048a8cbf14f45 100644
--- a/docs/data/joy/components/button/ButtonDisabled.tsx
+++ b/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">
diff --git a/docs/data/joy/components/button/ButtonLoading.js b/docs/data/joy/components/button/ButtonLoading.js
index 231860dc44b56c..cac8452c703c21 100644
--- a/docs/data/joy/components/button/ButtonLoading.js
+++ b/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>
   );
 }
diff --git a/docs/data/joy/components/button/ButtonLoading.tsx b/docs/data/joy/components/button/ButtonLoading.tsx
index 231860dc44b56c..cac8452c703c21 100644
--- a/docs/data/joy/components/button/ButtonLoading.tsx
+++ b/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>
   );
 }
diff --git a/docs/data/joy/components/button/ButtonLoading.tsx.preview b/docs/data/joy/components/button/ButtonLoading.tsx.preview
index ca37d5ae89ed8c..7b260fd7a643ab 100644
--- a/docs/data/joy/components/button/ButtonLoading.tsx.preview
+++ b/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>
\ No newline at end of file
diff --git a/docs/data/joy/components/button/ButtonLoadingIndicator.js b/docs/data/joy/components/button/ButtonLoadingIndicator.js
new file mode 100644
index 00000000000000..231860dc44b56c
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/docs/data/joy/components/button/ButtonLoadingIndicator.tsx b/docs/data/joy/components/button/ButtonLoadingIndicator.tsx
new file mode 100644
index 00000000000000..231860dc44b56c
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/docs/data/joy/components/button/ButtonLoadingIndicator.tsx.preview b/docs/data/joy/components/button/ButtonLoadingIndicator.tsx.preview
new file mode 100644
index 00000000000000..ca37d5ae89ed8c
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/docs/data/joy/components/button/ButtonsSimple.js b/docs/data/joy/components/button/ButtonsSimple.js
new file mode 100644
index 00000000000000..88636b8fb0e9ee
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/docs/data/joy/components/button/ButtonsSimple.tsx.preview b/docs/data/joy/components/button/ButtonsSimple.tsx.preview
new file mode 100644
index 00000000000000..b7b5add52ab6c2
--- /dev/null
+++ b/docs/data/joy/components/button/ButtonsSimple.tsx.preview
@@ -0,0 +1,2 @@
+<Button>Button</Button>
+<Button disabled>Disabled</Button>
\ No newline at end of file
diff --git a/docs/data/joy/components/button/button.md b/docs/data/joy/components/button/button.md
index 36a8db10e4d12c..af047dabd94c79 100644
--- a/docs/data/joy/components/button/button.md
+++ b/docs/data/joy/components/button/button.md
@@ -8,120 +8,147 @@ unstyled: /base/react-button/
 
 # Button
 
-<p class="description">Buttons allow users to take actions, and make choices, with a single tap.</p>
+<p class="description">Buttons let users take actions and make choices with a single tap.</p>
 
 ## Introduction
 
 Buttons communicate actions that users can take.
+The Joy UI Button component replaces the native HTML `<button>` element, and offers expanded options for styling and accessibility.
 
 {{"demo": "ButtonUsage.js", "hideToolbar": true, "bg": "gradient"}}
 
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 
-## Component
-
-After [installation](/joy-ui/getting-started/installation/), you can start building with this component using the following basic elements:
+## Basics
 
 ```jsx
 import Button from '@mui/joy/Button';
-
-export default function MyApp() {
-  return <Button>My button</Button>;
-}
 ```
 
+The Joy UI Button behaves similar to the native HTML `<button>`, so it wraps around the text that will be displayed on its surface.
+
+The demo below shows the three basic states available to the Button: default, disabled, and loading.
+
+{{"demo": "BasicButtons.js"}}
+
+### Disabled
+
+Use the `disabled` prop to disable interaction and focus:
+
+{{"demo": "ButtonDisabled.js"}}
+
+### Loading
+
+Add the `loading` prop to show the Button's loading state.
+The Button is [disabled](#disabled) as long as it's loading.
+See [Loading indicator](#loading-indicator) and [Loading position](#loading-position) for customization options.
+
+{{"demo": "ButtonLoading.js"}}
+
+## Customization
+
 ### Variants
 
-The button component supports the four global variants: `solid` (default), `soft`, `outlined`, and `plain`.
-Which variant you should choose depends on the relative importance of the button's action—see [Global variants—Hierarchy of importance](/joy-ui/main-features/global-variants/#hierarchy-of-importance) for details.
+The Alert component supports Joy UI's four [global variants](/joy-ui/main-features/global-variants/): `solid` (default), `soft`, `outlined`, and `plain`.
 
 {{"demo": "ButtonVariants.js"}}
 
 :::info
-To learn how to add more variants to the component, check out [Themed components—Extend variants](/joy-ui/customization/themed-components/#extend-variants).
+To learn how to add your own variants, check out [Themed components—Extend variants](/joy-ui/customization/themed-components/#extend-variants).
+Note that you lose the global variants when you add custom variants.
 :::
 
-### Colors
-
-Every palette included in the theme is available via the `color` prop.
-Play around combining different colors with different variants.
-
-{{"demo": "ButtonColors.js"}}
-
 ### Sizes
 
-The button components comes with three sizes out of the box: `sm`, `md` (the default), and `lg`.
+The Button component comes in three sizes: `sm`, `md` (default), and `lg`.
 
 {{"demo": "ButtonSizes.js"}}
 
 :::info
-To learn how to add more sizes to the component, check out [Themed components—Extend sizes](/joy-ui/customization/themed-components/#extend-sizes).
+To learn how to add custom sizes to the component, check out [Themed components—Extend sizes](/joy-ui/customization/themed-components/#extend-sizes).
 :::
 
-### Disabled
+### Colors
 
-Use the `disabled` prop to disable interaction and focus.
+Every palette included in the theme is available via the `color` prop.
+Play around combining different colors with different variants.
 
-{{"demo": "ButtonDisabled.js"}}
+{{"demo": "ButtonColors.js"}}
 
-### With decorators
+### Decorators
 
-Use the `startDecorator` and/or `endDecorator` props to add supporting decorators to the button.
+Use the `startDecorator` and `endDecorator` props to append actions and icons to either side of the Button:
 
 {{"demo": "ButtonIcons.js"}}
 
-### Loading
-
-Enable `loading` prop to show button's loading state. The button will be `disabled` when it is in the loading state.
+### Loading indicator
 
-The default loading indicator uses the [`CircularProgress`](/joy-ui/react-circular-progress/) component which can be customized using the `loadingIndicator` prop.
+The default loading indicator uses the [Circular Progress](/joy-ui/react-circular-progress/) component.
+Use the `loadingIndicator` prop to replace it with a custom indicator, as shown below:
 
-{{"demo": "ButtonLoading.js"}}
+{{"demo": "ButtonLoadingIndicator.js"}}
 
 ### Loading position
 
-The `loadingPosition` prop supports 3 values:
+The `loadingPosition` prop sets the position of the Button's loading indicator.
+It supports three values:
 
-- `center` (default): The loading indicator element is wrapped inside the button's `loadingIndicatorCenter` slot to create a proper style.
-- `start`: The loading indicator replaces the **start** decorator's content when the button is in loading state.
-- `end`: The loading indicator replaces the **end** decorator's content when the button is in loading state.
+- `center` (default): The loading indicator is nested inside the `loadingIndicatorCenter` slot and replaces the Button's contents when in the loading state.
+- `start`: The loading indicator replaces the [starting decorator](#decorators) when the Button is in the loading state.
+- `end`: The loading indicator replaces the [ending decorator](#decorators) when the Button is in the loading state.
 
 {{"demo": "ButtonLoadingPosition.js"}}
 
-### Icon button
-
-Use the `IconButton` component if you want width and height to be the same while not having a label.
-Every prop previously covered are available for this component as well.
+## Icon Button
 
 ```jsx
 import IconButton from '@mui/joy/IconButton';
 ```
 
-{{"demo": "IconButtons.js"}}
+Use the Icon Button component for a square button to house an icon with no text content.
 
-:::warning
-Make sure to provide a meaningful [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) to the icon button.
-It helps screen readers to properly identify the component.
+{{"demo": "IconButtons.js"}}
 
-```js
-<IconButton aria-label="Add to favorite">
-  <FavoriteBorder />
-</IconButton>
-```
+## Link Button
 
-:::
+Buttons let users take actions, but if that action is to navigate to a new page, then an anchor tag is generally preferable over a button tag.
 
-### As a link
+If you need the style of a button with the functionality of a link, then you can use the `component` prop to replace the default `<button>` with an `<a>`, as shown below:
 
-You can also use the button component as a link by assigning a value of `a` to the `component` prop.
-Since links are the most appropriate component for navigating through pages, that's useful when you want the same button design for a link.
+{{"demo": "ButtonLink.js"}}
 
-Doing so will automatically change the rendered HTML tag from `<button>` to `<a>`.
+## CSS variable playground
 
-{{"demo": "ButtonLink.js"}}
+Play around with the CSS variables available to the Button and Icon Button components to see how the design changes.
+You can use these to customize the components with both the `sx` prop and the theme.
 
-## CSS Variables
+### Button
 
 {{"demo": "ButtonVariables.js", "hideToolbar": true}}
 
+### Icon Button
+
 {{"demo": "IconButtonVariables.js", "hideToolbar": true}}
+
+## Accessibility
+
+All Buttons must have a meaningful [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) so their purpose can be understood by users who require assistive technology.
+
+This is especially important for [Icon Buttons](#icon-button) because they don't contain any text.
+For example, an Icon Button that displays a `<FavoriteBorder />` icon might have a label that looks like this:
+
+```js
+<IconButton aria-label="Add to favorites">
+  <FavoriteBorder />
+</IconButton>
+```
+
+## Anatomy
+
+The Button component is composed of a single root `<button>` element that wraps around its contents:
+
+```html
+<button class="JoyButton-root" type="button">
+  <!-- Button contents -->
+</button>
+```