Buttons

To use this module, follow the instructions in the README.

px-buttons-design

Small

<button class="btn btn--small btn--primary">…</button>
<button class="btn btn--small">…</button>
<button class="btn btn--small btn--tertiary">…</button>
<button class="btn btn--small btn--disabled">…</button>

Regular

<button class="btn btn--primary">…</button>
<button class="btn">…</button>
<button class="btn btn--tertiary">…</button>
<button class="btn btn--disabled">…</button>
<button class="btn btn--tertiary btn--icon">
  <i class="fa fa-…"></i>
</button>
<button class="btn btn--tertiary btn--icon">
  <i class="fa fa-…"></i>
</button>
<button class="btn btn--disabled btn--icon">
  <i class="fa fa-…"></i>
</button>

Large

<button class="btn btn--large btn--primary">…</button>
<button class="btn btn--large">…</button>
<button class="btn btn--large btn--tertiary">…</button>
<button class="btn btn--large btn--disabled">…</button>
<button class="btn btn--large btn--tertiary btn--icon">
  <i class="fa fa-…"></i>
</button>
<button class="btn btn--large btn--tertiary btn--icon">
  <i class="fa fa-…"></i>
</button>
<button class="btn btn--large btn--disabled btn--icon">
  <i class="fa fa-…"></i>
</button>

Huge

<button class="btn btn--huge btn--primary">…</button>
<button class="btn btn--huge">…</button>
<button class="btn btn--huge btn--tertiary">…</button>
<button class="btn btn--huge btn--disabled">…</button>
<button class="btn btn--huge btn--tertiary btn--icon">
  <i class="fa fa-…"></i>
</button>
<button class="btn btn--huge btn--tertiary btn--icon">
  <i class="fa fa-…"></i>
</button>
<button class="btn btn--huge btn--disabled btn--icon">
  <i class="fa fa-…"></i>
</button>

Button with Text & Icon

<button class=btn>
  <i class="fa fa-… mr--"></i>
  …
</button>

Icon as Button

<button class="btn btn--bare">
  <i class="fa fa-…"></i>
</button>