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
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((props, ref) =
)}
+ {loading && loaderPosition === 'center' && (
+ {loader}
+ )}
+
= {
icon: 'Shared icon styles',
leftIcon: 'Left icon',
rightIcon: 'Right icon',
+ centerLoader: 'Center loader',
inner: 'Contains label, left and right icons',
label: 'Contains button children',
};