diff --git a/test/components/Avatar.spec.ts b/test/components/Avatar.spec.ts
new file mode 100644
index 00000000..666d68ad
--- /dev/null
+++ b/test/components/Avatar.spec.ts
@@ -0,0 +1,23 @@
+import { describe, it, expect } from 'vitest'
+import Avatar, { type AvatarProps } from '../../src/runtime/components/Avatar.vue'
+import ComponentRender from '../component-render'
+
+describe('Avatar', () => {
+  it.each([
+    ['with src', { props: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' } }],
+    ['with alt', { props: { alt: 'Benjamin Canac' } }],
+    ['with fallback', { props: { fallback: '+1' } }],
+    ['with size 3xs', { props: { size: '3xs' as const } }],
+    ['with size 2xs', { props: { size: '2xs' as const } }],
+    ['with size xs', { props: { size: 'xs' as const } }],
+    ['with size sm', { props: { size: 'sm' as const } }],
+    ['with size md', { props: { size: 'md' as const } }],
+    ['with size lg', { props: { size: 'lg' as const } }],
+    ['with size xl', { props: { size: 'xl' as const } }],
+    ['with size 2xl', { props: { size: '2xl' as const } }],
+    ['with size 3xl', { props: { size: '3xl' as const } }]
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: AvatarProps, slots?: any }) => {
+    const html = await ComponentRender(nameOrHtml, options, Avatar)
+    expect(html).toMatchSnapshot()
+  })
+})
diff --git a/test/components/Badge.spec.ts b/test/components/Badge.spec.ts
index 5de537ca..c23f53f7 100644
--- a/test/components/Badge.spec.ts
+++ b/test/components/Badge.spec.ts
@@ -6,7 +6,10 @@ describe('Badge', () => {
   it.each([
     ['with label', { props: { label: 'Badge' } }],
     ['with class', { props: { class: 'rounded-full font-bold' } }],
-    ['with size', { props: { label: 'Badge', size: 'lg' as const } }],
+    ['with size xs', { props: { label: 'Badge', size: 'xs' as const } }],
+    ['with size sm', { props: { label: 'Badge', size: 'sm' as const } }],
+    ['with size md', { props: { label: 'Badge', size: 'md' as const } }],
+    ['with size lg', { props: { label: 'Badge', size: 'lg' as const } }],
     ['with color green', { props: { label: 'Badge', color: 'green' as const } }],
     ['with color white', { props: { label: 'Badge', color: 'white' as const } }],
     ['with color gray', { props: { label: 'Badge', color: 'gray' as const } }],
diff --git a/test/components/Button.spec.ts b/test/components/Button.spec.ts
index 30413086..a0d27033 100644
--- a/test/components/Button.spec.ts
+++ b/test/components/Button.spec.ts
@@ -6,7 +6,12 @@ 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 size 2xs', { props: { label: 'Button', size: '2xs' as const } }],
+    ['with size xs', { props: { label: 'Button', size: 'xs' as const } }],
+    ['with size sm', { props: { label: 'Button', size: 'sm' as const } }],
+    ['with size md', { props: { label: 'Button', size: 'md' as const } }],
+    ['with size lg', { props: { label: 'Button', size: 'lg' as const } }],
+    ['with size xl', { props: { label: 'Button', size: 'xl' as const } }],
     ['with color', { props: { label: 'Button', color: 'red' as const } }],
     ['with variant outline', { props: { label: 'Button', variant: 'outline' as const } }],
     ['with variant soft', { props: { label: 'Button', variant: 'soft' as const } }],
diff --git a/test/components/__snapshots__/Avatar.spec.ts.snap b/test/components/__snapshots__/Avatar.spec.ts.snap
new file mode 100644
index 00000000..758fc2cf
--- /dev/null
+++ b/test/components/__snapshots__/Avatar.spec.ts.snap
@@ -0,0 +1,25 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Avatar > renders with alt correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-8 text-sm"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">BC</span></span>"`;
+
+exports[`Avatar > renders with fallback correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-8 text-sm"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">+1</span></span>"`;
+
+exports[`Avatar > renders with size 2xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-16 text-2xl"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>"`;
+
+exports[`Avatar > renders with size 2xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px]"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>"`;
+
+exports[`Avatar > renders with size 3xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-20 text-3xl"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>"`;
+
+exports[`Avatar > renders with size 3xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-4 text-[8px]"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>"`;
+
+exports[`Avatar > renders with size lg correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-12 text-lg"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>"`;
+
+exports[`Avatar > renders with size md correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-10 text-base"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>"`;
+
+exports[`Avatar > renders with size sm correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-8 text-sm"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>"`;
+
+exports[`Avatar > renders with size xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-14 text-xl"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>"`;
+
+exports[`Avatar > renders with size xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-6 text-xs"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>"`;
+
+exports[`Avatar > renders with src correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-8 text-sm"><!----><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>"`;
diff --git a/test/components/__snapshots__/Badge.spec.ts.snap b/test/components/__snapshots__/Badge.spec.ts.snap
index 34265e2d..9f70e6ff 100644
--- a/test/components/__snapshots__/Badge.spec.ts.snap
+++ b/test/components/__snapshots__/Badge.spec.ts.snap
@@ -16,6 +16,14 @@ exports[`Badge > renders with label correctly 1`] = `"<span class="rounded-md fo
 
 exports[`Badge > renders with size correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-sm px-2.5 py-1.5 bg-primary-500 dark:bg-primary-400 text-white dark:text-gray-900">Badge</span>"`;
 
+exports[`Badge > renders with size lg correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-sm px-2.5 py-1.5 bg-primary-500 dark:bg-primary-400 text-white dark:text-gray-900">Badge</span>"`;
+
+exports[`Badge > renders with size md correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-sm px-2 py-1 bg-primary-500 dark:bg-primary-400 text-white dark:text-gray-900">Badge</span>"`;
+
+exports[`Badge > renders with size sm correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 bg-primary-500 dark:bg-primary-400 text-white dark:text-gray-900">Badge</span>"`;
+
+exports[`Badge > renders with size xs correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-1.5 py-0.5 bg-primary-500 dark:bg-primary-400 text-white dark:text-gray-900">Badge</span>"`;
+
 exports[`Badge > renders with variant link correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 bg-primary-50 dark:bg-primary-400/10 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500/25 dark:ring-primary-400/25">Badge</span>"`;
 
 exports[`Badge > renders with variant outline correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 text-primary-500 dark:text-primary-400 ring ring-inset ring-primary-500 dark:ring-primary-400">Badge</span>"`;
diff --git a/test/components/__snapshots__/Button.spec.ts.snap b/test/components/__snapshots__/Button.spec.ts.snap
index d5bac1f4..5aca108c 100644
--- a/test/components/__snapshots__/Button.spec.ts.snap
+++ b/test/components/__snapshots__/Button.spec.ts.snap
@@ -31,7 +31,7 @@ exports[`Button > renders with disabled correctly 1`] = `
 `;
 
 exports[`Button > renders with icon correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><svg data-v-2d097d15="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 h-5 w-5" width="1em" height="1em" viewBox="0 0 24 24">
+"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><svg data-v-2d097d15="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
     <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41a60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84a51.39 51.39 0 0 0-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5m0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5"></path>
   </svg>
   <!--v-if-->
@@ -54,7 +54,7 @@ exports[`Button > renders with leading slot correctly 1`] = `
 `;
 
 exports[`Button > renders with leadingIcon correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><svg data-v-2d097d15="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 h-5 w-5" width="1em" height="1em" viewBox="0 0 24 24">
+"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><svg data-v-2d097d15="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
     <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"></path>
   </svg>
   <!--v-if-->
@@ -63,7 +63,7 @@ exports[`Button > renders with leadingIcon correctly 1`] = `
 `;
 
 exports[`Button > renders with loading correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><svg data-v-2d097d15="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 h-5 w-5 animate-spin" width="1em" height="1em" viewBox="0 0 20 20">
+"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><svg data-v-2d097d15="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5 animate-spin" width="1em" height="1em" viewBox="0 0 20 20">
     <path fill="currentColor" fill-rule="evenodd" d="M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138a.75.75 0 0 0-1.449-.39m1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219" clip-rule="evenodd"></path>
   </svg>
   <!--v-if-->
@@ -72,7 +72,7 @@ exports[`Button > renders with loading correctly 1`] = `
 `;
 
 exports[`Button > renders with loadingIcon correctly 1`] = `
-"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><svg data-v-2d097d15="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 h-5 w-5 animate-spin" width="1em" height="1em" viewBox="0 0 24 24">
+"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5"><svg data-v-2d097d15="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5 animate-spin" width="1em" height="1em" viewBox="0 0 24 24">
     <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09m8.445-7.188L18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456m-1.365 11.852L16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183l.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394l-1.183.394a2.25 2.25 0 0 0-1.423 1.423"></path>
   </svg>
   <!--v-if-->
@@ -80,6 +80,13 @@ exports[`Button > renders with loadingIcon correctly 1`] = `
 </button>"
 `;
 
+exports[`Button > renders with size 2xs correctly 1`] = `
+"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2 py-1 text-xs gap-x-1 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
+  <!--v-if--><span class="">Button</span>
+  <!--v-if-->
+</button>"
+`;
+
 exports[`Button > renders with size correctly 1`] = `
 "<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-3.5 py-2.5 text-sm gap-x-2.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
   <!--v-if--><span class="">Button</span>
@@ -87,6 +94,41 @@ exports[`Button > renders with size correctly 1`] = `
 </button>"
 `;
 
+exports[`Button > renders with size lg correctly 1`] = `
+"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-3.5 py-2.5 text-sm gap-x-2.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
+  <!--v-if--><span class="">Button</span>
+  <!--v-if-->
+</button>"
+`;
+
+exports[`Button > renders with size md correctly 1`] = `
+"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-3 py-2 text-sm gap-x-2 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
+  <!--v-if--><span class="">Button</span>
+  <!--v-if-->
+</button>"
+`;
+
+exports[`Button > renders with size sm correctly 1`] = `
+"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
+  <!--v-if--><span class="">Button</span>
+  <!--v-if-->
+</button>"
+`;
+
+exports[`Button > renders with size xl correctly 1`] = `
+"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-3.5 py-2.5 text-base gap-x-2.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
+  <!--v-if--><span class="">Button</span>
+  <!--v-if-->
+</button>"
+`;
+
+exports[`Button > renders with size xs correctly 1`] = `
+"<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-xs gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
+  <!--v-if--><span class="">Button</span>
+  <!--v-if-->
+</button>"
+`;
+
 exports[`Button > renders with square correctly 1`] = `
 "<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5">
   <!--v-if--><span class="">Button</span>
@@ -104,7 +146,7 @@ exports[`Button > renders with trailing slot correctly 1`] = `
 exports[`Button > renders with trailingIcon correctly 1`] = `
 "<button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 p-1.5">
   <!--v-if-->
-  <!--v-if--><svg data-v-2d097d15="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 h-5 w-5" width="1em" height="1em" viewBox="0 0 24 24">
+  <!--v-if--><svg data-v-2d097d15="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
     <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"></path>
   </svg>
 </button>"