diff --git a/packages/windi/package.json b/packages/windi/package.json
index c8af0ce..fb97c68 100644
--- a/packages/windi/package.json
+++ b/packages/windi/package.json
@@ -48,7 +48,9 @@
   },
   "dependencies": {
     "@heroicons/vue": "^2.0.18",
-    "tailwind-merge": "^1.14.0"
+    "classnames": "^2.3.2",
+    "tailwind-merge": "^1.14.0",
+    "vue-router": "^4.2.4"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.39.8",
diff --git a/packages/windi/src/App.vue b/packages/windi/src/App.vue
index c343d9f..4208207 100644
--- a/packages/windi/src/App.vue
+++ b/packages/windi/src/App.vue
@@ -1,10 +1,40 @@
 <script setup lang='ts'>
+function handle() {
+  // eslint-disable-next-line no-console
+  return console.log('Hello there')
+}
 </script>
 
 <template>
   <div class="grid place-items-center w-full min-h-screen">
-    <WKbd>M</WKbd>
-    <WKbd>M</WKbd>
+    <!-- <div class="w-96">
+      <WAlert
+        :is-visible="true" :variant="['warning-light']" transition="fade" title="Alert" closable
+      >
+        <template #leading>
+          <WIcon name="ph:sun" size="2xl" />
+        </template>
+        <WAlertDescription>
+          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Omnis, sint!
+        </WAlertDescription>
+      </WAlert>
+    </div> -->
+    <WButton
+      :variants="{
+        'my-variant': {
+          root: 'bg-black hover:bg-gray-800 disabled:hover:bg-black',
+          buttonLoading: '!bg-red-500',
+        },
+      }" :variant="['danger-ghost']" @click="handle()"
+    >
+      Button
+    </WButton>
+
+    <!-- <button @click="handle()">
+      Button
+    </button> -->
+    <!-- <WKbd>M</WKbd>
+    <WKbd>M</WKbd> -->
     <!-- <WBadge position="top-right" value="100" :max-value="99" color="lime">
       <WIcon name="ph:bell" size="3xl" />
     </WBadge> -->
