[Button] Variants don't consume the size prop

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Creating a button variant doesn’t seem to use the size prop. When a button and a variant button are placed next to each other they look misaligned.

export const components = {
  MuiButton: {
    defaultProps: {
      variant: 'contained'
    },
    variants: [
      {
        props: { variant: 'action' },
        style: {
          background: 'red'
        }
      }
    ]
  }
} as Components;

<div>
  <Button color="primary" size="large">
    Normal Button
  </Button>
  <Button color="secondary" size="large" variant="action">
    Variant Button
  </Button>
</div>

Expected behavior 🤔

I assumed size would be consumed so buttons and their variants could still be grouped together to have the same font sizes and padding etc.

Steps to reproduce 🕹

Steps:

1. Create a button variant
2. Try and use different sizes on the variant while comparing font size and padding to the normal button

Context 🔦

Create a button variant with different styles while still being able to consume the existing props like size. I’d like to be able to position the buttons next to each other and have them using the same font sizes and padding without looking misaligned.

Your environment 🌎

`npx @mui/envinfo`

System: OS: Windows 10 10.0.19044 Binaries: Node: 16.13.2 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.15 - C:\Program Files\nodejs\yarn.CMD npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: Not Found Edge: Spartan (44.19041.1266.0), Chromium (100.0.1185.44) npmPackages: @emotion/react: ^11.9.0 => 11.9.0 @emotion/styled: ^11.8.1 => 11.8.1 @mui/base: 5.0.0-alpha.77 @mui/material: ^5.6.2 => 5.6.2 @mui/private-theming: 5.6.2 @mui/styled-engine: 5.6.1 @mui/system: 5.6.2 @mui/types: 7.1.3 @mui/utils: 5.6.1 @types/react: ^18.0.6 => 18.0.6 react: ^18.0.0 => 18.0.0 react-dom: ^18.0.0 => 18.0.0 typescript: ^4.6.3 => 4.6.3

[siriwatknp]

@ZeeshanTamboli was right from the implementation perspective:

// Button.js
// ...button styles
    ...(ownerState.size === 'small' &&
      ownerState.variant === 'text' && {
        padding: '4px 5px',
        fontSize: theme.typography.pxToRem(13),
      }),
    ...(ownerState.size === 'large' &&
      ownerState.variant === 'text' && {
        padding: '8px 11px',
        fontSize: theme.typography.pxToRem(15),
      }),

The variant and size are combined to create a style. However, from DX perspective, at first I thought what @cheesestringer tried to do should work.

For me, sizes and colors should be independent. That would make customization a lot more intuitive and easy. Anyway, I don’t suggest doing anything at this point but it is something that we should consider for v6.

[ZeeshanTamboli]

Hi @cheesestringer ,

I assumed size would be consumed so buttons and their variants could still be grouped together to have the same font sizes and padding etc.

I don’t think this is possible with the variants key in the theme. Creating new component variants means you will have to define completely new styles to that component when that specific variant prop value is applied. Only the default styles are applied. That means for custom size: large with variant: action, you will have to separately define the padding and fontsize styles you need.

It will not pick the Button’s size: large styles. It only applies the default styles.

For more details see the docs: https://mui.com/material-ui/customization/theme-components/#creating-new-component-variants

As you can see for Large buttons, if you inspect, the padding applied are the default values 6px 16px, not of size: large having padding: '8px 11px'.

As for your use case, if you want to just have red background, you can instead of introducing new variant: action, simply apply it with the sx prop:

<Button color="secondary" size="large" sx={{ background: 'red' }}>
   ABC
</Button>