Buttons

<button class="button" type="button">Default</button>
<button class="button button--primary" type="submit">Primary</button>
<button class="button button--secondary" type="submit">Secondary</button>
<button class="button button--link" type="submit">Link</button>
Selector Description
type="" Required don't forget the type attribute. Requires one of the following values: ["submit", "button", "reset"]

States

If the states are toggled with extra classes you can add .has-, or with JavaScript .js-has- state classes.

<button class="button has-success" type="button">Default has Success</button>
<button class="button has-warning" type="button">Default has Warning</button>
<button class="button has-error" type="button">Default has Error</button>
<button class="button button--primary has-success" type="submit">Primary has Success</button>
<button class="button button--primary js-has-warning" type="submit">Primary has Warning</button>
<button class="button button--primary js-has-error" type="submit">Primary has Error</button>
<button class="button button--secondary has-success" type="submit">Secondary has Success</button>
<button class="button button--secondary js-has-warning" type="submit">Secondary has Warning</button>
<button class="button button--secondary js-has-error" type="submit">Secondary has Error</button>
<button class="button button--link has-success" type="submit">link has Success</button>
<button class="button button--link js-has-warning" type="submit">link has Warning</button>
<button class="button button--link js-has-error" type="submit">link has Error</button>

Full width

<button class="button button--block" type="submit">Default</button>
<button class="button button--block button--primary" type="submit">Primary</button>
<button class="button button--block button--secondary" type="submit">Secondary</button>
Selector Description
.button--block Required Modifier class

Even links can be turned into buttons.

Default Primary Secondary Link 
<a href="#" class="button">Default</a>
<a href="#" class="button button--primary">Primary</a>
<a href="#" class="button button--secondary">Secondary</a>
<a href="#" class="button button--link">Link</a>