It may sound simple to create square IconButtons and “regular” Buttons in MUI. However, it requires more than just height and width being set to the same value. You also need to know the following:
- Which Button component should I use?
- How do I strip off default padding and margin?
- What classes can I target for styling?
- Do I need to set the border radius?
In this post I will give full code for making both MUI Button types a perfect square shape.
A Code Sandbox link is in the Resources section with links to additional useful posts.
How to Make a Square Material-UI IconButton
We’ll start by making an IconButton square because it has less default styling. This means we have less styling code to strip off.
The first necessary step is to set width and height to the same values. I recommend using a const. I chose a value of 40, which MUI will translate to 40px.
The next step is to remove the border radius (borderRadius: 0). MUI sets a border radius of 50% by default on the IconButton. This makes any border or background color into a circle shape.
Finally, I chose to add a border using the primary.main color. This is optional.
const iconButtonSides = 40;
//JSX
<IconButton
sx={{
width: iconButtonSides,
height: iconButtonSides,
borderRadius: 0,
border: "1px solid",
borderColor: "primary.main"
}}
aria-label="save"
>
<Save sx={{ color: "primary.main" }} />
</IconButton>Notice that I do not use the size prop. The values of the size prop don’t impact our IconButton’s width and height, they only impact font size.
Here’s how the code above renders. Notice that all border, padding, and width or height are equal.
How to Make a Square Material-UI “Regular” Button
The MUI Button component has more default styling than the IconButton. This is especially true if you add in an icon using the startIcon or endIcon props.
I again created a const for the width and height since they must be equal. In this case I set them to 64 because the Button has a min-width of 64px by default. If you need the Button to be smaller, strip off the default minimum width.
You might also choose to set padding: 0. This shouldn’t be necessary if you choose a size larger than the 64px default minimum width (or remove the min width), but keep it in mind.
I also removed border radius just like with the IconButton. However, the border radius defaults to 4px for the Button, not 50% like the IconButton, so if you don’t want square corners then leave the border radius alone. Then I added a 1px border.
If your Button has an Icon in it, you also need to remove the margin from the Icon. By default when using the startIcon prop, the Icon has margin left of -4px and margin right of 8px. Remove this to center the Button. The Icon is a child so you need the nested selector in the code below that targets the MuiButton-startIcon class.
const buttonSides = 64;
//JSX
<Button
aria-label="save"
variant="contained"
sx={{
width: buttonSides,
height: buttonSides,
borderRadius: 0,
border: "1px solid",
borderColor: "primary.main",
"& .MuiButton-startIcon": { margin: 0 }
}}
startIcon={<Save />}
></Button>Since the size prop only affects the Icon font size, but not the Button size, I left it off.
A square Button renders similarly to a square IconButton but the default padding is slightly different.
Resources
Related Links:
This does not cover the pressing of the IconButton, which still has the circular animation
Good point, disable the ripple with the disableRipple prop. Instead, use the .Mui-focusVisible class to create a nested selector and apply some focus or click styling. I’ll update the post to include this.