diff --git a/src/mantine-core/src/ActionIcon/ActionIcon.story.tsx b/src/mantine-core/src/ActionIcon/ActionIcon.story.tsx
index acb402f9824..3ebe2481aad 100644
--- a/src/mantine-core/src/ActionIcon/ActionIcon.story.tsx
+++ b/src/mantine-core/src/ActionIcon/ActionIcon.story.tsx
@@ -16,15 +16,97 @@ export function AsLink() {
);
}
-export function Disabled() {
+export function States() {
+ const theme = useMantineTheme();
+
+ const sharedStyles: CSSProperties = {
+ padding: '10px 20px',
+ border: `1px solid ${
+ theme.colorScheme === 'light' ? theme.colors.gray[1] : theme.colors.dark[6]
+ }`,
+ };
+
+ const states = [
+ {
+ name: 'enabled',
+ props: undefined,
+ },
+ {
+ name: 'disabled',
+ props: {
+ disabled: true,
+ },
+ },
+ {
+ name: 'loading',
+ props: {
+ loading: true,
+ },
+ },
+ ];
+
return (
-
-
- $
-
-
- $
-
+
+
+
+
+
+
+ |
+
+ {ACTION_ICON_VARIANTS.map((variant) => (
+
+ {variant}
+ |
+ ))}
+
+
+
+ {states.map((state) => (
+
+
+ {state.name}
+ |
+
+ {ACTION_ICON_VARIANTS.map((variant) => (
+
+
+
+ #
+
+
+ |
+ ))}
+
+ ))}
+
+
);
}
@@ -65,7 +147,7 @@ export function Colors() {
...sharedStyles,
}}
>
- color
+
{ACTION_ICON_VARIANTS.map((variant) => (
diff --git a/src/mantine-core/src/ActionIcon/ActionIcon.styles.ts b/src/mantine-core/src/ActionIcon/ActionIcon.styles.ts
index 86aea970ad8..5bdefaec4bc 100644
--- a/src/mantine-core/src/ActionIcon/ActionIcon.styles.ts
+++ b/src/mantine-core/src/ActionIcon/ActionIcon.styles.ts
@@ -103,6 +103,7 @@ export default createStyles(
variant === 'transparent'
? undefined
: theme.fn.themeColor('gray', theme.colorScheme === 'dark' ? 8 : 1),
+ backgroundImage: 'none',
'&:active': {
transform: 'none',
diff --git a/src/mantine-core/src/Button/Button.story.tsx b/src/mantine-core/src/Button/Button.story.tsx
index 856f4672092..767e2e5c504 100644
--- a/src/mantine-core/src/Button/Button.story.tsx
+++ b/src/mantine-core/src/Button/Button.story.tsx
@@ -1,8 +1,10 @@
-import React from 'react';
-import { MANTINE_COLORS } from '@mantine/styles';
+import React, { CSSProperties } from 'react';
+import { MANTINE_COLORS, useMantineTheme } from '@mantine/styles';
import { IconExternalLink } from '@tabler/icons';
import { Button } from './Button';
import { Group } from '../Group';
+import { Center } from '../Center';
+import { BUTTON_VARIANTS } from './Button.styles';
export default { title: 'Button' };
@@ -31,12 +33,98 @@ export function Colors() {
return
{items}
;
}
-export function Disabled() {
+export function States() {
+ const theme = useMantineTheme();
+
+ const sharedStyles: CSSProperties = {
+ padding: '10px 20px',
+ border: `1px solid ${
+ theme.colorScheme === 'light' ? theme.colors.gray[1] : theme.colors.dark[6]
+ }`,
+ };
+
+ const states = [
+ {
+ name: 'enabled',
+ props: undefined,
+ },
+ {
+ name: 'disabled',
+ props: {
+ disabled: true,
+ },
+ },
+ {
+ name: 'loading',
+ props: {
+ loading: true,
+ },
+ },
+ ];
+
return (
-
-
-
-
+
+
+
+
+
+
+ |
+
+ {BUTTON_VARIANTS.map((variant) => (
+
+ {variant}
+ |
+ ))}
+
+
+
+ {states.map((state) => (
+
+
+ {state.name}
+ |
+
+ {BUTTON_VARIANTS.map((variant) => (
+
+
+
+
+ |
+ ))}
+
+ ))}
+
+
+
);
}
diff --git a/src/mantine-core/src/Button/Button.styles.ts b/src/mantine-core/src/Button/Button.styles.ts
index 02dc1f4d4e8..294e895ee4a 100644
--- a/src/mantine-core/src/Button/Button.styles.ts
+++ b/src/mantine-core/src/Button/Button.styles.ts
@@ -9,14 +9,17 @@ import {
} from '@mantine/styles';
import { INPUT_SIZES } from '../Input';
-export type ButtonVariant =
- | 'filled'
- | 'outline'
- | 'light'
- | 'gradient'
- | 'white'
- | 'default'
- | 'subtle';
+export const BUTTON_VARIANTS = [
+ 'filled',
+ 'outline',
+ 'light',
+ 'white',
+ 'default',
+ 'subtle',
+ 'gradient',
+] as const;
+
+export type ButtonVariant = typeof BUTTON_VARIANTS[number];
export interface ButtonStylesParams {
color: MantineColor;
@@ -137,6 +140,7 @@ export default createStyles(
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',
'&:active': {
transform: 'none',