-

app.vue

@@ -6,12 +6,17 @@
       <!-- MlButton: This button can be used for various actions like form submissions or dialog openings. Customize its appearance using the :pt prop. -->
       <MlButton
         :pt="{
-          root: { class: '' },
+          root: { class: 'flex justify-center items-center disabled:opacity-60' },
-          outer: { class: 'bg-gradient-to-r from-red-600 to-accent2' },
+          outer: {
-          inner: { class: 'dark:bg-gradient-to-r bg-white' },
+            class:
+              'bg-gradient-to-r from-green-300 to-red-400 p-[2px] w-full focus:outline-none rounded-3xl',
+          },
+          inner: {
+            class:
+              'justify-center flex items-center bg-white px-5 py-2 w-full h-full font-semibold leading-[1.5] back bg-white rounded-3xl',
+          },
         }"
       >
-        Let's talk
       </MlButton>
 
       <!-- MlPaginator: Handles item pagination. Customize the appearance and behavior via props. Listens to changes with @update:paginatedItems to manage displayed items. -->

src/components/Ml/Button/MlButton.vue

@@ -23,17 +23,13 @@ const props = withDefaults(defineProps<ButtonProps>(), {
 
 const classes = ref({
   root: {
-    class: `flex justify-center items-center disabled:opacity-60`,
+    class: ``,
   },
   outer: {
-    class: `p-[2px] w-full focus:outline-none ${
+    class: ``,
-      props.rounded ? "rounded-3xl" : ""
-    }`,
   },
   inner: {
-    class: `justify-center flex items-center bg-white dark:bg-gradient-to-r px-5 py-2 w-full h-full font-semibold leading-[1.5] back ${
+    class: ``,
-      props.rounded ? "rounded-3xl" : ""
-    }`,
   },
 } as PTAttribs);