Buttons

Action links and form submission elements should be styled as buttons.

<input type='button' class='button' value='Button (button.button)' name='' />
<a href='#' class='button'>Anchor (a.button)</a>
<a href='#' class='button loud'>.button.loud</a>
<a href='#' class='button short'>.button.short</a>
<a href='#' class='button quiet'>.button.quiet</a>
<a href='#' class='button disabled'>.button.disabled</a>

<a href='#' class='button quiet'>.button.stroke</a>
<a href='#' class='button disabled'>.stroke.stroke.quiet</a>

Horizontal grouped buttons

A parent container with the pill class will fuse buttons together. Use HTML comments between buttons to avoid character whitespace.

<div class='pill'><!--
  --><a href='#' class='button'>Pizza Dog</a><!--
  --><a href='#' class='button'>Penny Dog</a><!--
  --><a href='#' class='button'>Charlotte Dog</a>
</div>
<div class='pill'><!--
  --><a href='#' class='button stroke'>Pizza Dog</a><!--
  --><a href='#' class='button stroke'>Penny Dog</a><!--
  --><a href='#' class='button stroke'>Charlotte Dog</a>
</div>

Vertical grouped buttons

Elements inside the pill container with a col12 class will stack vertically instead of horizontally.

<div class='pill'><!--
  --><a href='#' class='col12 button'>Pizza Dog</a><!--
  --><a href='#' class='col12 button'>Penny Dog</a><!--
  --><a href='#' class='col12 button'>Charlotte Dog</a><!--
--></div>
<div class='pill'><!--
  --><a href='#' class='col12 button stroke'>Pizza Dog</a><!--
  --><a href='#' class='col12 button stroke'>Penny Dog</a><!--
  --><a href='#' class='col12 button stroke'>Charlotte Dog</a><!--
--></div>

Icon buttons

Use the icon or rcon classes to add icons to buttons.

<a href='#' class='button icon sun'>Style</a>
<a href='#' class='button icon home'></a>
<a href='#' class='button rcon next'>More</a>
<a href='#' class='button icon plus loud'>Add</a>
<a href='#' class='button icon plus quiet'>Add</a>

Button with input

<div class='input-pill col12'>
  <input class="col8" type="text" placeholder="filename">
  <input class="button col4" type="submit" value="Submit">
</div>

Rounded toggle

Rounded toggles are used to toggle between filters, sorts or listing modifiers. Can be used with HTML inputs or a elements.

<div class='rounded-toggle inline'>
  <input id='pizza' type='radio' name='rtoggle' value='pizza' checked='checked'>
  <label for='pizza'>Pizza Dog</label>
  <input id='penny' type='radio' name='rtoggle' value='penny'>
  <label for='penny'>Penny Dog</label>
  <input id='charlotte' type='radio' name='rtoggle' value='charlotte'>
  <label for='charlotte'>Charlotte Dog</label>
</div>

<div class='rounded-toggle inline'>
  <a class='active' href='#'>Pizza Dog</a>
  <a href='#'>Penny Dog</a>
  <a href='#'>Charlotte Dog</a>
</div>

Short Rounded toggle

Fits inside short inputs.

<div class='rounded-toggle short inline'>
  <a class='active' href='#'>Pizza Dog</a>
  <a href='#'>Penny Dog</a>
  <a href='#'>Charlotte Dog</a>
</div>