From 7b6f4859c711b7e60ab8f52aecc7fc82b1d5d5ea Mon Sep 17 00:00:00 2001
From: odysseaspapadimas <odysseas.patra@gmail.com>
Date: Mon, 24 Oct 2022 20:55:04 +0300
Subject: [PATCH 1/2] [@mantine/core] Button: Add loaderPosition center option

---
 src/mantine-core/src/Button/Button.styles.ts               | 7 +++++++
 src/mantine-core/src/Button/Button.tsx                     | 6 +++++-
 .../demos/core/Button/Button.demo.loadingConfigurator.tsx  | 1 +
 src/mantine-styles-api/src/styles-api/Button.styles-api.ts | 1 +
 4 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/mantine-core/src/Button/Button.styles.ts b/src/mantine-core/src/Button/Button.styles.ts
index 85d043c7351..89703e5f24c 100644
--- a/src/mantine-core/src/Button/Button.styles.ts
+++ b/src/mantine-core/src/Button/Button.styles.ts
@@ -181,6 +181,13 @@ export default createStyles(
       marginLeft: 10,
     },
 
+    centerLoader: {
+      position: 'absolute',
+      left: '50%',
+      transform: 'translateX(-50%)',
+      opacity: 0.5,
+    },
+
     inner: {
       display: 'flex',
       alignItems: 'center',
diff --git a/src/mantine-core/src/Button/Button.tsx b/src/mantine-core/src/Button/Button.tsx
index 4cd391b0b0e..3fe608dffa8 100644
--- a/src/mantine-core/src/Button/Button.tsx
+++ b/src/mantine-core/src/Button/Button.tsx
@@ -57,7 +57,7 @@ export interface ButtonProps extends DefaultProps<ButtonStylesNames, ButtonStyle
   loaderProps?: LoaderProps;
 
   /** Loader position relative to button label */
-  loaderPosition?: 'left' | 'right';
+  loaderPosition?: 'left' | 'right' | 'center';
 
   /** Button label */
   children?: React.ReactNode;
@@ -142,6 +142,10 @@ export const _Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =
           </span>
         )}
 
+        {loading && loaderPosition === 'center' && (
+          <span className={classes.centerLoader}>{loader}</span>
+        )}
+
         <span
           className={classes.label}
           style={{ textTransform: uppercase ? 'uppercase' : undefined }}
diff --git a/src/mantine-demos/src/demos/core/Button/Button.demo.loadingConfigurator.tsx b/src/mantine-demos/src/demos/core/Button/Button.demo.loadingConfigurator.tsx
index 11b2027a7de..baa859cc466 100644
--- a/src/mantine-demos/src/demos/core/Button/Button.demo.loadingConfigurator.tsx
+++ b/src/mantine-demos/src/demos/core/Button/Button.demo.loadingConfigurator.tsx
@@ -39,6 +39,7 @@ export const loadingConfigurator: MantineDemo = {
       data: [
         { label: 'Left', value: 'left' },
         { label: 'Right', value: 'right' },
+        { label: 'Center', value: 'center' },
       ],
       initialValue: 'left',
       defaultValue: 'left',
diff --git a/src/mantine-styles-api/src/styles-api/Button.styles-api.ts b/src/mantine-styles-api/src/styles-api/Button.styles-api.ts
index 59fc3831e94..5dde08b0b5e 100644
--- a/src/mantine-styles-api/src/styles-api/Button.styles-api.ts
+++ b/src/mantine-styles-api/src/styles-api/Button.styles-api.ts
@@ -5,6 +5,7 @@ export const Button: Record<ButtonStylesNames, string> = {
   icon: 'Shared icon styles',
   leftIcon: 'Left icon',
   rightIcon: 'Right icon',
+  centerLoader: 'Center loader',
   inner: 'Contains label, left and right icons',
   label: 'Contains button children',
 };

From 87a676f7b8174ad3e887b20c9e7417c1f3969bc0 Mon Sep 17 00:00:00 2001
From: odysseaspapadimas <odysseas.patra@gmail.com>
Date: Mon, 24 Oct 2022 20:57:06 +0300
Subject: [PATCH 2/2] [docs] Update loaderPosition options

---
 docs/src/docs/core/Button.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/docs/core/Button.mdx b/docs/src/docs/core/Button.mdx
index 9bb86b01d8a..ab4ff90396a 100644
--- a/docs/src/docs/core/Button.mdx
+++ b/docs/src/docs/core/Button.mdx
@@ -50,7 +50,7 @@ button becomes disabled and white or dark overlay is added.
 You can control loading state and [Loader](/core/loader/) component with following props:
 
 - `loading` – enable loading state
-- `loaderPosition` – Loader position relative to button label, either right or left
+- `loaderPosition` – Loader position relative to button label, left, right or center
 - `loaderProps` – props spread to Loader component, you can choose loader type, size and any other [supported](/core/loader/) prop
 
 <Demo data={ButtonDemos.loadingConfigurator} />