Buttons

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, quibusdam! Voluptatem tempora mollitia perferendis adipisci molestiae, veritatis magni pariatur beatae quo itaque excepturi suscipit, velit quam dignissimos, inventore sunt. Pariatur.

Atque cupiditate eius pariatur, aliquam dolore ipsum omnis, reprehenderit illum nesciunt, suscipit laboriosam magnam maiores obcaecati porro. Quam quidem, ducimus quos nam corporis, perspiciatis aut, aperiam eaque maiores laudantium nisi.

Regular

<button>...</button>
<button class="hover">...</button>
<button class="focus">...</button>
<button class="active">...</button>
<button disabled>...</button>
<button><svg class="icon">...</svg></button>

Colors

<button class="primary">Primary</button>
<button class="secondary">Secondary</button>
<button class="positive">Positive</button>
<button class="negative">Negative</button>

Loading

<button class="loading">...</button>
<button class="loading success">...</button>

Labels

<button>
  <span class="label">
    <svg class="icon"></svg>
  </span>
  ...
</button>
<button>
  <span class="label">Label</span>
  ...
</button>

Sizes

<button class="mini">...</button>
<button class="small">...</button>
<button class="medium">...</button>
<button>...</button>
<button class="large">...</button>
<button class="big">...</button>
<button class="huge">...</button>
<button class="massive">...</button>

Groups

<div class="group">
  <button>...</button>
  <button>...</button>
  <button>...</button>
  <button disabled>...</button>
</div>