1 Buttons

Button styles can be applied to anything with the .button class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.

1.1 Base styles & states

:hover

Highlight the button when hovered.

:active

"Press" the button down when clicked.

:disabled

Make the button change appearance to reflect it being disabled.

<button class="button [modifier class]">Button Element</button>

1.2 Sizing

.m-wide

Button that fills up container width

<button class="button [modifier class]">Button Element</button>

1.3 Skins

.primary

Indicates that button will trigger primary user interaction

.remove

Indicates that button will trigger a destructive action

<button class="button [modifier class]">Button Element</button>