Buttons

icon classnames assigned to the button

.button.icon-left.ion-home
.button > .icon.ion-home
.button.icon-right.ion-home
.button > .icon.ion-home
.button.icon-left.ion-home
.button > .icon.ion-home
.button.button-small.icon-left.ion-home
.button.button-small > .icon.ion-home
.button.button-large.icon-left.ion-home
.button.button-large > .icon.ion-home
.button.icon.ion-home
.button > .icon.ion-home
.button.button-icon.ion-home
.button > .button-icon.ion-home

a.button default

Default .button-light .button-stable .button-positive .button-calm .button-balanced .button-energized .button-royal .button-dark

button.button default

a.button.button-large default

Default .button-light .button-stable .button-positive .button-calm .button-balanced .button-royal .button-dark

button.button. button-large default

a.button.button-small default

Default .button-light .button-stable .button-positive .button-calm .button-balanced .button-royal .button-dark

button.button.button-small

a.button.button-clear (Mixed in with others)

Default .button-light .button-stable .button-positive .button-calm .button-balanced .button-royal .button-dark

button.button.button-clear default

a.button-block (parent w/ padding)

Default .button-light .button-stable .button-positive .button-calm .button-balanced .button-assertive .button-energized .button-royal .button-dark

button.button-block (parent w/ padding)

a.button-icon (Borderless, 32px)

.button-clear Next .button-icon

button.button-icon (Borderless, 32px)

a.button-block.button-icon (Borderless, 32px)

button.button-block.button-icon (Borderless, 32px)

a.button-outline

Default .button-light .button-stable .button-positive .button-calm .button-balanced .button-assertive .button-energized .button-royal .button-dark

button.button-outline

a.button-block.button-outline (parent w/ padding)

Default .button-light .button-stable .button-positive .button-calm .button-balanced .button-assertive .button-energized .button-royal .button-dark

button.button-block.button-outline (parent w/ padding)

a.button-clear

Default .button-light .button-stable .button-positive .button-calm .button-balanced .button-assertive .button-energized .button-royal .button-dark

button.button-clear

a.button-block.button-clear (parent w/ padding)

Default .button-light .button-stable .button-positive .button-calm .button-balanced .button-assertive .button-energized .button-royal .button-dark

button.button-block.button-clear (parent w/ padding)

a.button-block (parent w/out padding)

Default .button-light .button-stable .button-positive .button-calm .button-balanced .button-assertive .button-energized .button-royal .button-dark

a.button-block (.button-full on the parent)

Default .button-light .button-stable .button-positive .button-calm .button-balanced .button-assertive .button-energized .button-royal .button-dark

button.button-block.button-full on each button and nothing on the parent

Disabled By ClassName Disabled By Attribute