Updated listButton styles. Add error state with dynamic error message.

src/layouts/componentTest/componentTest.vue

@@ -41,6 +41,7 @@
       <div class="col my-3 d-flex align-items-center">
         <listButton
           buttonText="List Button"
+          errorText="Test error message"
         />
       </div>
     </div>

src/styles/commonButtonStyles.scss

@@ -91,11 +91,28 @@
     height: 48px;
     transition: all 150ms linear;
     border-radius: $border-radius-lg;
-    border: 1px solid rgba($gray-300,.3);
+    border: 1px solid $gray-500;
     width: 100%;
+    &:hover {
+      box-shadow: 0 0 0 4px $blue-100;
+    }
     &:focus, // Mouse, touch, stylus focus
     &:focus-visible { // Keyboard focus for accessibility
-      box-shadow: none;
+      box-shadow: 0 0 0 2px $blue;
+    }
+    &:active {
+      background: $blue-100;
+      border: 1px solid $blue;
+    }
+    + label {
+      display: none;
+    }
+    &.error {
+      border: 1px solid $danger;
+      ~ label {
+        display: flex;
+        color: $danger;
+      }
     }
     &.button-loader {
       padding: 0 40px 0 12px;

src/uxComponents/listButton/listButton.vue

@@ -1,22 +1,27 @@
 <template>
-  <button
+  <div class="d-flex flex-column w-100">
-    class="btn list-button d-flex align-items-center"
+    <button
-    v-on:click="showLoader()"
+      class="btn list-button d-flex align-items-center"
-    v-bind:class="[this.isLoading ? 'button-loader' : 'not-loading']"
+      v-on:click="showLoader()"
-    >
+      v-bind:class="[this.isLoading ? 'button-loader' : 'not-loading',this.isError ? 'error' : '']"
-    {{ this.buttonText }}
+      >
-  </button>
+      {{ this.buttonText }}
+    </button>
+    <label class="small mt-1">{{ this.errorText }}</label>
+  </div>
 </template>
 
 <script>
 export default {
   name: "listButton",
   props: {
-    buttonText: String
+    buttonText: String,
+    errorText: String
   },
   data() {
     return {
       isLoading: false,
+      isError: false
     };
   },
   methods: {