diff --git a/src/common-components/base-input-button/base-input-button.vue b/src/common-components/base-input-button/base-input-button.vue
index 54fcc3b7d..5a8883557 100644
--- a/src/common-components/base-input-button/base-input-button.vue
+++ b/src/common-components/base-input-button/base-input-button.vue
@@ -3,6 +3,7 @@
         :class="[buttonWrapperClasses, { 'has-error': errors.length > 0 }]"
         :for="buttonId"
         @mousedown.left="handleEventAction('click', $event)">
+        <!-- BIB props: {{$props}} -->
         <input
             :type="inputType"
             :id="buttonId"
@@ -41,21 +42,17 @@ export default {
             required: true,
         },
         isMultiSelect: Boolean,
-        isWide: Boolean,
-        buttonImage: String,
-        buttonImageId: String,
-        buttonLabel: {
-            type: String,
-            required: true,
-        },
-        isRequired: {
-            type: Boolean,
-            required: true,
-        },
-        buttonLabelSubCopy: {
-            type: String,
-            required: true,
-        },
+        // isWide: Boolean,
+        // buttonImage: String,
+        // buttonImageId: String,
+        // buttonLabel: {
+        //     type: String,
+        //     required: true,
+        // },
+        // buttonLabelSubCopy: {
+        //     type: String,
+        //     required: true,
+        // },
         groupName: {
             type: String,
             required: true,
@@ -143,7 +140,7 @@ export default {
             this.pushEventToGA(
                 this.$route.query[queryStrings.FMG_PAGE],
                 this.GaActions.CLICKED,
-                this.value.toString(),
+                this.value?.toString(),
                 true,
                 this.valueToLogType
             );
@@ -161,8 +158,14 @@ export default {
             return this.isMultiSelect ? "checkbox" : "radio";
         },
         buttonId() {
-            return `${this.groupName}-${JSON.stringify(this.value).replace(" ", "-")}`;
+            return `${this.groupName}-${JSON.stringify(this.value)?.replace(
+                " ",
+                "-"
+            )}`;
         },
+        // baseInputButtonProps() {
+
+        // }
     },
     setup(props) {
         const inputType = props.isMultiSelect ? "checkbox" : "radio";
@@ -173,7 +176,7 @@ export default {
             validateOnMount: false,
         };
 
-        const { handleChange, meta, errors, value } = useField(
+        const { handleChange, meta, errors } = useField(
             toRef(props, "groupName"),
             toRef(props, "validationRules"),
             fieldOptions
diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 51dd15f77..b4cadcea4 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -35,15 +35,15 @@
                     <div
                         :class="getComponentWrapperClasses"
                         v-for="answer in buttonsInfo"
-                        :key="answer.Name ? answer.Name : answer">
+                        :key="answer.value ? answer.value : answer">
                         <component
                             :is="buttonType"
                             :buttonLabel="answer.buttonLabel"
                             :buttonLabelSubCopy="answer.buttonLabelSubCopy"
                             :buttonImage="answer.buttonImage"
                             :buttonImageId="answer.buttonImageId"
+                            :groupName="answer.groupName"
                             :isMultiSelect="isMultiSelect"
-                            :groupName="groupName"
                             :value="answer.value"
                             :modelValue="modelValue"
                             :selectingInitiatesLoad="selectingInitiatesLoad"
@@ -175,31 +175,27 @@ export default {
             }
         },
         buttonsInfo() {
-            return (this.answers ?? [])?.map((answer) => ({
-                buttonLabel: answer.Text ?? answer,
-                altText: answer.Name ? answer.Name : answer,
-                buttonLabelSubCopy: answer.SubText,
-                buttonImage: answer.AnswerImageUrl,
-                buttonImageId: answer.ImageId,
-                groupName: this.formatString(this.groupName),
-                value: this.useTextForValue
-                    ? answer.Text
-                    : answer.Name ?? answer,
-            }));
+            console.log({
+                answers: this.answers,
+                isArray: Array.isArray(this.answers),
+            });
             // TODO KO temporary. It should always just be an array
-            // return (Array.isArray(this.answers) ? this.answers : [])?.map(
-            //     (answer) => ({
-            //         buttonLabel: answer.Text ?? answer,
-            //         altText: answer.Name ? answer.Name : answer,
-            //         buttonLabelSubCopy: answer.SubText,
-            //         buttonImage: answer.AnswerImageUrl,
-            //         buttonImageId: answer.ImageId,
-            //         groupName: this.formatString(this.groupName),
-            //         value: this.useTextForValue
-            //             ? answer.Text
-            //             : answer.Name ?? answer,
-            //     })
-            // );
+            return (Array.isArray(this.answers) ? this.answers : [])?.map(
+                (answer) => ({
+                    buttonLabel: answer.buttonLabel ?? answer.Text ?? answer,
+                    altText:
+                        answer.altText ?? (answer.Name ? answer.Name : answer),
+                    buttonLabelSubCopy:
+                        answer.buttonLabelSubCopy ?? answer.SubText,
+                    buttonImage: answer.buttonImage ?? answer.AnswerImageUrl,
+                    buttonImageId: answer.buttonImageId ?? answer.ImageId,
+                    groupName: this.formatString(this.groupName),
+                    value:
+                        answer.value ?? (this.useTextForValue
+                            ? answer.Text
+                            : answer.Name ?? answer),
+                })
+            );
         },
     },
     methods: {
@@ -225,9 +221,6 @@ export default {
             }
         },
         handleAnswerChange(primaryAnswerValue) {
-            console.log({
-                bqEvent: primaryAnswerValue,
-            });
             this.primaryValue = primaryAnswerValue;
             this.$emit("change", primaryAnswerValue);
             this.$emit("update:modelValue", primaryAnswerValue);
diff --git a/src/common-components/question-chain/question-chain.vue b/src/common-components/question-chain/question-chain.vue
index 5e9ebd97c..71d517e77 100644
--- a/src/common-components/question-chain/question-chain.vue
+++ b/src/common-components/question-chain/question-chain.vue
@@ -56,13 +56,13 @@ export default {
             questionSequence: q.questionSequence,
             answers: q.answers.map((a) => {
                 return {
-                    Text: a.answerText,
+                    buttonLabel: a.answerText,
                     // Name will either be nextQuestionSequence or answerResult
                     // Name will be used by list-button as the input value.
                     // It must be a single string or number, so concatenating together a string with
                     //       4 pieces of data separated by pipe characters:
                     //       question number|type of answer|answer value|answer text
-                    Name: a.nextQuestionSequence ? 
+                    value: a.nextQuestionSequence ? 
                         q.questionSequence + "|nextQuestion|" + a.nextQuestionSequence + "|" + a.answerText : 
                         q.questionSequence + "|answer|" + a.answerResult + "|" + a.answerText,
                     nextQuestionSequence: a.nextQuestionSequence,
@@ -78,10 +78,6 @@ export default {
         }
     });
 
-    console.log({
-        modelValue: this.modelValue,
-        questions: this.questions
-    })
     if (!this.modelValue?.length > 0 && this.questions.length > 0) {
         // set this.currentQuestionNum to first valid question
         this.currentQuestionNum = this.questions[0].questionSequence;
@@ -93,10 +89,6 @@ export default {
   },
   methods: {
         handleAnswer(question, returnedAnswer) {
-            console.log({
-                returnedAnswer: returnedAnswer
-            })
-
             question.answerSelected = returnedAnswer;
             /* 
                 returnedAnswer example format:
@@ -108,17 +100,11 @@ export default {
             */
             const isQuestionChainComplete = this.getQuestionChainAnswerIfComplete(returnedAnswer);
 
-            console.log({
-                isQuestionChainComplete: isQuestionChainComplete
-            })
             if (isQuestionChainComplete) {
                 this.$emit("update:modelValue", isQuestionChainComplete);
             }
         },
         getQuestionChainAnswerIfComplete(returnedAnswer) {   // this method will return either a final answer or Boolean false
-            console.log("getQuestionChainAnswerIfComplete: ", {
-                returnedAnswer: returnedAnswer
-            })
             if (!returnedAnswer) { return false }
 
             // Example returnedAnswers:
@@ -153,10 +139,6 @@ export default {
                 }
             });
 
-            console.log({
-                questionType: questionType,
-                returnedAnswerArray: returnedAnswerArray
-            })
             // return false if there's a nextQuestion... or return an object with final answers (truthy)
             if (questionType === "nextQuestion") {
 
diff --git a/src/layouts/estimate/estimate.spec.js b/src/layouts/estimate/estimate.spec.js
index 5bfb2e517..379ab76f7 100644
--- a/src/layouts/estimate/estimate.spec.js
+++ b/src/layouts/estimate/estimate.spec.js
@@ -168,7 +168,6 @@ describe("estimate.vue", () => {
       store.commit(storeMutations.UPDATE_IS_REPAIR, null);
 
       // Act 
-      console.log(store.getters.damage)
       let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
 
       // Assert
diff --git a/src/layouts/test.vue b/src/layouts/test.vue
deleted file mode 100644
index 51a236485..000000000
--- a/src/layouts/test.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<template>
-  <div>
-    <h2>ListButton</h2>
-    selectedMultiselectValues: {{ selectedMultiselectValues }}
-
-    <button-question
-      questionText="This is a question?"
-      :answers="sampleCheckboxAnswers"
-      :isMultiSelect="true"
-      groupName="multiselect-test"
-      v-model="selectedMultiselectValues"
-    ></button-question>
-
-    <br /><br /><br />
-    selectedRadioValue: {{ selectedRadioValue }}
-
-    <button-question
-      questionText="This is another question?"
-      :answers="sampleRadioAnswers"
-      :isMultiSelect="false"
-      groupName="radio-test"
-      v-model="selectedRadioValue"
-    ></button-question>
-    <!-- selectedMultiselectValues: {{ selectedMultiselectValues }}
-
-    <button-question
-      buttonType="testButton"
-      :answers="sampleAnswers"
-      :isMultiSelect="true"
-      groupName="multiselect-test"
-      v-model="selectedMultiselectValues"
-    ></button-question>
-
-    <br /><br /><br />
-    selectedRadioValue: {{ selectedRadioValue }}
-
-    <button-question
-      buttonType="testButton"
-      :answers="sampleAnswers"
-      :isMultiSelect="false"
-      groupName="radio-test"
-      v-model="selectedRadioValue"
-    ></button-question> -->
-  </div>
-</template>
-
-<script>
-import ButtonQuestion from "../common-components/button-question/button-question.vue";
-
-export default {
-  name: "test",
-  data() {
-    return {
-      sampleCheckboxAnswers: [
-        {
-          Text: "Part 1",
-          Name: "PART1",
-        },
-        {
-          Text: "Part 2",
-          Name: "PART2",
-        },
-        {
-          Text: "Part 3",
-          Name: "PART3",
-        },
-      ],
-      sampleRadioAnswers: [
-        {
-          Text: "Part 1",
-          Name: "PART1",
-        },
-        {
-          Text: "Part 2",
-          Name: "PART2",
-        },
-        {
-          Text: "Part 3",
-          Name: "PART3",
-        },
-      ],
-      selectedMultiselectValues: [],
-      selectedRadioValue: "",
-    };
-  },
-  components: {
-    // testButton,
-    ButtonQuestion,
-  },
-};
-</script>
diff --git a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
index 7f57cbe15..6e8962d1c 100644
--- a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
+++ b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
@@ -77,7 +77,6 @@ export default ({
     },
     watch: {
         selectedValue(selectedValue) {
-            // console.log("DLQ: ", selectedValue)
             this.$emit("update:modelValue", selectedValue)
         }
     }
diff --git a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
index 3b8e6d803..0741607bc 100644
--- a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
+++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
@@ -47,14 +47,11 @@ export default ({
             this.replaceOptions = replaceOptions;
         },
         updateSelectedValues() {
-            console.log("UPDATING FOR ", this.groupName)
             // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
             // ex: BackGlass stationary
-            // console.log(this.answersToDisplay)
             if (Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
                 const selectedAnswer = this.answersToDisplay[0].Name;
                 this.selectedValue = this.isMultiSelect ? [selectedAnswer] : selectedAnswer;
-                console.log("HIIIIII2", this.selectedValue)
             }
         },
     },
@@ -65,14 +62,6 @@ export default ({
         answersFromCms(){
             return this.getCmsContent(this.cmsWidgetName, 'Answers');
         },
-        // selectedValues: {
-        //     get: function() {
-        //         return this.modelValue;
-        //     },
-        //     set: function(newValue) {
-        //         this.$emit("update:modelValue", newValue);
-        //     }
-        // },
         answersToDisplay(){
             const filteredAnswers = Array.isArray(this.answersFromCms) 
                 ? this.answersFromCms.filter(ans => 
@@ -98,10 +87,6 @@ export default ({
             val && this.updateSelectedValues();
         },
         shouldDisplayReplaceOptionsQuestion(shouldDisplayReplaceOptionsQuestion) {
-            console.log({
-                groupName: this.groupName,
-                shouldDisplayReplaceOptionsQuestion: shouldDisplayReplaceOptionsQuestion
-            })
             if (!shouldDisplayReplaceOptionsQuestion) {
                 this.selectedValue = [];
             }
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index f05f9a65f..efcfaa5b8 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -268,17 +268,6 @@ export default {
     getRearReplaceOptionsFromStore(){
       var rearReplaceOptions = store.getters.damage.glassToReplace?.filter(glass => glass.glassLocation === damageLocationsSelected.REAR)[0]?.glassName;
 
-      // store.getters.damage.glassToReplace?.forEach(glass => {
-      //   if (glass.glassLocation === damageLocationsSelected.REAR){
-      //     rearReplaceOptions.push(glass.glassName);
-      //   }
-      // });
-
-      console.log({
-        glassToReplace: store.getters.damage.glassToReplace,
-        rearReplaceOptions: rearReplaceOptions
-      })
-
       return rearReplaceOptions;
     },
 
@@ -290,7 +279,6 @@ export default {
         selectedWindshieldChipCount: this.selectedWindshieldOptions.selectedWindshieldChipCount
       }, false);
       
-      console.log(this.selectedGlassToReplace())
       return this.navigateForward();
     },
 
@@ -325,9 +313,6 @@ export default {
       }
 
       if (this.isRearWindowDamageLocation) {
-        console.log({
-          selectedRearReplaceOptions: this.selectedRearReplaceOptions
-        })
         selectedGlassToReplace.push({ glassLocation: damageLocationsSelected.REAR, glassName: this.selectedRearReplaceOptions});
       }
 
@@ -378,9 +363,6 @@ export default {
     hasSplitSingleConflict() {
       if (!this.selectedDamageLocations?.includes("Windshield") || this.selectedWindshieldOptions.selectedWindshieldDamageType === damageLocationsSelected.REPAIR || !this.selectedWindshieldOptions.selectedWindshieldReplaceOptions) return false;
 
-      console.log({
-        selectedWindshieldOptions: this.selectedWindshieldOptions
-      })
       return this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(selectedSingleWindshield =>
         {
             return selectedSingleWindshield.toUpperCase() === damageLocationsSelected.SINGLE.toUpperCase();
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
index 2df1f7f78..3b2c431f6 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
@@ -23,7 +23,6 @@ export default ({
     name: "windshieldDamageTypeQuestion",
     mixins: [buttonQuestionWrapperMixin],
     props: {
-        // modelValue: String,
         groupName: String,
         isAvailable: Boolean,
         suppressError: Boolean,
@@ -37,29 +36,9 @@ export default ({
         answersFromCms(){
             return this.getCmsContent(this.cmsWidgetName, 'Answers');
         },
-        // selectedValues: {
-        //     get: function() {
-        //         return this.modelValue;
-        //     },
-        //     set: function(newValue) {
-        //         this.$emit("update:modelValue", newValue);
-        //     }
-        // },
     },
     components: {
         buttonQuestion,
     },
-    // watch: {
-    //     isAvailable(isAvailable) {
-    //         if (!isAvailable) {
-    //             // console.log({
-    //             //     isAvailable: isAvailable
-    //             // })
-    //             // console.log("updating")
-    //             this.selectedValue = null;
-    //             // this.$emit("update:modelValue", null);
-    //         }
-    //     }
-    // }
 })
 </script>
\ No newline at end of file
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
index d02873a63..f22370d69 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
@@ -96,9 +96,6 @@ export default ({
         },
         getWindshieldOptions(selectedWindshieldDamageType, selectedWindshieldChipCount, selectedWindshieldReplaceOptions){
             // ONLY UPDATE THE NEW VALUE IF IT IS TRUTHY (NOT NULL)
-            console.log("GETWINDSHIELDOPTIONS", {
-                selectedValues: this.selectedValues
-            })
             return {
                 selectedWindshieldDamageType: selectedWindshieldDamageType ? selectedWindshieldDamageType : this.selectedValues.selectedWindshieldDamageType,
                 selectedWindshieldChipCount: selectedWindshieldChipCount ? selectedWindshieldChipCount : this.selectedValues.selectedWindshieldChipCount,
@@ -112,7 +109,6 @@ export default ({
                 return this.modelValue;
             },
             set: function(newValue) {
-                // console.log("HIIII", newValue)
                 this.$emit("update:modelValue", newValue);
             }
         },
@@ -137,7 +133,6 @@ export default ({
                 return this.selectedValues.selectedWindshieldReplaceOptions;
             },
             set: function(newValue) {
-                console.log("HIIII", newValue)
                 this.selectedValues = this.getWindshieldOptions(this.selectedWindshieldDamageTypeValue, null, newValue);
             }
         },
diff --git a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue
index 34b04750f..9147076c8 100644
--- a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue
+++ b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue
@@ -97,9 +97,9 @@ export default {
             let tintOptions = [];
             Object.keys(this.featureListData).forEach((tintOption) => {
                 tintOptions.push({
-                    Name: tintOption,
-                    Text: tintOption,
-                    AnswerImageUrl: require(`@/assets/img/tints/${this.getTintSourceImage(
+                    value: tintOption,
+                    buttonLabel: tintOption,
+                    buttonImage: require(`@/assets/img/tints/${this.getTintSourceImage(
                         this.glassLocation,
                         tintOption
                     )}`),
@@ -201,10 +201,6 @@ export default {
             this.$nextTick(() => {
                 if (this.modelValue !== undefined) {
                     // Populate button-question model-value if parts data already exists in VueX
-                    console.log({
-                        alreadyPopulatedPartsData: this.alreadyPopulatedPartsData,
-                        alreadyPopulatedPartsDataType: typeof this.alreadyPopulatedPartsData
-                    })
                     this.selectedTint = this.alreadyPopulatedPartsData.filter(part => part.partNumber === this.selectedPartNumber)[0]?.color;
                 }
             });
diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue
index fe8c2dc00..fe9f6f30c 100644
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/src/layouts/vehicle-year/vehicle-year.vue
@@ -88,7 +88,6 @@ export default {
 
   watch: {
     selectedYear(year) {
-      console.log("selectedYear: ", year)
       const parsedYear = parseInt(year);
       this.dispatchStoreAction(storeActions.SAVE_VEHICLE_YEAR, parsedYear);
       this.$router.navigateWithSaving(
diff --git a/src/mixins/input-button-wrapper-mixin.js b/src/mixins/input-button-wrapper-mixin.js
new file mode 100644
index 000000000..02009c385
--- /dev/null
+++ b/src/mixins/input-button-wrapper-mixin.js
@@ -0,0 +1,35 @@
+export default {
+    props: {
+        modelValue: [Array, String, Number],
+        value: [String, Number],
+        isMultiSelect: Boolean,
+        groupName: String,
+        buttonLabel: [Number, String],
+        buttonLabelSubCopy: String,
+        buttonImage: String,
+        altText: String,
+        textPosition: String,
+        screenReaderOnlyText: String,
+        valueToLogType: String,
+        validationRules: String,
+        isWide: Boolean
+    },
+    data() {
+        return {
+            selectedValue: null,
+        };
+    },
+    mounted() {
+        this.selectedValue = this.modelValue;
+    },
+    methods: {
+        handleAnswerChange(e) {
+            this.$emit("change", e);
+        },
+    },
+    watch: {
+        selectedValue(selectedValue) {
+            this.$emit("update:modelValue", selectedValue);
+        },
+    },
+};
diff --git a/src/router/index.js b/src/router/index.js
index d31d32e29..9dd7b2acf 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -23,7 +23,6 @@ import { applicationConfig } from "../constants/application-config";
 
 // Components
 import quote from "@/layouts/quote/quote.vue";
-import test from "@/layouts/test"
 
 const routes = [
   {
@@ -31,11 +30,6 @@ const routes = [
     name: "quote",
     component: quote,
   },
-  {
-    path: "/test", // This is a temporary route for testing.
-    name: "test",
-    component: test,
-  },
   {
     path: "/",
     name: "root",
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index d8a9584fc..da33751f3 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -1,15 +1,10 @@
 <template>
     <baseInputButton
+        v-bind="$props"
         :buttonWrapperClasses="[
             'list-group list-button-horizontal d-flex flex-column w-100',
             { 'radio-fancy': isCashOrInsurance },
         ]"
-        :isMultiSelect="isMultiSelect"
-        :modelValue="modelValue"
-        :value="value"
-        :groupName="groupName"
-        :validationRules="validationRules"
-        :selectOnKeypress="selectOnKeypress"
         @change="handleAnswerChange">
         <div
             class="list-button-horizontal-content d-flex flex-column justify-content-center p-3">
@@ -25,60 +20,21 @@
             <span v-if="screenReaderOnlyText" class="sr-only">
                 {{ screenReaderOnlyText }}
             </span>
-            <loader
-                v-if="isLoaderDisplayed && selectingInitiatesLoad"
-                :class="[loaderColor, loaderPosition]" />
         </div>
     </baseInputButton>
 </template>
 
 <script>
-import { useField } from "vee-validate";
-import loader from "@/ux-components/loader/loader";
-import { toRef } from "vue";
-import { queryStrings } from "@/constants/query-strings";
 import baseInputButton from "@/common-components/base-input-button/base-input-button";
+import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
 
 export default {
     name: "listButtonHorizontal",
+    mixins: [inputButtonWrapperMixin],
     props: {
-        isMultiSelect: Boolean,
-        selectOnKeypress: Boolean,
-        groupName: String,
-        buttonID: String,
-        buttonLabel: String,
-        buttonLabelSubCopy: String,
-        screenReaderOnlyText: String,
-        textPosition: String,
-        selectingInitiatesLoad: Boolean,
-        loaderColor: String,
-        loaderPosition: String,
-        isRequired: Boolean,
         isCashOrInsurance: Boolean,
-        value: {
-            // Field initial value
-            type: String,
-            default: "",
-        },
-        validationRules: String,
-        hasError: Boolean,
-        valueToLogType: String,
-    },
-    data() {
-        return {
-            isLoaderDisplayed: false,
-        };
-    },
-    methods: {
-        displayLoader() {
-            this.isLoaderDisplayed = true;
-        },
-        handleAnswerChange(e) {
-            this.$emit("change", e);
-        },
     },
     components: {
-        loader,
         baseInputButton,
     },
 };
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 72f7329ae..ae8e1f781 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -1,11 +1,19 @@
 <template>
-    <baseInputButton
+    <!-- <baseInputButton
         :isMultiSelect="isMultiSelect"
         :value="value"
+        :modelValue="modelValue"
         :groupName="groupName"
-        buttonWrapperClasses="list-group list-button rounded-3 d-flex flex-column w-100 mb-2"
         :validationRules="validationRules"
+        buttonWrapperClasses="list-group list-button rounded-3 d-flex flex-column w-100 mb-2"
+        @change="handleAnswerChange"> -->
+    <baseInputButton
+        v-bind="$props"
+        buttonWrapperClasses="list-group list-button rounded-3 d-flex flex-column w-100 mb-2"
         @change="handleAnswerChange">
+        <!-- modelValue: {{modelValue}}<br/>
+        value: {{value}} <br/>
+        buttonLabel: {{buttonLabel}} -->
         <div
             tabindex="-1"
             :aria-label="buttonLabel"
@@ -32,25 +40,18 @@
 <script>
 import loader from "@/ux-components/loader/loader";
 import baseInputButton from "@/common-components/base-input-button/base-input-button";
+import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
 
 export default {
     name: "listButton",
+    mixins: [inputButtonWrapperMixin],
     props: {
-        groupName: String, 
-        buttonLabel: [Number, String],
-        isRequired: Boolean,
-        textPosition: String,
-        buttonLabelSubCopy: String,
-        screenReaderOnlyText: String,
         selectingInitiatesLoad: Boolean,
         loaderColor: String,
         loaderPosition: {
             type: String,
             default: "right",
         },
-        hasError: Boolean,
-        valueToLogType: String,
-        validationRules: String,
     },
     data() {
         return {
@@ -65,7 +66,7 @@ export default {
             if (this.selectingInitiatesLoad) {
                 this.displayLoader();
             }
-            
+
             this.$emit("change", e);
         },
     },
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index d05655619..2a2bf4aeb 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,15 +1,10 @@
 <template>
     <baseInputButton
+        v-bind="$props"
         :buttonWrapperClasses="[
             'list-card w-100 rounded-3 d-flex align-items-center h-100',
             { horizontal: isWide },
         ]"
-        :isMultiSelect="isMultiSelect"
-        :modelValue="modelValue"
-        :value="value"
-        :groupName="groupName"
-        :validationRules="validationRules"
-        :selectOnKeypress="selectOnKeypress"
         @change="handleAnswerChange">
         <div
             class="d-flex w-100 align-items-center px-2 h-100 list-card-content"
@@ -41,35 +36,15 @@
 </template>
 
 <script>
-import { useField } from "vee-validate";
-import { toRef } from "vue";
-import { queryStrings } from "@/constants/query-strings";
 import baseInputButton from "@/common-components/base-input-button/base-input-button";
+import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
 
 export default {
     name: "listCard",
+    mixins: [inputButtonWrapperMixin],
     components: {
         baseInputButton,
     },
-    props: {
-        isMultiSelect: Boolean, //Defines use as checkbox
-        isWide: Boolean,
-        buttonImage: String, //Required: File name of image
-        buttonImageId: String,
-        buttonLabel: String, //Required: Label text
-        isRequired: Boolean, //Required: is aria-required required or not?
-        altText: String, //Leave empty. Screen readers read the buttonLabel text. If alt has content, it will repeat unnecessarily.
-        groupName: String, //Rquired: Unique
-        buttonLabelSubCopy: String, //Optional: sub text
-        value: {
-            // Field initial value
-            type: String,
-            default: "",
-        },
-        validationRules: String,
-        valueToLogType: String,
-        selectOnKeypress: Boolean,
-    },
     computed: {
         getLabelClasses() {
             if (this.isWide) {
@@ -83,11 +58,6 @@ export default {
             }
         },
     },
-    methods: {
-        handleAnswerChange(e) {
-            this.$emit("change", e);
-        },
-    },
 };
 </script>
 
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index 5f1f81b38..7851de56e 100644
--- a/src/ux-components/radio/radio.vue
+++ b/src/ux-components/radio/radio.vue
@@ -1,11 +1,8 @@
 <template>
     <baseInputButton
-        :isMultiSelect="isMultiSelect"
-        :value="value"
-        :groupName="groupName"
+        v-bind="$props"
         buttonWrapperClasses="ui-radio form-check"
         inputClasses="form-check-input"
-        :validationRules="validationRules"
         @change="handleAnswerChange">
         <div class="d-flex align-items-start form-check-label" :for="buttonID">
             <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
@@ -18,24 +15,11 @@
 
 <script>
 import baseInputButton from "@/common-components/base-input-button/base-input-button";
+import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
 
 export default {
     name: "radio",
-    props: {
-        groupName: String,
-        buttonLabel: String,
-        buttonID: String,
-        isRequired: Boolean,
-        value: {
-            type: [String, Number],
-            default: "",
-        },
-        screenReaderOnlyText: String,
-        selectedValues: String,
-        hasError: Boolean,
-        validationRules: String,
-        valueToLogType: String,
-    },
+    mixins: [inputButtonWrapperMixin],
     components: {
         baseInputButton,
     },