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!

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!

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!

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!