diff --git a/packages/button/stories/button.stories.tsx b/packages/button/stories/button.stories.tsx
index 7b5388c9ce6..fc17ebd2fb2 100644
--- a/packages/button/stories/button.stories.tsx
+++ b/packages/button/stories/button.stories.tsx
@@ -155,11 +155,11 @@ export const WithLoading = () => (
   </Stack>
 )
 
-export const WithLoadingSpinnerPosition = () => (
+export const WithLoadingSpinnerPlacement = () => (
   <Stack direction="row" spacing={4} align="center">
     <Button
       isLoading
-      loadingText="Submitting..."
+      loadingText="Loading"
       colorScheme="teal"
       variant="outline"
       spinnerPosition="start"
@@ -168,15 +168,16 @@ export const WithLoadingSpinnerPosition = () => (
     </Button>
     <Button
       isLoading
-      loadingText="Continuing..."
+      loadingText="Loading"
       colorScheme="teal"
       variant="outline"
-      spinnerPosition="end"
+      spinnerPlacement="end"
     >
       Continue
     </Button>
   </Stack>
 )
+
 export const withDisabled = () => (
   <HStack spacing="24px">
     <Button isDisabled colorScheme="teal" variant="solid">
diff --git a/website/pages/docs/form/button.mdx b/website/pages/docs/form/button.mdx
index a8dbb240b77..95ddefe7adf 100644
--- a/website/pages/docs/form/button.mdx
+++ b/website/pages/docs/form/button.mdx
@@ -137,7 +137,7 @@ You can also pass the `loadingText` prop to show a spinner and the loading text.
 </Stack>
 ```
 
-You can also change the spinner itself to use custom loaders as per your design
+You can change the spinner element to use custom loaders as per your design
 requirements. Pass the `spinner` prop and set it to a custom react element.
 
 ```jsx
@@ -150,6 +150,32 @@ requirements. Pass the `spinner` prop and set it to a custom react element.
 </Button>
 ```
 
+When a `loadingText` is present, you can change the placement of the spinner
+element to either `start` or `end`. It is `start` by default.
+
+```jsx
+<Stack direction="row" spacing={4} align="center">
+  <Button
+    isLoading
+    loadingText="Loading"
+    colorScheme="teal"
+    variant="outline"
+    spinnerPosition="start"
+  >
+    Submit
+  </Button>
+  <Button
+    isLoading
+    loadingText="Loading"
+    colorScheme="teal"
+    variant="outline"
+    spinnerPlacement="end"
+  >
+    Continue
+  </Button>
+</Stack>
+```
+
 ### Social Buttons
 
 We've included the colors for common social media platforms, and you can simply
@@ -262,14 +288,14 @@ props to style the button.
 
 ### Button Props
 
-`Button` composes the `Box` component, so you can pass all its props.
-These are props specific to the `Button` component:
+`Button` composes the `Box` component, so you can pass all its props. These are
+props specific to the `Button` component:
 
 <PropsTable of="Button" />
 
 ### Button Group Props
 
-`ButtonGroup` composes the `Box` component, so you can pass all its props.
-These are props specific to the `ButtonGroup` component:
+`ButtonGroup` composes the `Box` component, so you can pass all its props. These
+are props specific to the `ButtonGroup` component:
 
 <PropsTable of="ButtonGroup" />