diff --git a/packages/windi/src/Types/componentsTypes/components.ts b/packages/windi/src/Types/componentsTypes/components.ts
index d71a092..a05479a 100644
--- a/packages/windi/src/Types/componentsTypes/components.ts
+++ b/packages/windi/src/Types/componentsTypes/components.ts
@@ -45,10 +45,9 @@ export interface WBadge extends WComponentRoot {
 }
 
 export interface WButton extends WComponentRoot {
-  full?: string
-  buttonLabel?: string
-  disabled?: string
-  loading?: string
+  buttonFull?: string
+  buttonDisabled?: string
+  buttonLoading?: string
   buttonSize?: string
   buttonPill?: string
   buttonGap?: string
diff --git a/packages/windi/src/components/Button/WButton.vue b/packages/windi/src/components/Button/WButton.vue
index baa456e..088bebe 100644
--- a/packages/windi/src/components/Button/WButton.vue
+++ b/packages/windi/src/components/Button/WButton.vue
@@ -2,6 +2,7 @@
 import { computed, defineComponent, useAttrs } from 'vue'
 import type { PropType } from 'vue'
 import classNames from 'classnames'
+import type { RouteLocationRaw } from 'vue-router'
 import { Icon } from '@iconify/vue'
 import type { VariantJSWithClassesListProps } from '../../utils/getVariantProps'
 import { getVariantPropsWithClassesList } from '../../utils/getVariantProps'
@@ -14,8 +15,13 @@ export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
 const props = defineProps({
   ...getVariantPropsWithClassesList<WButton>(),
 
-  to: {
+  type: {
     type: String,
+    default: 'button',
+  },
+
+  to: {
+    type: [String, Object] as PropType<string | RouteLocationRaw>,
     default: null,
   },
   size: {
@@ -109,11 +115,12 @@ const isTrailing = computed(() => {
 })
 
 const buttonBlock = computed(() => {
-  return props.full && variant.value.full
+  return props.full && variant.value.buttonFull
 })
 
 const buttonWrapperClass = computed(() => {
   return classNames(
+    (props.to) && 'hover:underline',
     variant.value.root,
     variant.value.buttonFlex,
     windiTheme.WButton.base.buttonSize[props.size],
@@ -121,8 +128,8 @@ const buttonWrapperClass = computed(() => {
     windiTheme.WButton.base.buttonPadding[props.size],
     buttonBlock.value,
     props.pill && variant.value.buttonPill,
-    props.disabled && variant.value.disabled,
-    (props.loading) && variant.value.loading,
+    props.disabled && variant.value.buttonDisabled,
+    (props.loading) && variant.value.buttonLoading,
   )
 })
 
@@ -145,7 +152,7 @@ export default defineComponent({
     </slot>
 
     <slot>
-      <span v-if="label" :class="variant.buttonLabel">
+      <span v-if="label">
         {{ label }}
       </span>
     </slot>
diff --git a/packages/windi/src/components/Input/WInput.vue b/packages/windi/src/components/Input/WInput.vue
new file mode 100644
index 0000000..c3229b3
--- /dev/null
+++ b/packages/windi/src/components/Input/WInput.vue
@@ -0,0 +1,7 @@
+<script setup lang='ts'>
+
+</script>
+
+<template>
+  <div />
+</template>
diff --git a/packages/windi/src/components/Input/index.ts b/packages/windi/src/components/Input/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/packages/windi/src/theme/windiTheme.ts b/packages/windi/src/theme/windiTheme.ts
index 5a23165..adf9132 100644
--- a/packages/windi/src/theme/windiTheme.ts
+++ b/packages/windi/src/theme/windiTheme.ts
@@ -243,14 +243,13 @@ export default {
 
   WButton: {
     base: {
-      root: 'focus:outline-none focus-visible:outline-0 rounded-md text-white disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 transition-all duration-200 ease-in',
-      buttonLabel: 'block font-medium',
+      root: 'focus:outline-none text-white block font-medium focus-visible:outline-0 rounded-md disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 transition-all duration-200 ease-in',
       buttonFlex: 'flex items-center',
       buttonLoadingIcon: 'svg-spinners:bars-rotate-fade',
       buttonPill: '!rounded-full',
-      loading: '!bg-opacity-50 !hover:bg-opacity-50 inline-flex items-center',
-      full: 'w-full flex justify-center items-center',
-      disabled: '!shadow-none !cursor-not-allowed bg-transparent',
+      buttonLoading: '!bg-opacity-50 pointer-events-none !cursor-not-allowed !hover:bg-opacity-50 inline-flex items-center',
+      buttonFull: 'w-full flex justify-center items-center',
+      buttonDisabled: '!shadow-none !cursor-not-allowed bg-opacity-100',
       buttonSize: {
         'xs': 'text-xs',
         'sm': 'text-sm',
@@ -279,39 +278,34 @@ export default {
 
     variants: {
       'default': {
-        root: 'bg-yellow-500 hover:bg-yellow-600',
+        root: 'bg-yellow-500 not:disabled:hover:bg-yellow-600',
       },
       'default-outline': {
         root: [
-          'border border-yellow-500 text-yellow-800 hover:bg-yellow-800 hover:text-white duration-200 ease-in',
+          'border border-yellow-500 text-yellow-800 not:disabled:hover:bg-yellow-800 not:disabled:hover:text-white duration-200 ease-in',
         ],
       },
       'default-light': {
         root: [
-          'border border-yellow-500 bg-yellow-100 text-yellow-800 hover:bg-yellow-800 hover:text-white duration-200 ease-in',
+          'border border-yellow-500 bg-yellow-100 text-yellow-800 not:disabled:hover:bg-yellow-800 not:disabled:hover:text-white duration-200 ease-in',
         ],
       },
       'default-dashed': {
         root: [
-          'border border-dashed border-yellow-500 text-yellow-800 hover:bg-yellow-800 hover:text-white duration-200 ease-in',
+          'border border-dashed border-yellow-500 text-yellow-800 not:disabled:hover:bg-yellow-800 not:disabled:hover:text-white duration-200 ease-in',
         ],
       },
       'default-ghost': {
         root: [
-          'text-yellow-500 hover:bg-yellow-100',
-        ],
-      },
-      'default-disabled': {
-        root: [
-          '!shadow-none !cursor-not-allowed !border-yellow-300 !text-gray-300 !bg-yellow-100 dark:!text-white dark:!border-neutral-700 active:!border-yellow-300 active:!bg-yellow-300 peer-checked:!border-yellow-300 hover:!border-yellow-300 !bg-yellow-300',
+          'text-yellow-500 not:disabled:hover:bg-yellow-100',
         ],
       },
       'primary': {
-        root: 'bg-blue-500 hover:bg-blue-600 !disabled:hover:bg-blue-100',
+        root: 'bg-blue-500 hover:enabled:bg-red-600 !disabled:hover:bg-blue-100',
       },
       'primary-light': {
         root: [
-          'border border-blue-500 bg-blue-100 text-blue-800 hover:bg-blue-800 hover:text-white duration-200 ease-in',
+          'border border-blue-500 bg-blue-100 text-blue-800 hover:enabled:bg-blue-800 hover:enabled:text-white duration-200 ease-in',
         ],
       },
       'primary-loading': {
@@ -322,104 +316,92 @@ export default {
 
       'primary-outline': {
         root: [
-          'border border-blue-500 text-blue-800 hover:bg-blue-800 hover:text-white duration-200 ease-in',
+          'border border-blue-500 text-blue-800 hover:enabled:bg-blue-800 hover:enabled:text-white duration-200 ease-in',
         ],
       },
 
       'primary-dashed': {
         root: [
-          'border border-dashed border-blue-500 text-blue-800 hover:bg-blue-800 hover:text-white duration-200 ease-in',
+          'border border-dashed border-blue-500 text-blue-800 hover:enabled:bg-blue-800 hover:enabled:text-white duration-200 ease-in',
         ],
       },
       'primary-ghost': {
         root: [
-          'text-blue-500 hover:bg-blue-100',
+          'text-blue-500 hover:enabled:bg-blue-100',
         ],
       },
-      'primary-disabled': {
-        root: '!shadow-none !cursor-not-allowed !border-blue-300 !text-gray-300 !bg-blue-100 dark:!text-white dark:!border-neutral-700 active:!border-blue-300 active:!bg-blue-300 peer-checked:!border-blue-300 hover:!border-blue-300 !bg-blue-300',
-      },
       'success': {
-        root: 'bg-green-500 hover:bg-green-600',
+        root: 'bg-green-500 hover:enabled:bg-green-600',
       },
 
       'success-light': {
         root: [
-          'border border-green-500 bg-green-100 text-green-800 hover:bg-green-800 hover:text-white duration-200 ease-in',
+          'border border-green-500 bg-green-100 text-green-800 hover:enabled:bg-green-800 hover:enabled:text-white duration-200 ease-in',
         ],
       },
 
       'success-outline': {
         root: [
-          'border border-green-500 text-green-800 hover:bg-green-800 hover:text-white duration-200 ease-in',
+          'border border-green-500 text-green-800 hover:enabled:bg-green-800 hover:enabled:text-white duration-200 ease-in',
         ],
       },
 
       'success-dashed': {
         root: [
-          'border border-dashed border-green-500 text-green-800 hover:bg-green-800 hover:text-white duration-200 ease-in',
+          'border border-dashed border-green-500 text-green-800 hover:enabled:bg-green-800 hover:enabled:text-white duration-200 ease-in',
         ],
       },
       'success-ghost': {
         root: [
-          'text-green-500 hover:bg-green-100',
+          'text-green-500 hover:enabled:bg-green-100',
         ],
       },
-      'success-disabled': {
-        root: '!shadow-none !cursor-not-allowed !border-green-300 !text-gray-300 !bg-green-100 dark:!text-white dark:!border-neutral-700 active:!border-green-300 active:!bg-green-300 peer-checked:!border-green-300 hover:!border-green-300 !bg-green-300',
-      },
       'warning': {
-        root: 'bg-orange-500 hover:bg-orange-600',
+        root: 'bg-orange-500 hover:enabled:bg-orange-600',
       },
       'warning-light': {
         root: [
-          'border border-orange-500 bg-orange-100 text-orange-800 hover:bg-orange-800 hover:text-white duration-200 ease-in',
+          'border border-orange-500 bg-orange-100 text-orange-800 hover:enabled:bg-orange-800 hover:enabled:text-white duration-200 ease-in',
         ],
       },
       'warning-outline': {
         root: [
-          'border border-orange-500 text-orange-800 hover:bg-orange-800 hover:text-white duration-200 ease-in',
+          'border border-orange-500 text-orange-800 hover:enabled:bg-orange-800 hover:enabled:text-white duration-200 ease-in',
         ],
       },
       'warning-dashed': {
         root: [
-          'border border-dashed border-orange-500 text-orange-800 hover:bg-orange-800 hover:text-white duration-200 ease-in',
+          'border border-dashed border-orange-500 text-orange-800 hover:enabled:bg-orange-800 hover:enabled:text-white duration-200 ease-in',
         ],
       },
       'warning-ghost': {
         root: [
-          'text-orange-500 hover:bg-orange-100',
+          'text-orange-500 hover:enabled:bg-orange-100',
         ],
       },
-      'warning-disabled': {
-        root: '!shadow-none !cursor-not-allowed !border-orange-300 !text-gray-300 !bg-orange-100 dark:!text-white dark:!border-neutral-700 active:!border-orange-300 active:!bg-orange-300 peer-checked:!border-orange-300 hover:!border-orange-300 !bg-orange-300',
-      },
       'danger': {
-        root: 'bg-red-500 hover:bg-red-600',
+        root: 'bg-red-500 hover:enabled:bg-red-600',
       },
       'danger-light': {
         root: [
-          'border border-red-500 bg-red-100 text-red-800 hover:bg-red-800 hover:text-white duration-200 ease-in',
+          'border border-red-500 bg-red-100 text-red-800 hover:enabled:bg-red-800 hover:enabled:text-white duration-200 ease-in',
         ],
       },
       'danger-outline': {
         root: [
-          'border border-red-500 text-red-800 hover:bg-red-800 hover:text-white duration-200 ease-in',
+          'border border-red-500 text-red-800 hover:enabled:bg-red-800 hover:enabled:text-white duration-200 ease-in',
         ],
       },
       'danger-ghost': {
         root: [
-          'text-red-500 hover:bg-red-100',
+          'text-red-500 hover:enabled:bg-red-100',
         ],
       },
       'danger-dashed': {
         root: [
-          'border border-dashed border-red-500 text-red-800 hover:bg-red-800 hover:text-white duration-200 ease-in',
+          'border border-dashed border-red-500 text-red-800 hover:enabled:bg-red-800 hover:enabled:text-white duration-200 ease-in',
         ],
       },
-      'danger-disabled': {
-        root: '!shadow-none !cursor-not-allowed !border-red-300 !text-gray-300 !bg-red-100 dark:!text-white dark:!border-neutral-700 active:!border-red-300 active:!bg-red-300 peer-checked:!border-red-300 hover:!border-red-300 !bg-red-300',
-      },
     },
   },
 
diff --git a/packages/windi/tailwind.config.cjs b/packages/windi/tailwind.config.cjs
index 34fae17..07df9f4 100644
--- a/packages/windi/tailwind.config.cjs
+++ b/packages/windi/tailwind.config.cjs
@@ -1 +1,12 @@
-module.exports = require('@windi-ui/tailwind-config/tailwind.config')
+// module.exports = require('@windi-ui/tailwind-config/tailwind.config')
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}', 'node_modules/windi-ui/dist/theme/*.{js,ts,json}'],
+  theme: {
+    extend: {
+      backgroundColor: ['disabled'],
+      textColor: ['disabled'],
+    },
+  },
+  plugins: [require('@windi-ui/tailwind-config/tailwind.config')],
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5797723..4a7f520 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -162,9 +162,15 @@ importers:
       '@heroicons/vue':
         specifier: ^2.0.18
         version: 2.0.18(vue@3.3.4)
+      classnames:
+        specifier: ^2.3.2
+        version: 2.3.2
       tailwind-merge:
         specifier: ^1.14.0
         version: 1.14.0
+      vue-router:
+        specifier: ^4.2.4
+        version: 4.2.4(vue@3.3.4)
     devDependencies:
       '@antfu/eslint-config':
         specifier: ^0.39.8
@@ -2258,7 +2264,6 @@ packages:
 
   /@vue/devtools-api@6.5.0:
     resolution: {integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==}
-    dev: true
 
   /@vue/language-core@1.8.8(typescript@5.1.6):
     resolution: {integrity: sha512-i4KMTuPazf48yMdYoebTkgSOJdFraE4pQf0B+FTOFkbB+6hAfjrSou/UmYWRsWyZV6r4Rc6DDZdI39CJwL0rWw==}
@@ -2902,6 +2907,10 @@ packages:
       consola: 3.2.3
     dev: true
 
+  /classnames@2.3.2:
+    resolution: {integrity: sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==}
+    dev: false
+
   /clean-regexp@1.0.0:
     resolution: {integrity: sha512-GfisEZEJvzKrmGWkvfhgzcz/BllN1USeqD2V6tg14OAOgaCD2Z/PUEuxnAZ/nPvmaHRG7a8y77p1T/IRQ4D1Hw==}
     engines: {node: '>=4'}
@@ -7453,6 +7462,15 @@ packages:
       - supports-color
     dev: true
 
+  /vue-router@4.2.4(vue@3.3.4):
+    resolution: {integrity: sha512-9PISkmaCO02OzPVOMq2w82ilty6+xJmQrarYZDkjZBfl4RvYAlt4PKnEX21oW4KTtWfa9OuO/b3qk1Od3AEdCQ==}
+    peerDependencies:
+      vue: ^3.2.0
+    dependencies:
+      '@vue/devtools-api': 6.5.0
+      vue: 3.3.4
+    dev: false
+
   /vue-template-compiler@2.7.14:
     resolution: {integrity: sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==}
     dependencies: