The MUI Button can be styled with a perfect size to fit your UI requirements. MUI provides several options for controlling Button size:
- sx prop CSS values
- style system shorthand – spacing, m, p
- size prop
The Button is created with the border-box layout, so any border and padding are counted as part of the total width and height of the Button.
I will create some example Buttons and show full code. I will also take a look at the ‘Computed’ section of dev tools and examine the calculated sizing of the Button.
If you are using an MUI IconButton, sizing and styling are very similar to the MUI Button.
MUI Button Width
I will set Button width first with the size prop and then with sx width values and we’ll take a look at the difference.
Here’s an example of two Buttons where both have size="small".
<Button variant="outlined" size="small">
Small Button
</Button>
<Button variant="outlined" size="small">
Also Small Button
</Button>Interestingly, the size prop doesn’t directly control width. It is actually affecting the padding. The width is dynamic based on the content.
If you want to set a fixed width, you need to use the sx prop. Here’s an example:
<Button
variant="outlined"
sx={{ width: 200, padding: 1, margin: 2 }}
>
Sized Button
</Button>
Notice that even though the width is 200px, the “computed” width leaves space for padding and border. This is because the Button uses box-model: border-box by default.
If you need a full width Button, set prop fullWidth: true and remove any width set on the sx prop.
MUI Button Height
In this example I created a Button with an icon and text underneath the icon.
The Button dynamically renders its height based on the Button contents. If you want a fixed height, you can manually set the height using the sx prop.
<Button variant="outlined" sx={{height: 100}}>
<Stack direction="column" alignItems="center" justifyContent={"center"}>
<SaveIcon />
<Typography>Saved</Typography>
</Stack>
</Button>MUI Button Margin and Padding
MUI Button Margin and Padding can be controlled using system shorthand values.
<Button variant="outlined" sx={{m: 4, p: 4}}>Spaced Button</Button>In this example I set m (margin) and p (padding) at 4. This corresponds to 32px. Also, this is margin and padding on all sides. A few examples of other shorthand values are: mt (margin-top) and pl (padding-left).
You can also use traditional CSS values with JSS syntax like marginTop: 16px and paddingLeft: 8px.
MUI Button Font Size
If you are trying to perfectly size a Button, font size matters because the Button will dynamically size larger for bigger font sizes. Take a look at these Buttons:
<Button variant="outlined" sx={{fontSize: 24}}>Big Text Button</Button>
<Button variant="outlined" sx={{fontSize: 8}}>Little Text Button</Button>The only difference is the font size, but the Buttons render in dramatically different sizes. This is important to consider when creating a layout. It may be wise to keep font sizes consistent or to give fixed widths to Buttons with different font sizes.
Resources
Here are related posts:
