Buttons

Buttons are intended for action and thus should have appropriate weight. The standard button is given that weight with a little bit of depth and a strong hover. You can either indicate a button element or add a class of .button to any a element.

There are several mixin options available in the _buttons.scss file.

<button>Click Me</button>
<button class="disabled" disabled>Click Me</button>

<a class="button">Click Me</a>
<a class="button disabled" disabled>Click Me</a>

<input type="submit" class="button">
<input type="submit" class="button disabled" disabled>

<button class="rounded">Click Me</button>
<button class="rounded disabled" disabled>Click Me</button>

Inputs

Most common form control are the text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color. Please note that not all browsers support of these input types. Check the browser adoption before use. Requires the use of a specified type="" at all times.

<form novalidate>
  <label>Text Label</label>
  <input type="text" placeholder="Text goes here">
  <label>Email Label</label>
  <input type="email" placeholder="email@example.com">
  <label>URL Label</label>
  <input type="url" placeholder="http://example.com">
</form>

Checkboxes & Radio Buttons

Checkboxes are for making decisions between various choices.

<form novalidate>
  <label>Text Label</label>
  <input type="checkbox"> Option one
  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
  <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
</form>

Validation states

Showing validation states can help better communicate situations that users will have to deal with like error, warning, info, and success messages. To use, add the appropriate class to the surrounding .control-group.

HTML

<form novalidate>
	  <label>Text Label</label>
	  <input type="checkbox"> Option one
	  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
	  <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
	</form>

Rendered HTML