diff --git a/src/mantine-core/src/ActionIcon/ActionIcon.story.tsx b/src/mantine-core/src/ActionIcon/ActionIcon.story.tsx
index 3ebe2481aad..c68dcbbea8d 100644
--- a/src/mantine-core/src/ActionIcon/ActionIcon.story.tsx
+++ b/src/mantine-core/src/ActionIcon/ActionIcon.story.tsx
@@ -111,6 +111,14 @@ export function States() {
);
}
+export function StatesInsideFieldsetDisabled() {
+ return (
+
diff --git a/src/mantine-core/src/ActionIcon/ActionIcon.styles.ts b/src/mantine-core/src/ActionIcon/ActionIcon.styles.ts
index a3a01ed777b..bcdddd77d69 100644
--- a/src/mantine-core/src/ActionIcon/ActionIcon.styles.ts
+++ b/src/mantine-core/src/ActionIcon/ActionIcon.styles.ts
@@ -84,7 +84,7 @@ export default createStyles(
'&:active': theme.activeStyles,
- '&[data-disabled]': {
+ '&:disabled, &[data-disabled]': {
color: theme.colors.gray[theme.colorScheme === 'dark' ? 6 : 4],
cursor: 'not-allowed',
backgroundColor:
@@ -96,6 +96,7 @@ export default createStyles(
? undefined
: theme.fn.themeColor('gray', theme.colorScheme === 'dark' ? 8 : 1),
backgroundImage: 'none',
+ pointerEvents: 'none',
'&:active': {
transform: 'none',
diff --git a/src/mantine-core/src/ActionIcon/ActionIcon.test.tsx b/src/mantine-core/src/ActionIcon/ActionIcon.test.tsx
index cd683545b30..07d86fc98f3 100644
--- a/src/mantine-core/src/ActionIcon/ActionIcon.test.tsx
+++ b/src/mantine-core/src/ActionIcon/ActionIcon.test.tsx
@@ -64,4 +64,13 @@ describe('@mantine/core/ActionIcon', () => {
expect(loading.querySelectorAll('.test-icon')).toHaveLength(0);
expect(loading.querySelectorAll('svg')).toHaveLength(1);
});
+
+ it('is disabled when inside fieldset disabled', () => {
+ render(
+
+ );
+ expect(screen.getByRole('button')).toBeDisabled();
+ });
});
diff --git a/src/mantine-core/src/Button/Button.story.tsx b/src/mantine-core/src/Button/Button.story.tsx
index 767e2e5c504..4211e7de476 100644
--- a/src/mantine-core/src/Button/Button.story.tsx
+++ b/src/mantine-core/src/Button/Button.story.tsx
@@ -128,6 +128,16 @@ export function States() {
);
}
+/**
+ * All buttons should be disabled
+ */
+export function StatesInFieldsetDisabled() {
+ return (
+
+ );
+}
export function CustomComponent() {
return (
diff --git a/src/mantine-core/src/Button/Button.styles.ts b/src/mantine-core/src/Button/Button.styles.ts
index 294e895ee4a..85d043c7351 100644
--- a/src/mantine-core/src/Button/Button.styles.ts
+++ b/src/mantine-core/src/Button/Button.styles.ts
@@ -135,12 +135,13 @@ export default createStyles(
'&:active': theme.activeStyles,
- '&[data-disabled]': {
+ '&:disabled, &[data-disabled]': {
borderColor: 'transparent',
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],
color: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[5],
cursor: 'not-allowed',
backgroundImage: 'none',
+ pointerEvents: 'none',
'&:active': {
transform: 'none',
diff --git a/src/mantine-core/src/Button/Button.test.tsx b/src/mantine-core/src/Button/Button.test.tsx
index 93b89ab6609..6bd4abac8b0 100644
--- a/src/mantine-core/src/Button/Button.test.tsx
+++ b/src/mantine-core/src/Button/Button.test.tsx
@@ -52,4 +52,13 @@ describe('@mantine/core/Button', () => {
it('exposes ButtonGroup as static component', () => {
expect(Button.Group).toBe(ButtonGroup);
});
+
+ it('is disabled when inside fieldset disabled', () => {
+ render(
+
+ );
+ expect(screen.getByRole('button')).toBeDisabled();
+ });
});