Buttons

There are 4 types of buttons you can choose from which are: contained, outline, text and toggle.

Eacht button uses the .button class but from there they are different.

Text

A text button can simply be made by using the following class .button__text. If you would also like to add an icon, it is also needs the class .button__text--icon-left or .button__text--icon-right. This depends on where you would like to position the icon.

    
<button class="button button--text">Send</button>

<button class="button button--text" disabled>Send</button>

<button class="button button--text button--text--icon-left">
    <i class="material-icons icon">send</i>
    Send
</button>

<button class="button button--text button--text--icon-right">
    Send
    <i class="material-icons icon">send</i>
</button>

Contained

A contained button can simply be made by using the following class .button__contained. If you would also like to add an icon, it is also needs the class .button__contained--icon-left or .button__contained--icon-right. This depends on where you would like to position the icon.

    
<button class="button button--contained">Send</button>

<button class="button button--contained" disabled>Send</button>

<button class="button button--contained button--contained--icon-left">
    <i class="material-icons icon">send</i>
    Send
</button>

<button class="button button--contained button--contained--icon-right">
    Send
    <i class="material-icons icon">send</i>
</button>

Outlined

The outlined button uses and has the same classes except with outlined.

    
<button class="button button--outlined">Send</button>

<button class="button button--outlined" disabled>Send</button>

<button class="button button--outlined button--outlined--icon-left">
    <i class="material-icons icon">send</i>
    Send
</button>

<button class="button button--outlined button--outlined--icon-right">
    Send
    <i class="material-icons icon">send</i>
</button>

Toggle

The toggle button can be used as a button group.

    
<button class="button button--toggle">
    <i class="material-icons icon">format_bold</i>
</button>
<button class="button button--toggle">
    <i class="material-icons icon">format_italic</i>
</button>
<button class="button button--toggle" disabled>
    <i class="material-icons icon">format_size</i>
</button>