How to Align a Button to The Far Right in Mui Appbar

How to align a Button to the far right in MUI AppBar?

Toolbar is a flexbox, so you can add a div on the left side and set justify-content to space-between to push the Button to the right:

<Toolbar sx={{ justifyContent: "space-between" }}>
  <div />
  <SignUpForm />
</Toolbar>

What's the right way to float right or left using the material-ui appbar with material-ui-next?

@Kyle You had it right :)

just add to the grid container:

justify="space-between"

With your example:

<AppBar position="static">
  <Toolbar>
    <Grid
      justify="space-between" // Add it here :)
      container 
      spacing={24}
    >
      <Grid item>
        <Typography type="title" color="inherit">
          Title
        </Typography>
      </Grid>

      <Grid item>
        <div>
          <HeartIcon />
          <Button raised color="accent">
            Login
          </Button>
        </div>
      </Grid>
    </Grid>
  </Toolbar>
</AppBar>

MUI - How to align a component to the center/right?

BEFORE MUI 5:

Try this

<Grid container justify="flex-end">
     <Button>Example</Button>
</Grid>

UPDATE MUI 5: (Thanks to Dipak)

The prop justify of ForwardRef(Grid) is deprecated. Use justifyContent instead, the prop was renamed.

<Grid container justifyContent="flex-end">
     <Button>Example</Button>
</Grid>

Update: The best solution is the answer of NearHuscarl, you'd better use Stack than Grid.

Material-UI style buttons on the right

Change,

align: 'right'

To,

float: 'right'

So the code would look like,

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

const style = makeStyles({
  titleItemRight: {
    color: "white",
    backgroundColor: "blue",
    top: "50%",
    height: 30,
    float: "right",
    position: "relative",
    transform: "translateY(-50%)"
  }
});

const App = () => {
  const classes = style();

  return (
    <div>
      <Box className={classes.titleBar}>
        <Button variant="text" className={classes.titleItemRight}>
          Sign In
        </Button>
      </Box>
    </div>
  );
};

Working Codesandbox

align button right reactjs

You need to add display flex to the parent element of your Button.

See sandbox here for example: https://codesandbox.io/s/testproviderconsumer-klcsr

class App extends React.Component {
  render() {
    return (
      <div style={{ display: "flex" }}>
        <button
          style={{ marginLeft: "auto" }}
        >
          Click
        </button>
      </div>
    );
  }
}

{{display: 'flex', justifyContent: 'flex-end'}} are defined in the parent element to align items in the child element.

Aligning button to right of Login in nav bar

One of the handiest ways is to use CSS Flexbox

<Grid item style={{ display: "flex" }}>
  <Tabs>
    <Tab component={Link} label="Login" />
  </Tabs>
  <Button
    variant="contained"
    color="default"
    size="medium"
    // style={{ marginTop: '1.1em' }}
    // style={{ maxWidth: '108px', minWidth: '108px' }}
    onClick={() => {
      // handleClickImportPGN();
    }}
  >
    Try for Free
  </Button>
  {/* </Toolbar> */}
</Grid>;

But if you want to make use more of Material UI, you could try to have a few more Grid within each of the children elements.

Simplified Working Example:

Creating a Toolbar with both Left and Right Justified Elements with Material UI and React.js

function Header() {

    return (
      <ThemeProvider theme={theme}>
        <AppBar position="static">
          <Toolbar style={{display:"flex", justifyContent:"space-between"}}>
              <div>
            <MenuItem edge="start">
              <Link to="/" style={{textDecoration:"none", color:"black"}}>
                <Typography variant="h3">
                  <strong>Test</strong>Value
                  <img style={{width: 60, height: 'auto', verticalAlign: 'middle'}} src='/png/SQUID.png' alt="Squiddy :)"/>
                </Typography>
              </Link>
            </MenuItem>
            </div>
            <div>
            <MenuItem>
              <Link to={"/"} style={{ textDecoration: 'none' }}>
                <Button type="button" variant="outlined" color="secondary" float="right">Log-in</Button>
              </Link>
              <Link to={"/"} style={{ textDecoration: 'none' }}>
                <Button type="button" variant="contained" color="secondary" float="right">Register</Button>
              </Link>
            </MenuItem>
            </div>
          </Toolbar>
        </AppBar>
      </ThemeProvider>
    );
  }

Steps:

1. Wrap both groups (things on the left & things on the right) each into divs.

2. Add to their containing element (that is, the Toolbar):

display:flex;
justify-content:space-between;
align-items:center; // if you want to center both divs vertically, if they're of different height

3. Since I assume you want the buttons on the right to be horizontal, add this to the right div (not needed if you've got no block elements in the right group; links are inline by default):

display:flex;
align-items: center //vertical center

Also, make sure Toolbar's spanning its entire intended width, but I think that's the default behavior of MaterialUI's Toolbar.

Responding to a comment

If you want buttons in the right group to have some spacing, applying padding is the simplest solution. You can either apply padding separately to every element (I don't know if you've got only buttons there) to have some fine-grained control.

Or, if you wish to create equal spaces between all elements on the right:

.right-div > * + * {
padding-left: 20px;
padding-top: 20px; // use this one if you're stacking your buttons vertically
}

The above takes every element of the right group EXCLUDING the first one, and applies leftside padding to it, so the only spacing created is between the elements. Of course, you still can override the padding later for specific elements.

Remember you'll have to apply these styles somehow, up there I've assumed you'd add a "right-div" class to the right div.

If you're using MUI's styling solution instead of pure css, it'll look something like:

makeStyles({
    rightDiv:{
        "& > * + *":{
            paddingLeft:"20px"
        }
    }
})

With styled-components:

const RightDiv = styled.div`
& > * + * {
   paddingLeft:"20px"
}
`

In Material UI how do I align right one button in a flex column?

You can use Box component outside the CancelBtn like this.

<Box
  display="flex"
  justifyContent="flex-end"
>
  <CancelIcon className={cancelBtn} />
</Box>

Or like this.

<Box
  display="flex"
>
  <Box flexGrow={1} />
  <CancelIcon className={cancelBtn} />
</Box>

---

Related Topics