Buttons: FAB
There are a couple types of FAB's that you can use. For now you can use the default, mini and extended.
Each FAB uses the .fab class but from there they are different.
FAB
For the default FAB you don't need to use any additional classes.
For the mini FAB all you need to do is add an additional class .fab--mini
<button class="fab">
<i class="material-icons icon">person</i>
</button>
<button class="fab" disabled>
<i class="material-icons icon">person</i>
</button>
<button class="fab fab--mini">
<i class="material-icons icon">person</i>
</button>
<button class="fab fab--mini" disabled>
<i class="material-icons icon">person</i>
</button>
Extended FAB
For the extended fab you can add the class .fab--extended.
When adding in an icon you can change the style depending on the position of the icon by using one of the follow classes:
.fab--extended--icon-left or .fab--extended--icon-right
<button class="fab fab--extended">
Extended fab
</button>
<button class="fab fab--extended" disabled>
Extended fab
</button>
<button class="fab fab--extended fab--extended--icon-left">
<i class="material-icons icon">person</i>
Person
</button>
<button class="fab fab--extended fab--extended--icon-left" disabled>
<i class="material-icons icon">person</i>
Person
</button>
<button class="fab fab--extended fab--extended--icon-right">
Person
<i class="material-icons icon">person</i>
</button>
Settings
| Scss | CSS | Result |
|---|---|---|
| $fab-size | --fab-size | Change fab size |
| $fab-padding | --fab-padding | Change fab padding |
| $fab-background | --fab-background | Change fab background |
| $fab__icon-size | --fab__icon-size | Change fab icon size |
| $fab--hover-background | --fab--hover-background | Change fab hover background |
| $fab--active-background | --fab--active-background | Change fab active background |
| $fab--mini-size | --fab--mini-size | Change fab mini size |
| $fab--mini-padding | --fab--mini-padding | Change fab mini padding |
| $fab--extended-height | --fab--extended-height | Change fab extended height |
| $fab--extended-border-radius | --fab--extended-border-radius | Change fab extended border radius |
| $fab--extended-padding | --fab--extended-padding | Change fab extended padding |
| $fab--extended--icon-left-padding | --fab--extended--icon-left-padding | Change fab extended icon left padding |
| $fab--extended--icon-left__icon-margin-right | --fab--extended--icon-left__icon-margin-right | Change fab extended icon left icon margin right |
| $fab--extended--icon-right-padding | --fab--extended--icon-right-padding | Change fab icon right padding |
| $fab--extended--icon-right__icon-margin-left | --fab--extended--icon-right__icon-margin-left | Change fab icon right icon margin left |