diff --git a/src/App.vue b/src/App.vue
index d9ba93903..7f44f49fa 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -58,7 +58,7 @@
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
-        <buttonPrimary
+        <listButton
           buttonText="List Button"
           class="list-button"
         />
@@ -75,11 +75,13 @@
 <script>
 import buttonPrimary from "@/uxComponents/buttonPrimary/buttonPrimary";
 import radioCard from "@/uxComponents/radioCard/radioCard";
+import listButton from "@/uxComponents/listButton/listButton";
 export default {
   name: "App",
   components: {
     buttonPrimary,
     radioCard,
+    listButton
   },
 };
 </script>
diff --git a/src/uxComponents/listButton/listButton.spec.js b/src/uxComponents/listButton/listButton.spec.js
new file mode 100644
index 000000000..e360d0fc1
--- /dev/null
+++ b/src/uxComponents/listButton/listButton.spec.js
@@ -0,0 +1 @@
+test.todo('some test to be written in the future');
diff --git a/src/uxComponents/listButton/listButton.vue b/src/uxComponents/listButton/listButton.vue
new file mode 100644
index 000000000..e39a10a09
--- /dev/null
+++ b/src/uxComponents/listButton/listButton.vue
@@ -0,0 +1,28 @@
+<template>
+  <button
+    class="btn d-flex align-items-center"
+    v-on:click="showLoader()"
+    v-bind:class="[this.isLoading ? 'button-loader' : 'not-loading']"
+    >
+    {{ this.buttonText }}
+  </button>
+</template>
+
+<script>
+export default {
+  name: "listButton",
+  props: {
+    buttonText: String
+  },
+  data() {
+    return {
+      isLoading: false,
+    };
+  },
+  methods: {
+    showLoader() {
+      this.isLoading = true;
+    },
+  },
+};
+</script>