Buttons

Sizes
<button class="button button--xl">{...}</button> <button class="button button--lg">{...}</button> <button class="button button--md">{...}</button> <button class="button button--sm">{...}</button> <button class="button button--xs">{...}</button>
Default
<button class="button button--md button--blue">{...}</button> <button class="button button--md button--yellow">{...}</button> <button class="button button--md button--red">{...}</button> <button class="button button--md button--green">{...}</button> <button class="button button--md button--purple">{...}</button> <button class="button button--md button--dark-blue">{...}</button> <button class="button button--md button--gray">{...}</button> <button class="button button--md button--light-gray">{...}</button> <button class="button button--md button--dark-gray">{...}</button>
Inverted
<button class="button button--md button--outline button--inverted">{...}</button>
Lineal
<button class="button button--md button--outline button--blue">{...}</button> <button class="button button--md button--outline button--yellow">{...}</button> <button class="button button--md button--outline button--red">{...}</button> <button class="button button--md button--outline button--green">{...}</button> <button class="button button--md button--outline button--purple">{...}</button> <button class="button button--md button--outline button--dark-blue">{...}</button> <button class="button button--md button--outline button--white">{...}</button> <button class="button button--md button--outline button--gray">{...}</button>
Link
<button class="button button--md button--link">{...}</button> <button class="button button--md button--link-dark">{...}</button> <button class="button button--md button--link-color">{...}</button> <button class="button button--md button--link-gray">{...}</button>
Disabled

The disabled class can be applied to anything, it will block any mouse or touch events over the object and change opacity to "0.65".

<button class="button button--md disabled">{...}</button>
Icons
<button class="button--md"> <i class="icon--home"></i> <span>{...}</span> </button> <button class="button--md"> <span>{...}</span> <i class="icon--home"></i> </button>
Icons only
<button class="button--md button--icon"> <i class="icon--home"></i> </button> <button class="button--md button--icon"> <i class="icon--home"></i> </button>
Social
<button class="button--sm button--google button--icon "> <i class="icon--google"></i> </button> <button class="button--sm button--google"> <i class="icon--google"></i> <span>Google</span> </button> <button class="button--md button--google"> <i class="icon--google"></i> <span>Google</span> </button> <button class="button--sm button--facebook button--icon "> <i class="icon--facebook"></i> </button> <button class="button--sm button--facebook"> <i class="icon--facebook"></i> <span>Facebook</span> </button> <button class="button--md button--facebook"> <i class="icon--facebook"></i> <span>Facebook</span> </button> <button class="button button--sm button--icon button--facebook--outline mg-right-lv4"> <i class="icon--facebook"></i> </button> <button class="button button--sm button--facebook--outline mg-right-lv4"> <i class="icon--facebook"></i> <span class="text__gray--oxford">Facebook</span> </button> <button class="button button--md button--facebook--outline mg-right-lv4"> <i class="icon--facebook"></i> <span class="text__gray--oxford">Facebook</span> </button> <button class="button--sm button--twitter button--icon "> <i class="icon--twitter"></i> </button> <button class="button--sm button--twitter"> <i class="icon--twitter"></i> <span>Twitter</span> </button> <button class="button--md button--twitter"> <i class="icon--twitter"></i> <span>Twitter</span> </button> <button class="button button--sm button--twitter--outline button--icon mg-right-lv4"> <i class="icon--twitter"></i> </button> <button class="button button--sm button--twitter--outline mg-right-lv4"> <i class="icon--twitter"></i> <span class="text__gray--oxford">Twitter</span> </button> <button class="button button--sm button--twitter--outline mg-right-lv4"> <i class="icon--twitter"></i> <span class="text__gray--oxford">Twitter</span> </button> <button class="button--sm button--instagram button--icon "> <i class="icon--instagram"></i> </button> <button class="button--sm button--instagram"> <i class="icon--instagram"></i> <span>Instagram</span> </button> <button class="button--md button--instagram"> <i class="icon--instagram"></i> <span>Instagram</span> </button> <button class="button--sm button--behance button--icon "> <i class="icon--behance"></i> </button> <button class="button--sm button--behance"> <i class="icon--behance"></i> <span>Behance</span> </button> <button class="button--md button--behance"> <i class="icon--behance"></i> <span>Behance</span> </button> <button class="button--sm button--dribbble button--icon "> <i class="icon--dribbble"></i> </button> <button class="button--sm button--dribbble"> <i class="icon--dribbble"></i> <span>Dribbble</span> </button> <button class="button--md button--dribbble"> <i class="icon--dribbble"></i> <span>Dribbble</span> </button> <button class="button--sm button--pinterest button--icon "> <i class="icon--pinterest"></i> </button> <button class="button--sm button--pinterest"> <i class="icon--pinterest"></i> <span>Pinterest</span> </button> <button class="button--md button--pinterest"> <i class="icon--pinterest"></i> <span>Pinterest</span> </button> <button class="button--sm button--youtube button--icon "> <i class="icon--youtube"></i> </button> <button class="button--sm button--youtube"> <i class="icon--youtube"></i> <span>Youtube</span> </button> <button class="button--md button--youtube"> <i class="icon--youtube"></i> <span>Youtube</span> </button> <button class="button--sm button--telegram button--icon "> <i class="icon--telegram"></i> </button> <button class="button--sm button--telegram"> <i class="icon--telegram"></i> <span>Telegram</span> </button> <button class="button--md button--telegram"> <i class="icon--telegram"></i> <span>Telegram</span> </button> <button class="button--sm button--whatsapp button--icon "> <i class="icon--whatsapp"></i> </button> <button class="button--sm button--whatsapp"> <i class="icon--whatsapp"></i> <span>Whatsapp</span> </button> <button class="button--md button--whatsapp"> <i class="icon--whatsapp"></i> <span>Whatsapp</span> </button>
States

State buttons can host two icons and change the visible icon with the active class, this is especially useful for popovers, triggers, models, etc.

Popover