Buttons

A button is a UI element that requires action by the user to perform a function.

For the purposes of consistency, buttons and links can be styled to look identical.


Link
<a href="" class="btn button-primary">Link</a>

<button class="btn button-primary" type="button">Button</button>

Button Types

Error Success Info Dark Disabled
<a href="" class="btn btn-error mobile-full">Error</a>

<a href="" class="btn btn-success mobile-full">Success</a>

<a href="" class="btn btn-info mobile-full">Info</a>

<a href="" class="btn btn-black mobile-full">Dark</a>

<a href="" class="btn button-primary js-disabled mobile-full">Disabled</a>

Button Sizes

Extra Large Large Default Small
<a href="" class="btn button-primary btn-xl mobile-full">Extra Large</a>

<a href="" class="btn button-primary btn-lg mobile-full">Large</a>

<a href="" class="btn button-primary mobile-full">Default</a>

<a href="" class="btn button-primary btn-sm mobile-full">Small</a>