Code snippet, better UX in questionnaire

src/components/PrimaryButton/constants.js

@@ -6,5 +6,5 @@ export const VARIANTS = {
 export const VARIANTS_CLASS = {
   [VARIANTS.CONTAINED]: "bg-blue-700 hover:bg-blue-900 text-white font-bold",
   [VARIANTS.OUTLINED]:
-    "border border-blue-700 hover:border-blue-700 hover:bg-blue-200 text-black",
+    "border border-gray-700 hover:border-black-300 hover:bg-gray-200 text-black",
 };

src/components/PrimaryButton/index.svelte

@@ -6,15 +6,24 @@
   export let name = "";
   export let type;
   export let variant = VARIANTS.CONTAINED;
+  export let disablePadding = false;
+  export let isDisabled = false;
 
   const variantClass = VARIANTS_CLASS[variant];
 </script>
 
 <button
-  class="h-auto {variantClass} py-1 px-3 rounded {className} transition delay-150 duration-300 ease-in-out"
+  class="{isDisabled &&
+    'bg-opacity-25 hover:bg-opacity-25 cursor-not-allowed'} flex items-center h-auto {variantClass} {!disablePadding &&
+    'py-1 px-5'} rounded {className} transition delay-150 duration-300 ease-in-out "
   on:click={onClick}
   {name}
   {type}
+  disabled={isDisabled}
 >
-  {label}
+  {#if label}
+    {label}
+  {:else}
+    <slot />
+  {/if}
 </button>