Buttons

Sizes
<button class="button button--xl button--flat">{...}</button> <button class="button button--lg button--flat">{...}</button> <button class="button button--md button--flat">{...}</button> <button class="button button--sm button--flat">{...}</button> <button class="button button--xs button--flat">{...}</button>
UI Colors
<button class="button button--md button--blue button--flat">{...}</button> <button class="button button--md button--yellow button--flat">{...}</button> <button class="button button--md button--red button--flat">{...}</button> <button class="button button--md button--green button--flat">{...}</button> <button class="button button--md button--purple button--flat">{...}</button> <button class="button button--md button--gray button--flat">{...}</button>
Inverted
<button class="button button--md button--outline button--inverted">{...}</button>
Outline
<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--gray">{...}</button>
Pill
<button class="button button--md button--flat button--pill button--blue">{...}</button> <button class="button button--md button--flat button--pill button--yellow">{...}</button> <button class="button button--md button--flat button--pill button--red">{...}</button> <button class="button button--md button--flat button--pill button--green">{...}</button> <button class="button button--md button--flat button--pill button--purple">{...}</button> <button class="button button--md button--flat button--pill button--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 button--flat button--main--hover disabled">{...}</button>
Icons
<button class="button--md button--flat button--icon button--main--hover"> <i class="icon icon--sm icon--mg-md icon--home"></i> <span>{...}</span> </button> <button class="button--md button--flat button--icon button--main--hover"> <span>{...}</span> <i class="icon icon--sm icon--mg-md icon--home"></i> </button>
Icons only
<button class="button--md button--flat button--icon button--icon--only button--main--hover"> <i class="icon icon--sm icon--mg-md icon--home"></i> </button> <button class="button--md button--flat button--icon button--icon--only button--main--hover"> <i class="icon icon--sm icon--mg-md icon--home"></i> </button>
Social
<button class="button--md button--flat button--facebook button--icon button--icon--only button--main--hover"> <i class="icon icon--sm icon--mg-md icon--twitter"></i> </button> <button class="button--md button--flat button--twitter button--icon button--icon--only button--main--hover"> <i class="icon icon--sm icon--mg-md icon--twitter"></i> </button> <button class="button--md button--flat button--instagram button--icon button--icon--only button--main--hover"> <i class="icon icon--sm icon--mg-md icon--instagram"></i> </button> <button class="button--md button--flat button--behance button--icon button--icon--only button--main--hover"> <i class="icon icon--sm icon--mg-md icon--behance"></i> </button> <button class="button--md button--flat button--dribbble button--icon button--icon--only button--main--hover"> <i class="icon icon--sm icon--mg-md icon--dribbble"></i> </button> <button class="button--md button--flat button--google button--icon button--icon--only button--main--hover"> <i class="icon icon--sm icon--mg-md icon--google"></i> </button> <button class="button--md button--flat button--pinterest button--icon button--icon--only button--main--hover"> <i class="icon icon--sm icon--mg-md icon--pinterest"></i> </button> <button class="button--md button--flat button--stumbleupon button--icon button--icon--only button--main--hover"> <i class="icon icon--sm icon--mg-md icon--stumbleupon"></i> </button> <button class="button--md button--flat button--vimeo button--icon button--icon--only button--main--hover"> <i class="icon icon--sm icon--mg-md icon--vimeo"></i> </button> <button class="button--md button--flat button--youtube button--icon button--icon--only button--main--hover"> <i class="icon icon--sm icon--mg-md icon--youtube"></i> </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