Button

Primary button

<!-- primary button default -->
<!-- for type "primary" the modifier "--primary" can be omitted" -->
<button class="ui-btn">...</button>
<button class="ui-btn ui-btn--primary">...</button>

<!-- disabled button -->
<!-- add attribute "disabled" to prevent click and for the tabindex to be correct -->
<button class="ui-btn ui-btn--disabled" disabled>...</button>

<!-- button with icon -->
<button class="ui-btn ui-btn--primary">...<i class="ui-icon ui-icon--download ui-icon--light"></i></button>

Secondary button

<!-- secondary button (transparent bg) -->
<button class="ui-btn ui-btn--secondary">
  ...
  <!-- we MUST have both the dark and light icons to handle hover state -->
  <i class="ui-icon ui-icon--download"></i>
  <i class="ui-icon ui-icon--download ui-icon--light"></i>
</button>

<!-- secondary white button (transparent bg) -->
<button class="ui-btn ui-btn--secondary-white">
  ...
  <!-- we MUST have both the dark and light icons to handle hover state -->
  <i class="ui-icon ui-icon--download"></i>
  <i class="ui-icon ui-icon--download ui-icon--light"></i>
</button>

Color button

<!-- red button -->
<button class="ui-btn ui-btn--red">...</button>

<!-- green button -->
<button class="ui-btn ui-btn--green">...</button>

Pill button (large)

<!-- pill button highlight -->
<button class="ui-btn ui-btn--pill ui-btn--highlight">...</button>

<!-- pill button secondary -->
<!-- same as above: dark and light icons required for hover state -->
<button class="ui-btn ui-btn--pill ui-btn--secondary">...</button>

Pill button (small)

<!-- small pill button primary -->
<button class="ui-btn ui-btn--primary ui-btn--pill ui-btn--small">...</button>

<!-- small pill button secondary -->
<button class="ui-btn ui-btn--secondary ui-btn--pill ui-btn--small">...</button>

Circular button

<!-- circular button -->
<button class="ui-btn ui-btn--secondary ui-btn--circle">
  <i class="ui-icon ui-icon--close"></i>
  <i class="ui-icon ui-icon--close ui-icon--light"></i>
</button>

<!-- with badge -->
<button class="ui-btn ui-btn--secondary ui-btn--circle">
  <i class="ui-icon ui-icon--close"></i>
  <i class="ui-icon ui-icon--close ui-icon--light"></i>
  <span class="ui-badge"></span>
</button>

<!-- active -->
<button class="ui-btn ui-btn--secondary ui-btn--circle ui-btn--circle--active">...</button>