CODEWITHSUNDEEP
reactjsmaterial-ui
Trattles
Trattles

Reputation: 677

How to left align the label in a button

How do I get a material UI button to left align the label? There are no props to directly change the inline-styles on the button element and the only way I can figure to do this is to add a class and write some gross css selector like thisClass > div > button.

http://www.material-ui.com/#/components/raised-button

Upvotes: 19

Views: 35038

Answers (3)

Philip Sopher
Philip Sopher

Reputation: 783

This worked for me:

<Button
  sx={{ 
    textAlign: 'left',
  }}
>
  button text
</Button>

Upvotes: 2

Marc Steffens
Marc Steffens

Reputation: 381

I had a similar issue with buttons that have an icon. I fixed it by justifing the content:

<Button 
  startIcon={<AccountCircleIcon/>}
  fullWidth={true}
  style={{justifyContent: "flex-start"}}>
  button text
</Button>

Upvotes: 38

CaseyC
CaseyC

Reputation: 1482

You can give the label absolute positioning by using the labelStyle property on the element. This works:

 <RaisedButton 
  label="Primary" 
  primary={true} 
  lableStyle={{position: 'absolute',top: 0,left: -10}} />

Edit: Updating my answer with better ways to do this

Using text align on the button:

  <RaisedButton 
   style={{textAlign: 'left'}}
   label="Primary" 
   primary={true}/>

Using float on the label:

  <RaisedButton 
   lableStyle={{float: 'left'}}
   label="Primary" 
   primary={true}/>

Upvotes: 3

Related Questions