Buttons

Buttons help people initiate actions, from sending an email, to sharing a document, to liking a post.

Basic Buttons

The Basic buttons are available in 4 states as shown below which can be toggled by using btn---primary, btn---success and btn---warning and btn---critical .

Primary Button

Succcess Button

Critical Button

Warning Button

Implementation

Choose your Button type and off you go!



<button class="btn btn--primary">
<span class="material-icons">send</span>
Submit
</button>

Link Buttons

The linked variant buttons as shown below are best suited for navigation, and can be toggled by using btn--link and then btn--ltr and btn--rtl for choosing directions.

LTR Button

RTL Button

Implementation

Not everyone likes to be independent. Some prefer cute little nudges!

  
<!-- Link Button -->
<button class="btn btn--link btn--ltr">
<span class="material-icons">arrow_back</span>
<a href="#">Previous</a>
</button>

Icon Buttons

The Icon Buttons are small mini buttons with a touch of material icons and also have 2 variants shown below which can be toggled by using icon---btn along with the variants using --tonal and --outline .

Icon Button

Icon Tonal

Icon Outlined

Implementation

Choices, Choices, so many beautiful choices!

             
        <!-- Icon Button -->
        <button class="btn btn--icon btn--icon">
        <span class="material-icons">cloud</span>
        <a href="#">Upload</a>
        </button>

Floating Action Button

The inputs also have 3 States shown below which can be toggled by using btn---fab along with the respective variants using fab--extend and fab--squircle.

Implementation

Not everyone likes to be round and perfect. Some prefer cuter rounder corners!

                      
    <!-- FAB Extended -->
    <button class="btn btn--fab fab--extend fab--bottomleft">
    <span class="material-icons">add</span>
    <a href="#">Add</a>
    </button>