Button Component

<div class="spr-inline-container-md spr-stack-md">
  <button class="spr-btn spr-btn-primary">Primary</button>
  <a href="javascript:;" class="spr-btn spr-btn-secondary">Secondary</a>
  <button class="spr-btn spr-btn-error">Error</button>
  <button class="spr-btn spr-btn-secondary spr-btn-error">Secondary Error</button>
  <button class="spr-btn spr-btn-error">Icon Right <i class="spr-icon spr-icon-right spr-icon-info"></i> </button>
  <button class="spr-btn spr-btn-secondary spr-btn-error">Icon Right <i class="spr-icon spr-icon-right spr-icon-info"></i> </button>
  <button class="spr-btn spr-btn-primary"><i class="spr-icon spr-icon-left spr-icon-info"></i> Icon Left</button>
</div>
<div class="spr-inline-container-md spr-stack-md">
  <button class="spr-btn spr-btn-link">Link</button>
  <button class="spr-btn spr-btn-lg spr-btn-primary">Large Primary</button>
  <button class="spr-btn spr-btn-sm spr-btn-secondary">Small Secondary</button>
  <button class="spr-btn spr-btn-icon spr-btn-sm"><i class="spr-icon spr-icon-more"></i></button>
  <button class="spr-btn spr-btn-icon spr-btn-md"><i class="spr-icon spr-icon-more"></i></button>
  <button class="spr-btn spr-btn-icon spr-btn-lg"><i class="spr-icon spr-icon-more"></i></button>
  <button class="spr-btn spr-btn-icon-secondary spr-btn-sm"><i class="spr-icon spr-icon-more"></i></button>
  <button class="spr-btn spr-btn-icon-secondary spr-btn-md"><i class="spr-icon spr-icon-more"></i></button>
  <button class="spr-btn spr-btn-icon-secondary spr-btn-lg"><i class="spr-icon spr-icon-more"></i></button>
</div>
<div class="spr-inline-container-md spr-stack-md">
  <button class="spr-btn spr-btn-primary spr-btn-spinner">
    <div class="spr-spinner-container">
      <svg viewBox="0 0 24 24">
        <circle class="spr-spinner" cx="12" cy="12" r="10.5" fill="none" stroke-width="3"></circle>
      </svg>
   </button>
  <button class="spr-btn spr-btn-secondary spr-btn-spinner">
    <div class="spr-spinner-container">
      <svg viewBox="0 0 24 24">
        <circle class="spr-spinner" cx="12" cy="12" r="10.5" fill="none" stroke-width="3"></circle>
      </svg>
   </button>
  <button class="spr-btn spr-btn-error spr-btn-spinner">
    <div class="spr-spinner-container">
      <svg viewBox="0 0 24 24">
        <circle class="spr-spinner" cx="12" cy="12" r="10.5" fill="none" stroke-width="3"></circle>
      </svg>
   </button>
  <button class="spr-btn spr-btn-error spr-btn-secondary spr-btn-spinner">
    <div class="spr-spinner-container">
      <svg viewBox="0 0 24 24">
        <circle class="spr-spinner" cx="12" cy="12" r="10.5" fill="none" stroke-width="3"></circle>
      </svg>
   </button>
  <button class="spr-btn spr-btn-link spr-btn-spinner">
    <div class="spr-spinner-container">
      <svg viewBox="0 0 24 24">
        <circle class="spr-spinner" cx="12" cy="12" r="10.5" fill="none" stroke-width="3"></circle>
      </svg>
   </button>
</div>
<div class="spr-inline-container-md">
  <button class="spr-btn spr-btn-primary spr-btn-block">Full Width</button>
</div>

@import 'components/button';