Add List Button.

src/App.vue

@@ -56,6 +56,14 @@
         />
       </div>
     </div>
+    <div class="row">
+      <div class="col my-3 d-flex align-items-center">
+        <buttonPrimary
+          buttonText="List Button"
+          class="list-button"
+        />
+      </div>
+    </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
         <a href="#">Text Link</a>

src/assets/img/icons/button-spinner-green.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" xml:space="preserve">
+  <path d="M2.1 16C2.1 8.3 8.3 2.1 16 2.1c3.8 0 7.2 1.5 9.7 4l1.4-1.4C24.3 1.9 20.3.1 16 .1 7.2.1.1 7.3.1 16.1l2-.1c0 .1 0 0 0 0z" fill="#73e5b9"/>
+</svg>

src/assets/scss/components/_buttons.scss

@@ -16,7 +16,7 @@
     &.button-loader {
       padding: 0 40px 0 12px;
       &:after {
-        content: url(../../assets/img/icons/button-spinner.svg);
+        content: url(../../assets/img/icons/button-spinner-white.svg);
         position: absolute;
         right: 14px;
         width: 16px;
@@ -56,6 +56,32 @@
     display: flex;
     justify-content: space-between;
   }
+  &.list-button {
+    position: relative;
+    background: $white;
+    height: 48px;
+    transition: all 150ms linear;
+    border-radius: $border-radius-lg;
+    border: 1px solid rgba($gray-300,.3);
+    width: 100%;
+    &.button-loader {
+      padding: 0 40px 0 12px;
+      &:after {
+        content: url(../../assets/img/icons/button-spinner-green.svg);
+        position: absolute;
+        right: 14px;
+        width: 16px;
+        height: 16px;
+        margin-left: 12px;
+        animation: rotation 1s infinite linear;
+        @keyframes rotation {
+          100% {
+            transform:rotate(360deg);
+          }
+        }
+      }
+    }
+  }
 }
 // Non-Bootstrap button
 // Intended to be used without .btn class
@@ -89,4 +115,4 @@
     outline: none;
     box-shadow: 0 0 0 2px $blue;
   }
-}
+}