From 621d2feef6a29e9527d007ec7085ec4dea1b9341 Mon Sep 17 00:00:00 2001
From: Dany <zdanymc@gmail.com>
Date: Mon, 28 Apr 2025 00:25:26 +0200
Subject: [PATCH 1/4] feat(Badge): add `square` prop

---
 docs/content/3.components/badge.md            | 15 ++++++
 playground/app/pages/components/badge.vue     | 17 ++++++
 src/runtime/components/Badge.vue              |  5 +-
 src/theme/badge.ts                            | 23 ++++++++
 test/components/Badge.spec.ts                 |  1 +
 .../__snapshots__/Badge-vue.spec.ts.snap      | 54 ++++++++++---------
 .../__snapshots__/Badge.spec.ts.snap          | 26 +++++----
 .../__snapshots__/Table-vue.spec.ts.snap      | 10 ++--
 8 files changed, 109 insertions(+), 42 deletions(-)

diff --git a/docs/content/3.components/badge.md b/docs/content/3.components/badge.md
index d3693d8e94..8266424277 100644
--- a/docs/content/3.components/badge.md
+++ b/docs/content/3.components/badge.md
@@ -69,6 +69,21 @@ slots:
 ---
 ::
 
+### Square
+
+Use the `square` prop to make the Badge squared.
+
+::component-code
+---
+props:
+  icon: i-lucide-rocket
+  square: true
+  size: md
+  color: primary
+  variant: solid
+---
+::
+
 ### Icon
 
 Use the `icon` prop to show an [Icon](/components/icon) inside the Badge.
diff --git a/playground/app/pages/components/badge.vue b/playground/app/pages/components/badge.vue
index 8694c25905..521ae618b3 100644
--- a/playground/app/pages/components/badge.vue
+++ b/playground/app/pages/components/badge.vue
@@ -42,6 +42,23 @@ const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme
     <div class="flex items-center gap-2 ms-[-86px]">
       <UBadge v-for="size in sizes" :key="size" icon="i-lucide-rocket" label="Badge" :size="size" />
     </div>
+    <div class="flex items-center gap-2">
+      <UBadge
+        v-for="size in sizes"
+        :key="size"
+        icon="i-lucide-rocket"
+        :size="size"
+      />
+    </div>
+    <div class="flex items-center gap-2 ms-[-86px]">
+      <UBadge
+        v-for="size in sizes"
+        :key="size"
+        icon="i-lucide-rocket"
+        label="Badge"
+        :size="size"
+      />
+    </div>
     <div class="flex items-center gap-2 ms-[-86px]">
       <UBadge v-for="size in sizes" :key="size" :avatar="{ src: 'https://github.com/benjamincanac.png' }" label="Badge" :size="size" />
     </div>
diff --git a/src/runtime/components/Badge.vue b/src/runtime/components/Badge.vue
index 1a4aa1a12a..6a39bae9df 100644
--- a/src/runtime/components/Badge.vue
+++ b/src/runtime/components/Badge.vue
@@ -26,6 +26,8 @@ export interface BadgeProps extends Omit<UseComponentIconsProps, 'loading' | 'lo
    * @defaultValue 'md'
    */
   size?: Badge['variants']['size']
+  /** Render the badge with equal padding on all sides. */
+  square?: boolean
   class?: any
   ui?: Badge['slots']
 }
@@ -50,7 +52,7 @@ import UAvatar from './Avatar.vue'
 const props = withDefaults(defineProps<BadgeProps>(), {
   as: 'span'
 })
-defineSlots<BadgeSlots>()
+const slots = defineSlots<BadgeSlots>()
 
 const appConfig = useAppConfig() as Badge['AppConfig']
 const { orientation, size: buttonGroupSize } = useButtonGroup<BadgeProps>(props)
@@ -60,6 +62,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.badge || {})
   color: props.color,
   variant: props.variant,
   size: buttonGroupSize.value || props.size,
+  square: props.square || (!slots.default && !props.label),
   buttonGroup: orientation.value
 }))
 </script>
diff --git a/src/theme/badge.ts b/src/theme/badge.ts
index 22c184c38b..31f4578994 100644
--- a/src/theme/badge.ts
+++ b/src/theme/badge.ts
@@ -53,6 +53,9 @@ export default (options: Required<ModuleOptions>) => ({
         leadingAvatarSize: '2xs',
         trailingIcon: 'size-6'
       }
+    },
+    square: {
+      true: ''
     }
   },
   compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
