fix: requiring disabled param

components/LoadingButton.vue

@@ -1,7 +1,11 @@
 <template>
   <button
     type="submit"
-    class="inline-flex h-9 items-center justify-center rounded-md px-3 py-1.5 text-sm font-semibold leading-6 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 text-white bg-blue-600 hover:bg-blue-500 disabled:text-zinc-400 disabled:bg-blue-600/10 disabled:hover:bg-blue-600/10"
+    :class="[
+      styles[style].base,
+      props.disabled ? styles[style].disabled : styles[style].dft,
+    ]"
+    :disabled="props.disabled"
   >
     <div v-if="props.loading" role="status">
       <svg
@@ -22,12 +26,29 @@
       </svg>
       <span class="sr-only">Loading...</span>
     </div>
-    <span v-else>
-      <slot />
-    </span>
+    <slot v-else />
   </button>
 </template>
 
 <script setup lang="ts">
-const props = defineProps<{ loading: boolean }>();
+type Style = "default" | "none";
+const props = defineProps<{
+  loading: boolean;
+  style?: Style;
+  disabled?: boolean;
+}>();
+
+const style = props.style ?? "default";
+
+const styles: {
+  [key in Style]: { base: string; dft: string; disabled: string };
+} = {
+  ["default"]: {
+    base: "inline-flex min-h-9 items-center justify-center rounded-md px-3 py-1.5 text-sm font-semibold leading-6 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600",
+    dft: "text-white bg-blue-600 hover:bg-blue-500",
+    disabled:
+      "text-zinc-400 bg-blue-600/10 hover:bg-blue-600/10",
+  },
+  ["none"]: { base: "", dft: "", disabled: "" },
+};
 </script>

components/ModalStack.vue

@@ -7,6 +7,7 @@
     :data="modal.data"
     @event="(event: string) => handleCallback(modalIdx, event)"
   />
+  <div id="modalstack" />
 </template>
 
 <script setup lang="ts">

components/NotificationModal.vue

@@ -60,7 +60,7 @@
                   type="submit"
                   class="w-full sm:w-fit"
                 >
-                  {{ props.data.buttonText ?? "Confirm" }}
+                  {{ props.data.buttonText ?? "Close" }}
                 </LoadingButton>
               </div>
             </div>