Button

Useful for making <a>, <button> or <input type="submit"> elements appear actionable. Basic state is very plain so this element can be really flexible when it comes to modifiers and inheriting link styles.

Link
<a class="Button" href="#">Link</a>

<button class="Button" type="button">Button</button>

<input class="Button" type="submit" value="Input">

Modifier classes can be used to apply different colors.

<button class="Button Button--default" type="button">
  Default
</button>

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

<button class="Button Button--positive" type="button">
  Positive
</button>

<button class="Button Button--negative" type="button">
  Negative
</button>

Modifier classes specifically for dark backgrounds.

<button class="Button Button--defaultDark" type="button">
  Default Dark
</button>

<button class="Button Button--primaryDark" type="button">
  Primary Dark
</button>

It gets disabled by way of the [disabled] attribute.

<button class="Button Button--default" type="button" disabled>
  Disabled
</button>

<button class="Button Button--primary" type="button" disabled>
  Disabled
</button>

The display and size helpers can be used to make buttons full-width.

<button class="Button Button--default u-block u-sizeFull" type="button">
  Button
</button>