@@ -87,6 +90,26 @@ export default (options: Required<ModuleOptions>) => ({
     color: 'neutral',
     variant: 'subtle',
     class: 'ring ring-inset ring-accented text-default bg-elevated'
+  }, {
+    size: 'xs',
+    square: true,
+    class: 'p-1'
+  }, {
+    size: 'sm',
+    square: true,
+    class: 'p-1.5'
+  }, {
+    size: 'md',
+    square: true,
+    class: 'p-2'
+  }, {
+    size: 'lg',
+    square: true,
+    class: 'p-2'
+  }, {
+    size: 'xl',
+    square: true,
+    class: 'p-2.5'
   }],
   defaultVariants: {
     color: 'primary',
diff --git a/test/components/Badge.spec.ts b/test/components/Badge.spec.ts
index 5378ee4475..3d2a484990 100644
--- a/test/components/Badge.spec.ts
+++ b/test/components/Badge.spec.ts
@@ -21,6 +21,7 @@ describe('Badge', () => {
     ['with avatar', { props: { avatar: { src: 'https://github.com/benjamincanac.png' } } }],
     ['with avatar and leadingIcon', { props: { avatar: { src: 'https://github.com/benjamincanac.png' }, leadingIcon: 'i-lucide-arrow-left' } }],
     ['with avatar and trailingIcon', { props: { avatar: { src: 'https://github.com/benjamincanac.png' }, trailingIcon: 'i-lucide-arrow-right' } }],
+    ['with square', { props: { icon: 'i-lucide-rocket', square: true } }],
     ['with as', { props: { label: 'Badge', as: 'div' } }],
     ['with class', { props: { label: 'Badge', class: 'rounded-full font-bold' } }],
     ['with ui', { props: { label: 'Badge', ui: { label: 'font-bold' } } }],
diff --git a/test/components/__snapshots__/Badge-vue.spec.ts.snap b/test/components/__snapshots__/Badge-vue.spec.ts.snap
index 3d75461592..1bd5e6e934 100644
--- a/test/components/__snapshots__/Badge-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Badge-vue.spec.ts.snap
@@ -1,92 +1,92 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Badge > renders with as correctly 1`] = `
-"<div class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted">
+"<div class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md bg-primary text-inverted">
   <!--v-if--><span class="truncate">Badge</span>
   <!--v-if-->
 </div>"
 `;
 
-exports[`Badge > renders with avatar and leadingIcon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--v-if--><!--v-if--></span>"`;
+exports[`Badge > renders with avatar and leadingIcon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--v-if--><!--v-if--></span>"`;
 
 exports[`Badge > renders with avatar and trailingIcon correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span>
 <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>"
 `;
 
 exports[`Badge > renders with avatar correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span>
 <!--v-if-->
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with class correctly 1`] = `
-"<span class="inline-flex items-center text-xs px-2 py-1 gap-1 bg-primary text-inverted rounded-full font-bold"><!--v-if--><span class="truncate">Badge</span>
+"<span class="inline-flex items-center text-xs px-2 py-1.5 gap-1 bg-primary text-inverted rounded-full font-bold"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
-exports[`Badge > renders with default slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if-->Default slot<!--v-if--></span>"`;
+exports[`Badge > renders with default slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md bg-primary text-inverted"><!--v-if-->Default slot<!--v-if--></span>"`;
 
-exports[`Badge > renders with icon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--v-if--><!--v-if--></span>"`;
+exports[`Badge > renders with icon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--v-if--><!--v-if--></span>"`;
 
 exports[`Badge > renders with label correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
-exports[`Badge > renders with leading and icon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--v-if--><!--v-if--></span>"`;
+exports[`Badge > renders with leading and icon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--v-if--><!--v-if--></span>"`;
 
-exports[`Badge > renders with leading slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted">Leading slot<!--v-if--><!--v-if--></span>"`;
+exports[`Badge > renders with leading slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1.5">Leading slot<!--v-if--><!--v-if--></span>"`;
 
-exports[`Badge > renders with leadingIcon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--v-if--><!--v-if--></span>"`;
+exports[`Badge > renders with leadingIcon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--v-if--><!--v-if--></span>"`;
 
 exports[`Badge > renders with neutral variant outline correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-default"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md ring ring-inset ring-accented text-default bg-default"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with neutral variant soft correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with neutral variant solid correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with neutral variant subtle correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with primary variant outline correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-primary ring ring-inset ring-primary/50"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md text-primary ring ring-inset ring-primary/50"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with primary variant soft correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md bg-primary/10 text-primary"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with primary variant solid correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with primary variant subtle correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with size lg correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-sm px-2 py-1 gap-1.5 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-sm px-2.5 py-2 gap-1.5 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with size md correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
@@ -96,7 +96,7 @@ exports[`Badge > renders with size sm correctly 1`] = `
 `;
 
 exports[`Badge > renders with size xl correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-base px-2.5 py-1 gap-1.5 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-base px-3 py-2.5 gap-1.5 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
@@ -105,13 +105,15 @@ exports[`Badge > renders with size xs correctly 1`] = `
 <!--v-if--></span>"
 `;
 
-exports[`Badge > renders with trailing and icon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>"`;
+exports[`Badge > renders with square correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--v-if--><!--v-if--></span>"`;
 
-exports[`Badge > renders with trailing slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><!--v-if-->Trailing slot</span>"`;
+exports[`Badge > renders with trailing and icon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1.5"><!--v-if--><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>"`;
 
-exports[`Badge > renders with trailingIcon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>"`;
+exports[`Badge > renders with trailing slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1.5"><!--v-if--><!--v-if-->Trailing slot</span>"`;
+
+exports[`Badge > renders with trailingIcon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1.5"><!--v-if--><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>"`;
 
 exports[`Badge > renders with ui correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate font-bold">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate font-bold">Badge</span>
 <!--v-if--></span>"
 `;
diff --git a/test/components/__snapshots__/Badge.spec.ts.snap b/test/components/__snapshots__/Badge.spec.ts.snap
index 16e2f112d0..a1d62391c5 100644
--- a/test/components/__snapshots__/Badge.spec.ts.snap
+++ b/test/components/__snapshots__/Badge.spec.ts.snap
@@ -8,18 +8,18 @@ exports[`Badge > renders with as correctly 1`] = `
 `;
 
 exports[`Badge > renders with avatar and leadingIcon correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><span class="iconify i-lucide:arrow-left shrink-0 size-4" aria-hidden="true"></span>
+"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-2"><span class="iconify i-lucide:arrow-left shrink-0 size-4" aria-hidden="true"></span>
 <!--v-if-->
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with avatar and trailingIcon correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-2"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover"></span>
 <!--v-if--><span class="iconify i-lucide:arrow-right shrink-0 size-4" aria-hidden="true"></span></span>"
 `;
 
 exports[`Badge > renders with avatar correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-2"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover"></span>
 <!--v-if-->
 <!--v-if--></span>"
 `;
@@ -32,7 +32,7 @@ exports[`Badge > renders with class correctly 1`] = `
 exports[`Badge > renders with default slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if-->Default slot<!--v-if--></span>"`;
 
 exports[`Badge > renders with icon correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><span class="iconify i-lucide:rocket shrink-0 size-4" aria-hidden="true"></span>
+"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-2"><span class="iconify i-lucide:rocket shrink-0 size-4" aria-hidden="true"></span>
 <!--v-if-->
 <!--v-if--></span>"
 `;
@@ -43,15 +43,15 @@ exports[`Badge > renders with label correctly 1`] = `
 `;
 
 exports[`Badge > renders with leading and icon correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><span class="iconify i-lucide:arrow-left shrink-0 size-4" aria-hidden="true"></span>
+"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-2"><span class="iconify i-lucide:arrow-left shrink-0 size-4" aria-hidden="true"></span>
 <!--v-if-->
 <!--v-if--></span>"
 `;
 
-exports[`Badge > renders with leading slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted">Leading slot<!--v-if--><!--v-if--></span>"`;
+exports[`Badge > renders with leading slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-2">Leading slot<!--v-if--><!--v-if--></span>"`;
 
 exports[`Badge > renders with leadingIcon correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><span class="iconify i-lucide:arrow-left shrink-0 size-4" aria-hidden="true"></span>
+"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-2"><span class="iconify i-lucide:arrow-left shrink-0 size-4" aria-hidden="true"></span>
 <!--v-if-->
 <!--v-if--></span>"
 `;
@@ -121,11 +121,17 @@ exports[`Badge > renders with size xs correctly 1`] = `
 <!--v-if--></span>"
 `;
 
-exports[`Badge > renders with trailing and icon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><!--v-if--><span class="iconify i-lucide:arrow-right shrink-0 size-4" aria-hidden="true"></span></span>"`;
+exports[`Badge > renders with square correctly 1`] = `
+"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-2"><span class="iconify i-lucide:rocket shrink-0 size-4" aria-hidden="true"></span>
+<!--v-if-->
+<!--v-if--></span>"
+`;
+
+exports[`Badge > renders with trailing and icon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-2"><!--v-if--><!--v-if--><span class="iconify i-lucide:arrow-right shrink-0 size-4" aria-hidden="true"></span></span>"`;
 
-exports[`Badge > renders with trailing slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><!--v-if-->Trailing slot</span>"`;
+exports[`Badge > renders with trailing slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-2"><!--v-if--><!--v-if-->Trailing slot</span>"`;
 
-exports[`Badge > renders with trailingIcon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><!--v-if--><span class="iconify i-lucide:arrow-right shrink-0 size-4" aria-hidden="true"></span></span>"`;
+exports[`Badge > renders with trailingIcon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-2"><!--v-if--><!--v-if--><span class="iconify i-lucide:arrow-right shrink-0 size-4" aria-hidden="true"></span></span>"`;
 
 exports[`Badge > renders with ui correctly 1`] = `
 "<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate font-bold">Badge</span>
diff --git a/test/components/__snapshots__/Table-vue.spec.ts.snap b/test/components/__snapshots__/Table-vue.spec.ts.snap
index 13c81503df..0051b46353 100644
--- a/test/components/__snapshots__/Table-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Table-vue.spec.ts.snap
@@ -303,7 +303,7 @@ exports[`Table > renders with columns correctly 1`] = `
           </label></td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#m5gr84i9</td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
           <div class="lowercase">ken99@yahoo.com</div>
         </td>
@@ -332,7 +332,7 @@ exports[`Table > renders with columns correctly 1`] = `
           </label></td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#3u1reuv4</td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
           <div class="lowercase">Abe45@gmail.com</div>
         </td>
@@ -361,7 +361,7 @@ exports[`Table > renders with columns correctly 1`] = `
           </label></td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#derv1ws0</td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->processing<!--v-if--></span></td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->processing<!--v-if--></span></td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
           <div class="lowercase">Monserrat44@gmail.com</div>
         </td>
@@ -390,7 +390,7 @@ exports[`Table > renders with columns correctly 1`] = `
           </label></td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#5kma53ae</td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
           <div class="lowercase">Silas22@gmail.com</div>
         </td>
@@ -419,7 +419,7 @@ exports[`Table > renders with columns correctly 1`] = `
           </label></td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#bhqecj4p</td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-error/10 text-error ring ring-inset ring-error/25 capitalize"><!--v-if-->failed<!--v-if--></span></td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md bg-error/10 text-error ring ring-inset ring-error/25 capitalize"><!--v-if-->failed<!--v-if--></span></td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
           <div class="lowercase">carmella@hotmail.com</div>
         </td>

From 71ba3683317c18268e4fcdce4f1f214b9cdf91a0 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 13 May 2025 14:27:56 +0200
Subject: [PATCH 2/4] up

---
 docs/content/3.components/badge.md            | 15 ------
 playground/app/pages/components/badge.vue     | 20 ++-----
 src/theme/badge.ts                            | 10 ++--
 .../__snapshots__/Badge-vue.spec.ts.snap      | 54 +++++++++----------
 .../__snapshots__/Badge.spec.ts.snap          | 22 ++++----
 .../__snapshots__/Table-vue.spec.ts.snap      | 10 ++--
 6 files changed, 51 insertions(+), 80 deletions(-)

diff --git a/docs/content/3.components/badge.md b/docs/content/3.components/badge.md
index 8266424277..d3693d8e94 100644
--- a/docs/content/3.components/badge.md
+++ b/docs/content/3.components/badge.md
@@ -69,21 +69,6 @@ slots:
 ---
 ::
 
-### Square
-
-Use the `square` prop to make the Badge squared.
-
-::component-code
----
-props:
-  icon: i-lucide-rocket
-  square: true
-  size: md
-  color: primary
-  variant: solid
----
-::
-
 ### Icon
 
 Use the `icon` prop to show an [Icon](/components/icon) inside the Badge.
diff --git a/playground/app/pages/components/badge.vue b/playground/app/pages/components/badge.vue
index 521ae618b3..4562211d83 100644
--- a/playground/app/pages/components/badge.vue
+++ b/playground/app/pages/components/badge.vue
@@ -42,25 +42,11 @@ const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme
     <div class="flex items-center gap-2 ms-[-86px]">
       <UBadge v-for="size in sizes" :key="size" icon="i-lucide-rocket" label="Badge" :size="size" />
     </div>
-    <div class="flex items-center gap-2">
-      <UBadge
-        v-for="size in sizes"
-        :key="size"
-        icon="i-lucide-rocket"
-        :size="size"
-      />
-    </div>
-    <div class="flex items-center gap-2 ms-[-86px]">
-      <UBadge
-        v-for="size in sizes"
-        :key="size"
-        icon="i-lucide-rocket"
-        label="Badge"
-        :size="size"
-      />
-    </div>
     <div class="flex items-center gap-2 ms-[-86px]">
       <UBadge v-for="size in sizes" :key="size" :avatar="{ src: 'https://github.com/benjamincanac.png' }" label="Badge" :size="size" />
     </div>
+    <div class="flex items-center gap-2">
+      <UBadge v-for="size in sizes" :key="size" icon="i-lucide-rocket" :size="size" />
+    </div>
   </div>
 </template>
diff --git a/src/theme/badge.ts b/src/theme/badge.ts
index 31f4578994..62e65a7380 100644
--- a/src/theme/badge.ts
+++ b/src/theme/badge.ts
@@ -93,23 +93,23 @@ export default (options: Required<ModuleOptions>) => ({
   }, {
     size: 'xs',
     square: true,
-    class: 'p-1'
+    class: 'p-0.5'
   }, {
     size: 'sm',
     square: true,
-    class: 'p-1.5'
+    class: 'p-1'
   }, {
     size: 'md',
     square: true,
-    class: 'p-2'
+    class: 'p-1'
   }, {
     size: 'lg',
     square: true,
-    class: 'p-2'
+    class: 'p-1'
   }, {
     size: 'xl',
     square: true,
-    class: 'p-2.5'
+    class: 'p-1'
   }],
   defaultVariants: {
     color: 'primary',
diff --git a/test/components/__snapshots__/Badge-vue.spec.ts.snap b/test/components/__snapshots__/Badge-vue.spec.ts.snap
index 1bd5e6e934..8a7bd19d3b 100644
--- a/test/components/__snapshots__/Badge-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Badge-vue.spec.ts.snap
@@ -1,92 +1,92 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Badge > renders with as correctly 1`] = `
-"<div class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md bg-primary text-inverted">
+"<div class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted">
   <!--v-if--><span class="truncate">Badge</span>
   <!--v-if-->
 </div>"
 `;
 
-exports[`Badge > renders with avatar and leadingIcon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--v-if--><!--v-if--></span>"`;
+exports[`Badge > renders with avatar and leadingIcon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--v-if--><!--v-if--></span>"`;
 
 exports[`Badge > renders with avatar and trailingIcon correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover"></span>
 <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>"
 `;
 
 exports[`Badge > renders with avatar correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-elevated size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="20" height="20" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover"></span>
 <!--v-if-->
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with class correctly 1`] = `
-"<span class="inline-flex items-center text-xs px-2 py-1.5 gap-1 bg-primary text-inverted rounded-full font-bold"><!--v-if--><span class="truncate">Badge</span>
+"<span class="inline-flex items-center text-xs px-2 py-1 gap-1 bg-primary text-inverted rounded-full font-bold"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
-exports[`Badge > renders with default slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md bg-primary text-inverted"><!--v-if-->Default slot<!--v-if--></span>"`;
+exports[`Badge > renders with default slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if-->Default slot<!--v-if--></span>"`;
 
-exports[`Badge > renders with icon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--v-if--><!--v-if--></span>"`;
+exports[`Badge > renders with icon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--v-if--><!--v-if--></span>"`;
 
 exports[`Badge > renders with label correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
-exports[`Badge > renders with leading and icon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--v-if--><!--v-if--></span>"`;
+exports[`Badge > renders with leading and icon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--v-if--><!--v-if--></span>"`;
 
-exports[`Badge > renders with leading slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1.5">Leading slot<!--v-if--><!--v-if--></span>"`;
+exports[`Badge > renders with leading slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1">Leading slot<!--v-if--><!--v-if--></span>"`;
 
-exports[`Badge > renders with leadingIcon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--v-if--><!--v-if--></span>"`;
+exports[`Badge > renders with leadingIcon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--v-if--><!--v-if--></span>"`;
 
 exports[`Badge > renders with neutral variant outline correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md ring ring-inset ring-accented text-default bg-default"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-default"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with neutral variant soft correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with neutral variant solid correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-inverted bg-inverted"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with neutral variant subtle correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with primary variant outline correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md text-primary ring ring-inset ring-primary/50"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md text-primary ring ring-inset ring-primary/50"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with primary variant soft correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md bg-primary/10 text-primary"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with primary variant solid correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with primary variant subtle correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with size lg correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-sm px-2.5 py-2 gap-1.5 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-sm px-2 py-1 gap-1.5 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with size md correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
@@ -96,7 +96,7 @@ exports[`Badge > renders with size sm correctly 1`] = `
 `;
 
 exports[`Badge > renders with size xl correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-base px-3 py-2.5 gap-1.5 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
+"<span class="font-medium inline-flex items-center text-base px-2.5 py-1 gap-1.5 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 
@@ -105,15 +105,15 @@ exports[`Badge > renders with size xs correctly 1`] = `
 <!--v-if--></span>"
 `;
 
-exports[`Badge > renders with square correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--v-if--><!--v-if--></span>"`;
+exports[`Badge > renders with square correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--v-if--><!--v-if--></span>"`;
 
-exports[`Badge > renders with trailing and icon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1.5"><!--v-if--><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>"`;
+exports[`Badge > renders with trailing and icon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><!--v-if--><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>"`;
 
-exports[`Badge > renders with trailing slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1.5"><!--v-if--><!--v-if-->Trailing slot</span>"`;
+exports[`Badge > renders with trailing slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><!--v-if--><!--v-if-->Trailing slot</span>"`;
 
-exports[`Badge > renders with trailingIcon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1.5"><!--v-if--><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>"`;
+exports[`Badge > renders with trailingIcon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><!--v-if--><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>"`;
 
 exports[`Badge > renders with ui correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate font-bold">Badge</span>
+"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate font-bold">Badge</span>
 <!--v-if--></span>"
 `;
diff --git a/test/components/__snapshots__/Badge.spec.ts.snap b/test/components/__snapshots__/Badge.spec.ts.snap
index a1d62391c5..60192c219c 100644
--- a/test/components/__snapshots__/Badge.spec.ts.snap
+++ b/test/components/__snapshots__/Badge.spec.ts.snap
@@ -8,18 +8,18 @@ exports[`Badge > renders with as correctly 1`] = `
 `;
 
 exports[`Badge > renders with avatar and leadingIcon correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-2"><span class="iconify i-lucide:arrow-left shrink-0 size-4" aria-hidden="true"></span>
+"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><span class="iconify i-lucide:arrow-left shrink-0 size-4" aria-hidden="true"></span>
 <!--v-if-->
 <!--v-if--></span>"
 `;
 
 exports[`Badge > renders with avatar and trailingIcon correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-2"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover"></span>
 <!--v-if--><span class="iconify i-lucide:arrow-right shrink-0 size-4" aria-hidden="true"></span></span>"
 `;
 
 exports[`Badge > renders with avatar correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-2"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-elevated size-4 text-[8px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="16" height="16" class="h-full w-full rounded-[inherit] object-cover"></span>
 <!--v-if-->
 <!--v-if--></span>"
 `;
@@ -32,7 +32,7 @@ exports[`Badge > renders with class correctly 1`] = `
 exports[`Badge > renders with default slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if-->Default slot<!--v-if--></span>"`;
 
 exports[`Badge > renders with icon correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-2"><span class="iconify i-lucide:rocket shrink-0 size-4" aria-hidden="true"></span>
+"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><span class="iconify i-lucide:rocket shrink-0 size-4" aria-hidden="true"></span>
 <!--v-if-->
 <!--v-if--></span>"
 `;
@@ -43,15 +43,15 @@ exports[`Badge > renders with label correctly 1`] = `
 `;
 
 exports[`Badge > renders with leading and icon correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-2"><span class="iconify i-lucide:arrow-left shrink-0 size-4" aria-hidden="true"></span>
+"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><span class="iconify i-lucide:arrow-left shrink-0 size-4" aria-hidden="true"></span>
 <!--v-if-->
 <!--v-if--></span>"
 `;
 
-exports[`Badge > renders with leading slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-2">Leading slot<!--v-if--><!--v-if--></span>"`;
+exports[`Badge > renders with leading slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1">Leading slot<!--v-if--><!--v-if--></span>"`;
 
 exports[`Badge > renders with leadingIcon correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-2"><span class="iconify i-lucide:arrow-left shrink-0 size-4" aria-hidden="true"></span>
+"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><span class="iconify i-lucide:arrow-left shrink-0 size-4" aria-hidden="true"></span>
 <!--v-if-->
 <!--v-if--></span>"
 `;
@@ -122,16 +122,16 @@ exports[`Badge > renders with size xs correctly 1`] = `
 `;
 
 exports[`Badge > renders with square correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-2"><span class="iconify i-lucide:rocket shrink-0 size-4" aria-hidden="true"></span>
+"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><span class="iconify i-lucide:rocket shrink-0 size-4" aria-hidden="true"></span>
 <!--v-if-->
 <!--v-if--></span>"
 `;
 
-exports[`Badge > renders with trailing and icon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-2"><!--v-if--><!--v-if--><span class="iconify i-lucide:arrow-right shrink-0 size-4" aria-hidden="true"></span></span>"`;
+exports[`Badge > renders with trailing and icon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><!--v-if--><!--v-if--><span class="iconify i-lucide:arrow-right shrink-0 size-4" aria-hidden="true"></span></span>"`;
 
-exports[`Badge > renders with trailing slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-2"><!--v-if--><!--v-if-->Trailing slot</span>"`;
+exports[`Badge > renders with trailing slot correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><!--v-if--><!--v-if-->Trailing slot</span>"`;
 
-exports[`Badge > renders with trailingIcon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-2"><!--v-if--><!--v-if--><span class="iconify i-lucide:arrow-right shrink-0 size-4" aria-hidden="true"></span></span>"`;
+exports[`Badge > renders with trailingIcon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><!--v-if--><!--v-if--><span class="iconify i-lucide:arrow-right shrink-0 size-4" aria-hidden="true"></span></span>"`;
 
 exports[`Badge > renders with ui correctly 1`] = `
 "<span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary text-inverted"><!--v-if--><span class="truncate font-bold">Badge</span>
diff --git a/test/components/__snapshots__/Table-vue.spec.ts.snap b/test/components/__snapshots__/Table-vue.spec.ts.snap
index 0051b46353..13c81503df 100644
--- a/test/components/__snapshots__/Table-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Table-vue.spec.ts.snap
@@ -303,7 +303,7 @@ exports[`Table > renders with columns correctly 1`] = `
           </label></td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#m5gr84i9</td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
           <div class="lowercase">ken99@yahoo.com</div>
         </td>
@@ -332,7 +332,7 @@ exports[`Table > renders with columns correctly 1`] = `
           </label></td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#3u1reuv4</td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
           <div class="lowercase">Abe45@gmail.com</div>
         </td>
@@ -361,7 +361,7 @@ exports[`Table > renders with columns correctly 1`] = `
           </label></td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#derv1ws0</td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->processing<!--v-if--></span></td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->processing<!--v-if--></span></td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
           <div class="lowercase">Monserrat44@gmail.com</div>
         </td>
@@ -390,7 +390,7 @@ exports[`Table > renders with columns correctly 1`] = `
           </label></td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#5kma53ae</td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
           <div class="lowercase">Silas22@gmail.com</div>
         </td>
@@ -419,7 +419,7 @@ exports[`Table > renders with columns correctly 1`] = `
           </label></td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">#bhqecj4p</td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">Invalid Date</td>
-        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1.5 gap-1 rounded-md bg-error/10 text-error ring ring-inset ring-error/25 capitalize"><!--v-if-->failed<!--v-if--></span></td>
+        <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-error/10 text-error ring ring-inset ring-error/25 capitalize"><!--v-if-->failed<!--v-if--></span></td>
         <td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&amp;:has([role=checkbox])]:pe-0">
           <div class="lowercase">carmella@hotmail.com</div>
         </td>

From af79a5f99f42e4be59c4cdf5e0e0e85b326070c5 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 13 May 2025 14:30:03 +0200
Subject: [PATCH 3/4] up

---
 test/components/Badge.spec.ts                        | 2 +-
 test/components/__snapshots__/Badge-vue.spec.ts.snap | 5 ++++-
 test/components/__snapshots__/Badge.spec.ts.snap     | 3 +--
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/test/components/Badge.spec.ts b/test/components/Badge.spec.ts
index 3d2a484990..a9452e9ecc 100644
--- a/test/components/Badge.spec.ts
+++ b/test/components/Badge.spec.ts
@@ -21,7 +21,7 @@ describe('Badge', () => {
     ['with avatar', { props: { avatar: { src: 'https://github.com/benjamincanac.png' } } }],
     ['with avatar and leadingIcon', { props: { avatar: { src: 'https://github.com/benjamincanac.png' }, leadingIcon: 'i-lucide-arrow-left' } }],
     ['with avatar and trailingIcon', { props: { avatar: { src: 'https://github.com/benjamincanac.png' }, trailingIcon: 'i-lucide-arrow-right' } }],
-    ['with square', { props: { icon: 'i-lucide-rocket', square: true } }],
+    ['with square', { props: { label: 'Badge', square: true } }],
     ['with as', { props: { label: 'Badge', as: 'div' } }],
     ['with class', { props: { label: 'Badge', class: 'rounded-full font-bold' } }],
     ['with ui', { props: { label: 'Badge', ui: { label: 'font-bold' } } }],
diff --git a/test/components/__snapshots__/Badge-vue.spec.ts.snap b/test/components/__snapshots__/Badge-vue.spec.ts.snap
index 8a7bd19d3b..1d544baafa 100644
--- a/test/components/__snapshots__/Badge-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Badge-vue.spec.ts.snap
@@ -105,7 +105,10 @@ exports[`Badge > renders with size xs correctly 1`] = `
 <!--v-if--></span>"
 `;
 
-exports[`Badge > renders with square correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg><!--v-if--><!--v-if--></span>"`;
+exports[`Badge > renders with square correctly 1`] = `
+"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><!--v-if--><span class="truncate">Badge</span>
+<!--v-if--></span>"
+`;
 
 exports[`Badge > renders with trailing and icon correctly 1`] = `"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><!--v-if--><!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>"`;
 
diff --git a/test/components/__snapshots__/Badge.spec.ts.snap b/test/components/__snapshots__/Badge.spec.ts.snap
index 60192c219c..c53a59ef0e 100644
--- a/test/components/__snapshots__/Badge.spec.ts.snap
+++ b/test/components/__snapshots__/Badge.spec.ts.snap
@@ -122,8 +122,7 @@ exports[`Badge > renders with size xs correctly 1`] = `
 `;
 
 exports[`Badge > renders with square correctly 1`] = `
-"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><span class="iconify i-lucide:rocket shrink-0 size-4" aria-hidden="true"></span>
-<!--v-if-->
+"<span class="font-medium inline-flex items-center text-xs gap-1 rounded-md bg-primary text-inverted p-1"><!--v-if--><span class="truncate">Badge</span>
 <!--v-if--></span>"
 `;
 

From 3a9c1e00f4205cb57370f70337520ea27bfb712e Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 13 May 2025 14:35:02 +0200
Subject: [PATCH 4/4] up

---
 playground/app/pages/components/badge.vue | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/playground/app/pages/components/badge.vue b/playground/app/pages/components/badge.vue
index 4562211d83..b85227ee3d 100644
--- a/playground/app/pages/components/badge.vue
+++ b/playground/app/pages/components/badge.vue
@@ -36,17 +36,27 @@ const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme
         color="neutral"
       />
     </div>
-    <div class="flex items-center gap-2 ms-[-56px]">
+    <div class="flex items-center gap-2 ms-[-90px]">
       <UBadge v-for="size in sizes" :key="size" label="Badge" :size="size" />
     </div>
-    <div class="flex items-center gap-2 ms-[-86px]">
+    <div class="flex items-center gap-2 ms-[-122px]">
       <UBadge v-for="size in sizes" :key="size" icon="i-lucide-rocket" label="Badge" :size="size" />
     </div>
-    <div class="flex items-center gap-2 ms-[-86px]">
+    <div class="flex items-center gap-2 ms-[-130px]">
       <UBadge v-for="size in sizes" :key="size" :avatar="{ src: 'https://github.com/benjamincanac.png' }" label="Badge" :size="size" />
     </div>
-    <div class="flex items-center gap-2">
+    <div class="flex items-center gap-2 ms-[-52px]">
       <UBadge v-for="size in sizes" :key="size" icon="i-lucide-rocket" :size="size" />
     </div>
+    <div class="flex items-center gap-2 ms-[-60px]">
+      <UBadge
+        v-for="size in sizes"
+        :key="size"
+        :avatar="{ src: 'https://github.com/benjamincanac.png' }"
+        :size="size"
+        color="neutral"
+        variant="outline"
+      />
+    </div>
   </div>
 </template>