diff --git a/src/runtime/components/Button.vue b/src/runtime/components/Button.vue
index c4e03c8c..54711721 100644
--- a/src/runtime/components/Button.vue
+++ b/src/runtime/components/Button.vue
@@ -85,7 +85,7 @@ const trailingIconName = computed(() => {
 </script>
 
 <template>
-  <ULink :type="type" :disabled="disabled || loading" :class="ui.base({ class: $props.class })" v-bind="{ ...forward, ...$attrs }">
+  <ULink :type="type" :disabled="disabled || loading" :class="ui.base({ class: props.class })" v-bind="{ ...forward, ...$attrs }">
     <slot name="leading" :disabled="disabled" :loading="loading">
       <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.icon()" aria-hidden="true" />
     </slot>
diff --git a/test/components/Button.spec.ts b/test/components/Button.spec.ts
index c46ed4a6..e97ce009 100644
--- a/test/components/Button.spec.ts
+++ b/test/components/Button.spec.ts
@@ -5,6 +5,7 @@ import ComponentRender from '../component-render'
 describe('Button', () => {
   it.each([
     ['with label', { props: { label: 'Button' } }],
+    ['with class', { props: { class: 'rounded-full font-bold' } }],
     ['with size', { props: { label: 'Button', size: 'lg' as const } }],
     ['with color', { props: { label: 'Button', color: 'red' as const } }],
     // ['with variant', { props: { label: 'Button', variant: 'outline' } }],
diff --git a/test/components/__snapshots__/Button.spec.ts.snap b/test/components/__snapshots__/Button.spec.ts.snap
index 9efd227e..c264b5fa 100644
--- a/test/components/__snapshots__/Button.spec.ts.snap
+++ b/test/components/__snapshots__/Button.spec.ts.snap
@@ -7,6 +7,8 @@ exports[`Button > renders with block correctly 1`] = `
 </button>"
 `;
 
+exports[`Button > renders with class correctly 1`] = `"<button type="button" class="inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 bg-blue-500 hover:bg-blue-700 text-sm gap-x-1.5 p-1 rounded-full font-bold"></button>"`;
+
 exports[`Button > renders with color correctly 1`] = `
 "<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 bg-red-500 hover:bg-red-700 px-2.5 py-1.5 text-sm gap-x-1.5">
   <!--v-if--><span class="">Button</span>
@@ -121,10 +123,3 @@ exports[`Button > renders with truncate correctly 1`] = `
   <!--v-if-->
 </button>"
 `;
-
-exports[`Button > renders with variant correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 bg-blue-500 hover:bg-blue-700 px-2.5 py-1.5 text-sm gap-x-1.5">
-  <!--v-if--><span class="">Button</span>
-  <!--v-if-->
-</button>"
-`;