diff --git a/src/App.vue b/src/App.vue
index a0d7a19..ef16a8e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,3 @@
 <template>
-  <main>
-    Vue-Tailwind
-  </main>
+  <main>Vue-Tailwind</main>
 </template>
diff --git a/src/assets/icons/LoadingSpinner.vue b/src/assets/icons/LoadingSpinner.vue
new file mode 100644
index 0000000..20c7738
--- /dev/null
+++ b/src/assets/icons/LoadingSpinner.vue
@@ -0,0 +1,58 @@
+<template>
+  <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <g class="spinner_Wezc">
+      <circle cx="12" cy="2.5" r="1.5" opacity=".14" />
+      <circle cx="16.75" cy="3.77" r="1.5" opacity=".29" />
+      <circle cx="20.23" cy="7.25" r="1.5" opacity=".43" />
+      <circle cx="21.50" cy="12.00" r="1.5" opacity=".57" />
+      <circle cx="20.23" cy="16.75" r="1.5" opacity=".71" />
+      <circle cx="16.75" cy="20.23" r="1.5" opacity=".86" />
+      <circle cx="12" cy="21.5" r="1.5" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.spinner_Wezc {
+  transform-origin: center;
+  animation: spinner_Oiah 0.75s step-end infinite;
+}
+@keyframes spinner_Oiah {
+  8.3% {
+    transform: rotate(30deg);
+  }
+  16.6% {
+    transform: rotate(60deg);
+  }
+  25% {
+    transform: rotate(90deg);
+  }
+  33.3% {
+    transform: rotate(120deg);
+  }
+  41.6% {
+    transform: rotate(150deg);
+  }
+  50% {
+    transform: rotate(180deg);
+  }
+  58.3% {
+    transform: rotate(210deg);
+  }
+  66.6% {
+    transform: rotate(240deg);
+  }
+  75% {
+    transform: rotate(270deg);
+  }
+  83.3% {
+    transform: rotate(300deg);
+  }
+  91.6% {
+    transform: rotate(330deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git a/src/components/DButton.vue b/src/components/DButton.vue
deleted file mode 100644
index da02763..0000000
--- a/src/components/DButton.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-  <button :class="buttonClasses" @click="onClick">
-    <slot></slot>
-  </button>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-
-const emit = defineEmits(['click']);
-
-const props = defineProps({
-  color: {
-    type: String as () => 'red' | 'green' | 'blue',
-    default: 'blue',
-  },
-  size: {
-    type: String as () => 'sm' | 'md' | 'lg',
-    default: 'md',
-  },
-});
-
-const colorClasses = computed(() => {
-  switch (props.color) {
-    case 'red':
-      return 'bg-red-500 text-white';
-    case 'green':
-      return 'bg-green-500 text-white';
-    case 'blue':
-    default:
-      return 'bg-blue-500 text-white';
-  }
-});
-
-const sizeClasses = computed(() => {
-  switch (props.size) {
-    case 'sm':
-      return 'text-sm px-2 py-1';
-    case 'lg':
-      return 'text-lg px-6 py-3';
-    case 'md':
-    default:
-      return 'text-md px-4 py-2';
-  }
-});
-
-const buttonClasses = computed(() => `rounded ${colorClasses.value} ${sizeClasses.value} hover:opacity-75 transition-opacity`);
-
-const onClick = () => emit('click');
-</script>
diff --git a/src/components/DxhButton.vue b/src/components/DxhButton.vue
new file mode 100644
index 0000000..854fe65
--- /dev/null
+++ b/src/components/DxhButton.vue
@@ -0,0 +1,65 @@
+<template>
+  <button
+    v-if="!href"
+    :type="type"
+    class="border px-1 pb-0.5"
+    :class="{ 'w-full': block, 'opacity-70 cursor-not-allowed': disabled || loading }"
+    :disabled="disabled || loading"
+    :autofocus="autofocus"
+    @click="handleClick"
+  >
+    <div class="flex items-center justify-center">
+      <slot v-if="loading" name="loading">
+        <Spinner />
+      </slot>
+      <slot v-else>
+        <span>Click me</span>
+      </slot>
+    </div>
+  </button>
+
+  <a
+    v-else
+    :href="!disabled || (!loading && href)"
+    :target="target"
+    class="border px-1 pb-0.5 inline-block"
+    :class="{ 'w-full': block, 'opacity-70 pointer-events-none': disabled || loading }"
+    :disabled="disabled || loading"
+    :autofocus="autofocus"
+    @click="handleClick"
+  >
+    <div class="flex items-center justify-center">
+      <slot v-if="loading" name="loading">
+        <Spinner />
+      </slot>
+      <slot v-else>
+        <span>Click me</span>
+      </slot>
+    </div>
+  </a>
+</template>
+
+<script setup lang="ts">
+import { defineProps, defineEmits } from 'vue'
+import Spinner from '../assets/icons/LoadingSpinner.vue'
+
+const props = defineProps<{
+  name?: string
+  type?: 'submit' | 'reset'
+  value?: string
+  href?: any
+  target?: string
+  disabled?: boolean
+  block?: boolean
+  autofocus?: boolean
+  loading?: boolean
+}>()
+
+const emit = defineEmits(['click'])
+
+const handleClick = () => {
+  if (!props.loading && !props.disabled) {
+    emit('click')
+  }
+}
+</script>
diff --git a/src/components/__tests__/DButton.spec.ts b/src/components/__tests__/DButton.spec.ts
deleted file mode 100644
index 0ec0695..0000000
--- a/src/components/__tests__/DButton.spec.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { mount } from '@vue/test-utils';
-import Button from '../DButton.vue';
-
-describe('DButton.vue', () => {
-  it('emits a click event when clicked', async () => {
-    const wrapper = mount(Button, {
-      props: {
-        color: 'blue',
-        size: 'md',
-      },
-      slots: {
-        default: 'Click Me',
-      },
-    });
-
-    await wrapper.trigger('click');
-    expect(wrapper.emitted()).toHaveProperty('click');
-  });
-
-  it('has the correct default classes', () => {
-    const wrapper = mount(Button);
-    expect(wrapper.classes()).toContain('rounded');
-    expect(wrapper.classes()).toContain('bg-blue-500');
-    expect(wrapper.classes()).toContain('text-md');
-    expect(wrapper.classes()).toContain('px-4');
-    expect(wrapper.classes()).toContain('py-2');
-  });
-
-  it('displays the slot content', () => {
-    const wrapper = mount(Button, {
-      slots: {
-        default: 'Click Me',
-      },
-    });
-    expect(wrapper.text()).toContain('Click Me');
-  });
-
-  it('applies the size classes correctly', () => {
-    const wrapper = mount(Button, {
-      props: {
-        size: 'lg',
-      },
-    });
-    expect(wrapper.classes()).toContain('text-lg');
-    expect(wrapper.classes()).toContain('px-6');
-    expect(wrapper.classes()).toContain('py-3');
-  });
-
-  it('applies the color classes correctly', () => {
-    const wrapper = mount(Button, {
-      props: {
-        color: 'red',
-      },
-    });
-    expect(wrapper.classes()).toContain('bg-red-500');
-  });
-});
diff --git a/src/components/__tests__/DxhButton.spec.ts b/src/components/__tests__/DxhButton.spec.ts
new file mode 100644
index 0000000..dd186bb
--- /dev/null
+++ b/src/components/__tests__/DxhButton.spec.ts
@@ -0,0 +1,74 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Button from '../DxhButton.vue'
+
+describe('DButton.vue', () => {
+  it('emits a click event when clicked', async () => {
+    const wrapper = mount(Button, {
+      props: {
+        name: 'Click me',
+        type: 'submit',
+        value: 'Click me'
+      }
+    })
+
+    await wrapper.trigger('click')
+    expect(wrapper.emitted()).toHaveProperty('click')
+  })
+
+  it('renders a button with the correct default classes', () => {
+    const wrapper = mount(Button)
+    expect(wrapper.classes()).toContain('border')
+    expect(wrapper.classes()).toContain('px-1')
+    expect(wrapper.classes()).toContain('pb-0.5')
+  })
+
+  it('renders a button with the correct dynamic classes', async () => {
+    const wrapper = mount(Button)
+    await wrapper.setProps({ disabled: true })
+  })
+
+  it('displays the slot content for the button', () => {
+    const wrapper = mount(Button, {
+      slots: {
+        default: 'Click me'
+      }
+    })
+    expect(wrapper.text()).toContain('Click me')
+  })
+
+  it('renders an anchor with the correct default classes', () => {
+    const wrapper = mount(Button, {
+      props: {
+        href: 'https://example.com',
+        target: '_blank'
+      }
+    })
+    expect(wrapper.find('a').classes()).toContain('border')
+    expect(wrapper.find('a').classes()).toContain('px-1')
+    expect(wrapper.find('a').classes()).toContain('pb-0.5')
+  })
+
+  it('renders an anchor with the correct dynamic classes', async () => {
+    const wrapper = mount(Button, {
+      props: {
+        href: 'https://example.com',
+        target: '_blank'
+      }
+    })
+    await wrapper.setProps({ disabled: true })
+  })
+
+  it('displays the slot content for the anchor', () => {
+    const wrapper = mount(Button, {
+      props: {
+        href: 'https://example.com',
+        target: '_blank'
+      },
+      slots: {
+        default: 'Click me'
+      }
+    })
+    expect(wrapper.text()).toContain('Click me')
+  })
+})
diff --git a/src/index.ts b/src/index.ts
index ee2ff8d..2d1e802 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,4 @@
-import DButton from "./components/DButton.vue"
+import DxhButton from './components/DxhButton.vue'
 import DInput from "./components/DInput.vue"
 
-export default {DButton, DInput}
\ No newline at end of file
+export default { DxhButton, DInput }
\ No newline at end of file