How to Align Buttons in Material-UI Using the Box Component

Material-UI’s Box component is the perfect tool for constructing your layout precisely as desired. In this example I will wrap Buttons in the Box component and align left, center, and right with justifyContent. I will align vertically with alignItems. Then I will add margin and padding for additional spacing.

Material-UI Buttons aligned in Box component
Material-UI Buttons aligned in Box component

This tutorial show both MUI v4 and v5 code examples for aligning in MUI. If you are looking for a replacement for float right and left in MUI, I show how to accomplish this with a combination of flex and space-between or space-around.

MUI Button Float Right and Left?
MUI Button Float Right and Left?

Here are some important related links for learning more about styling and aligning in Material-UI:

A Code Sandbox link with full JavaScript code is in the Resources section.

In these examples, a Button is aligned top-left, center-center, and bottom-right, respectively in each MUI Box. I’ve added a border to the Box components just for visibility. (Here’s a quick way to set border radius for all Box components in your app).

Each Box component has basic styling applied via the sx prop.

How to Align Right in MUI

It is a common requirement to right align components in a UI layout. In the below code example, I use the Box component to right align a button.

The Box component has props justifyContent and alignItems which can be used to quickly apply the CSS values justify-content and align-items. However, these values only work if display: flex is applied on the Box also.

These three flex values could have been applied using the sx styling prop, but I chose to utilize the Box shorthand props just to show how they work.

<Box
  m={1}
 //margin
  display="flex"
  justifyContent="flex-end"
  alignItems="flex-end"
  sx={boxDefault}
>
  <Button variant="contained" color="primary" sx={{ height: 40 }}>
    Primary
  </Button>
</Box>

The justifyContent="flex-end" value accomplishes the horizontal right alignment.

The alignItems=”flex-end” value accomplishes vertical bottom alignment. I added this just for

The prop values could have been applied using a class, but it’s pretty handy that MUI gives the shorthand. It makes the styling intention immediately obvious.

How to Align Left in MUI

Left alignment is the default alignment. However, it is good to understand how justifyContent works with left align.

Left alignment can be forced with justifyContent=”flex-start”. See the code example below of a left aligned Button in MUI’s Box component.

<Box
  m={1} //margin
  display="flex"
  justifyContent="flex-start"
  alignItems="flex-start"
  sx={boxDefault}
>
  <Button variant="contained" color="primary" sx={{ height: 40 }}>
    Primary
  </Button>
</Box>

I also added alignItems=”flex-start” to force vertical-top alignment. This is also the defautl.

How to Center a Button in MUI

Here’s a code example that uses the Material-UI Box component and flex to horizontally center a Button:

<Box
  m={1}
  display="flex"
  justifyContent="center"
  alignItems="center"
  sx={boxDefault}
>
  <Button variant="contained" color="primary" sx={{ height: 40 }}>
    Primary
  </Button>
</Box>

The justifyContent="center" creates the horizontal centering.

The alignItems="center" creates vertical centering.

Once again, these values only work if the Box wrapping the Button has display="flex" applied. Furthermore, these three flex values could have been applied via sx or the direct props I used.

How to Center Vertically in MUI Box

In the above three code examples, I vertically aligned a Button inside the MUI Box with alignItems. I’ll rehash the values below, but with the syntax needed for using them in the sx prop.

  • alignItems: "center" – vertically centers the Box contents
  • alignItems: "justify-start" – vertical-top alignment of the Box contents
  • alignItems: "justify-end" – vertical-bottom alignment of the Box contents

Pass one of these values to the Box’s sx prop, along with display: "flex", to achieve the desired vertical alignment.

Float Right or Left in MUI with Justify Content

Floating is an outdated form of CSS styling and should no longer be used. Instead, the flex system provides strong alternatives to float that can achieve the same results.

With display=”flex” applied to the MUI Box component, we can use justifyContent=”space-between” to move a Button to the far left and to the far right.

<Box
  component="span"
  m={1}
  display="flex"
  justifyContent="space-between"
  alignItems="center"
  sx={boxDefault}
>
  <Button variant="contained" color="primary" sx={{ height: 40 }}>
    Primary
  </Button>
  <Button variant="contained" color="secondary" sx={{ height: 40 }}>
    Secondary
  </Button>
</Box>

Recall the screenshot in the intro that showed an example of this.

Additional stylings are available that give a different control of the spacing around the Buttons. For example, the aptly named justifyContent=”space-around” will still float two Buttons left and right, but include more spacing between the buttons and the container edges.

MUI Button space-around
MUI Button space-around

The space-between and space-around layouts can be used with more than two children components as well.

How to Add MUI Button Margin and Padding

You may have noticed a prop simply called m in some of the previous examples. This is a margin system property available in MUI. In MUI v5 it pulls values from the theme spacing instead of simply converting to pixels.

The Box component can have these system props applied directly, but the Button must have them applied using the sx prop.

For example, <Button sx={{m: 1}}/> will wrap the Button in 8px of padding. <Button sx={{m: 2}}/> will wrap the Button in 16px of padding.

Other margin shorthands exist such as <Button sx={{mt: 1}}/>, which gives the Button 8px of margin-top. A few more are mb, ml, and mr. A full list of MUI system properties can be found here.

Button padding can be applied with similar system properties. For example, <Button sx={{p: 1}}/> adds 8px of padding to the Button. The padding system properties follow the same pattern as the margin system properties.

Remember, padding will add space inside the Button, while margin adds space outside the Button. You can think of the border as the separator between margin and padding.

Align Button in Box with v4 Syntax

If you are still using Material-UI v4, you can use the below code to accomplish the same styling. Notice that the alignment props haven’t changed. However, some of the system prop syntax has changed.

Included are the imports and useStyles syntax, as well as the JSX. I omitted the default export and return statement for brevity.

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Box from "@material-ui/core/Box";
import Button from "@material-ui/core/Button";

const useStyles = makeStyles((theme) => ({
  box: {
    height: 100,
    border: "1px solid black",
    padding: 8
  }
}));

//JSX
<Box
  m={1}
  display="flex"
  justifyContent="flex-end"
  alignItem="flex-end"
  className={classes.box}
>
  <Button variant="contained" color="primary" style={{ height: 40 }}>
    Primary
  </Button>
</Box>

Resources

Here’s how to use breakpoints to responsively lay out Buttons.

Here’s how to style background color, margin, padding, shadow, and hover on the Box component.

Are you looking for training in Material-UI? Check out my review of the best Material-UI course on Udemy, which has 40+ hours of content and a 30-day money back guarantee.

MUI v5 CodeSandbox for this article.

MUI v4 CodeSandbox for this article.

Share this post:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.