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. Simply wrap a component with Box and set internal margin, padding, and more.

***Update for MUI 5: Take a look at the new Stack component for handling one-dimensional vertical and horizontal layouts! Also, Material-UI moved to a new styling API where styling is applied using the sx prop. If you are using MUI v5, simply insert the styling code directly into the sx prop instead of using makeStyles and classes. The Box component can accept styling props like mt or these can be passed to sx. I am working on updating my articles, but until I’m finished, read my guide to the MUI sx prop to learn more.

A Code Sandbox link with full JavaScript code is in the Resources section. There are also resources for aligning with MUI’s Grid, aligning with MUI’s Flexbox system, and more layout options.

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.

Justify and Align Button components

Let’s take a look at an example of Material-UI Button position. In this example, a button is aligned top-left, center-center, and bottom-right, respectively in each 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).

Image for post

align-items accomplishes the vertical positioning. justify-content accomplishes the horizontal positioning. These two properties can have values of flex-start (top or left), center, and flex-end (bottom or right).

First, the top-left button:

//styling
box: {
  height: 100,
  display: "flex",
  border: "1px solid black", 
  padding: 8
},
topLeftBox: {
  justifyContent: "flex-start",
  alignItems: "flex-start"
}

//JSX
<Box
  component="span"
  m={1} //margin
  className={`${classes.topLeftBox} ${classes.box}`}
>
  <Button 
    variant="contained" 
    color="primary" 
    style={{ height: 40 }}
  >
    Primary
  </Button>
</Box>

The m property sets the margin. m={0} is no margin, m={1} is a margin of 8px. Here’s another great example of margin shorthand.

The center button:

//styling
box: {
  height: 100,
  display: "flex",
  border: "1px solid black",
  padding: 8
},
centerBox: {
  justifyContent: "center",
  alignItems: "center"
}

//JSX
<Box
  component="div"
  m={1} //margin
  className={`${classes.centerBox} ${classes.box}`}
>
  <Button 
    variant="contained" 
    color="primary" 
    style={{ height: 40 }}
  >
    Primary
  </Button>
</Box>

In the center button, I set component=“div” instead of “span” simply to test what happened. This rendered a div element instead of span element in the DOM. However, the styling of the elements was the same. The flex behavior was identical. Interestingly, the spans are behaving as block level elements just like the div is.

Image for post

The bottom-right button:

//styling
box: {
  height: 100,
  display: "flex",
  border: "1px solid black",
  padding: 8
},
centerBox: {
  justifyContent: "flex-end",
  alignItems: "flex-end"
}

//JSX
<Box
  component="span"
  m={1} //margin
  className={`${classes.bottomLeftBox} ${classes.box}`}
>
  <Button 
    variant="contained" 
    color="primary" 
    style={{ height: 40 }}
  >
    Primary
  </Button>
</Box>

You may want to justify right Button components in AppBar, Container, Grid, and so on. Similar CSS to the above example can be used in many scenarios.

Using flex and justifyContent: flex-end is a far more predictable way to position items than using something like float: right. (If you found this article by searching for material-ui button float right, as some have, I encourage you to use more modern CSS styling properties).

Aligning multiple buttons in a Box

Image for post

There are a number of ways to accomplish a regular layout of multiple buttons inside a Box, but this example simply uses justifyContent: “space-around” .

//styling
box: {
  height: 100,
  display: "flex",
  border: "1px solid black",
  padding: 8
},
spreadBox: {
  justifyContent: "space-around",
  alignItems: "center"
}
//JSX
<Box
  component="span"
  m={1}
  className={`${classes.spreadBox} ${classes.box}`}
>
  <Button 
    variant="contained" 
    color="primary" 
    style={{ height: 40 }}
  >
    Primary
  </Button>
  <Button 
    variant="contained" 
    color="secondary" 
    style={{ height: 40 }}
  >
    Secondary
  </Button>
</Box>

Another option would be justifyContent: “space-between” . It produces the below result:

Image for post

More Resources

This article mostly focused on flex properties on the parent element. If you want to learn more about child flex properties, read how to use Material-UI’s Flexbox System.

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

Codesandbox for this article

See this article for aligning items in every possible way in a Material-UI Grid.

Take a look at the Material-UI category link on this site for 50+ articles about Material-UI Table, TextField, and Grid components, styling, custom theming, and more.

Share this post:

Leave a Comment

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