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

Question

I can't figure out if I'm using the right approach to get the login/logout buttons to float right in while using material-ui-next ("material-ui": "^1.0.0-beta.22",)

It seems they removed iconElementRight= from the api. Do we have to use the <Grid> now in the appbar? It feels kinds of cludgy. What's the right way to float buttons (e.g. login) in the appbar?

<AppBar position="static">       <Toolbar>         <Grid container spacing={24}>           <Grid item xs={11}>             <Typography type="title" color="inherit">               Title             </Typography>           </Grid>            <Grid item xs={1}>             <div>               <HeartIcon />               <Button raised color="accent">                 Login               </Button>             </div>           </Grid>         </Grid>       </Toolbar>     </AppBar> 

Answer 1

@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>