MaterialUI: how to align button in x-axis end of the axis? - reactjs

Question

I have a navbar component that looks like
<AppBar position="static" color="inherit">
<Toolbar className={classes.toolbar}>
<IconButton edge="start" color="inherit" aria-label="menu" onClick={toggleDrawer(true)}>
<MenuIcon />
</IconButton>
<Link href="#" color="primary" underline="none" variant="h5" className={classes.brand}>
{brand}
</Link>
<Button variant="contained" color="secondary" className={classes.primaryAction}>{content['primary-action']}</Button>
</Toolbar>
However the <Button variant="contained> is placed before the Link, how can I place the button all the way to the end of the x axis?
This is the styles
const useStyles = makeStyles((theme: Theme) => ({
toolbar: {
minHeight: 200
},
brand: {
lineHeight: 1,
position: 'absolute',
left: '50%',
top: '50%',
transform: 'translate(-50%, -50%)'
},
primaryAction: {
justifySelf: 'end'
},
iconWrapper: {
minWidth: 40,
},
}));

Answer 1

Try to apply flexGrow: 1 on the link and align it right:
<AppBar position="static" color="inherit">
<Toolbar className={classes.toolbar}>
<IconButton edge="start" color="inherit" aria-label="menu" onClick={toggleDrawer(true)}>
<MenuIcon />
</IconButton>
<Link href="#" color="primary" underline="none" variant="h5" sx={{ flexGrow: 1, textAlign: 'right' }}>
{brand}
</Link>
<Button variant="contained" color="secondary" className={classes.primaryAction}>{content['primary-action']}</Button>
</Toolbar>

Answer 2

Try using CSS flex to place the buttons and link inside the toolbar.
Here's a working CodeSandbox. (Note that if you want the Link to come after the Button, just move the component below the Button in the code as per the comment I left).
Here's the JSX:
<AppBar position="static" color="inherit">
<Toolbar className={classes.toolbar}>
<IconButton
edge="start"
color="inherit"
aria-label="menu"
onClick={toggleDrawer(true)}
>
<MenuIcon />
</IconButton>
<div className={classes.verticalCenter}>
{/* Just move this link to come after the Button below to change the order */}
<Link
href="#"
color="primary"
underline="none"
variant="h5"
className={classes.brand}
>
{brand}
</Link>
<Button
variant="contained"
color="secondary"
className={classes.primaryAction}
>
{content["primary-action"]}
</Button>
</div>
</Toolbar>
</AppBar>
And the CSS:
const useStyles = makeStyles((theme) => ({
toolbar: {
minHeight: 200,
display: "flex",
justifyContent: "space-between"
},
brand: {
lineHeight: 1,
padding: 16
},
primaryAction: {
justifySelf: "flex-end"
},
iconWrapper: {
minWidth: 40
},
verticalCenter: {
display: "flex",
alignItems: "center"
}
}));