Buttons

A real <button> for actions, or <a class="button"> when it navigates. Variants and sizes are small modifier classes; a group of actions is a div class="buttons".

<div class="buttons">
  <button>Primary</button>
  <button class="secondary">Secondary</button>
  <button class="ghost">Ghost</button>
  <a class="button" href="/go/">Link button</a>
</div>

Button group with primary, secondary, ghost and link button

Variants

Link button

<button>Primary</button>
<button class="secondary">Secondary</button>
<button class="ghost">Ghost</button>
<a class="button" href="/go/">Link button</a>

Primary, secondary and ghost variants plus link button

Sizes

<button class="small">Small</button>
<button>Default</button>
<button class="large">Large</button>

Small, default and large button sizes

A group of actions

<div class="buttons">
  <button>Save</button>
  <button class="secondary">Save &amp; close</button>
  <button class="ghost">Cancel</button>
</div>

Save, secondary save and close, and ghost cancel